Next.js 14 - File upload with Dropzone, styled with TailwindCss

Azure Blob Storage offers 5 GB locally redundant storage (LRS) hot block with 20,000 read and 10,000 write operations free every month for 12 months. So, let's build a nice-looking upload form with Next.js 14. We will integrate a dropzone and the capability to upload multiple files simultaneously with a fancy upload progress bar.

Here is the GitHub repo with the entire code.

Used Stack

I will start with my default stack:

• Next.js 14 as the web framework

• TailwindCss for Styling

• Contentful CMS (Free Plan)

• Microsoft Azure for creating the storage account

• Vercel for hosting

Here is already a spoiler for the outcome.

Storage Accounts (Azure, Aws, Google)

Azure Blob Storage, AWS S3 (Simple Storage Service), and Google Cloud Storage are the most popular cloud-based object storage solutions provided by Microsoft Azure, Amazon Web Services, and Google Cloud Platform, respectively. Here is a breakdown of the differences among them:

Basic Overview

• Azure Blob Storage: Part of Microsoft Azure, Blob Storage is an object storage solution for the cloud that stores unstructured data like documents, images, videos, and backups. It supports different types of blobs such as Block blobs (for discrete objects like images or PDFs), Append blobs (optimized for append operations like logging), and Page blobs (optimized for random read/write operations).

• AWS S3 (Simple Storage Service): Amazon S3 is AWS’s object storage service that provides highly scalable, durable, and secure storage for any type of data. It supports a wide variety of use cases including data lakes, backups, and content storage. S3 is known for its simplicity and robustness, offering different storage classes like S3 Standard, S3 Intelligent-Tiering, S3 Glacier, etc.

• Google Cloud Storage: Google Cloud Storage is Google’s unified object storage for developers and enterprises that allows storing and accessing any amount of data at any time. It offers several storage classes including Standard, Nearline, Coldline, and Archive, catering to different access needs and cost preferences.

Durability and Availability

All three services provide high durability and varying levels of availability:

Azure Blob Storage:

• Durability: 99.999999999% (11 nines)

• Availability: Options include 99.9% for Hot and Cool, and 99.99% for Read-Access Geo-Redundant Storage (RA-GRS).

AWS S3:

• Durability: 99.999999999% (11 nines)

• Availability: 99.9% for Standard and 99.99% for Intelligent-Tiering and Standard.

Google Cloud Storage:

• Durability: 99.999999999% (11 nines)

• Availability: 99.9% to 99.95% depending on the storage class and redundancy type.

Pricing Models

Pricing varies significantly based on storage class, access frequency, and data transfer requirements:

• Azure Blob Storage: Pricing is based on the storage type (Hot, Cool, Archive), redundancy option, data retrieval, and operations.

• AWS S3: Charges for storage (per GB), request costs (PUT, GET), and data transfer out. It also has different pricing tiers for different storage classes.

• Google Cloud Storage: Similar to AWS, pricing is based on the storage class (Standard, Nearline, Coldline, Archive), operations, and network egress.

Security and Compliance

All three platforms provide robust security features like encryption at rest and in transit, identity and access management (IAM), data policies, and compliance with global standards (e.g., GDPR, HIPAA).

• Azure Blob Storage: Offers Azure Active Directory integration, Managed Service Identity, and Advanced Threat Protection.

• AWS S3: Provides S3 Bucket Policies, AWS IAM, AWS KMS for encryption, and features like MFA Delete.

• Google Cloud Storage: Integrates with Cloud IAM, Cloud KMS, and supports Object-Level IAM for fine-grained access control.

Unique Features

• Azure Blob Storage: Features like Soft Delete, Snapshot, and Blob Versioning.

• AWS S3: Offers S3 Transfer Acceleration, Glacier Vault Lock, and S3 Select

  for querying data in S3.

• Google Cloud Storage: Offers Object Lifecycle Management, Requester Pays, and

  Signed URLs.

Let’s start with the development

For this example, I opted for Azure. The first action is to create an account and a corresponding Azure Subscription.

Azure Account Creation

The easiest way is to create a free GitHub account, which you can reuse to create additional accounts. In this example, we will create an Azure account with a Subscription to create a Storage Account. The Azure account creation is free, but you need to provide a payment method (I used a credit card) to finish the creation process.

Go to https://signup.live.com/signup and provide your mail address, Name, Region, and birth date. After that, you will receive a confirmation mail/OTP code, and you will be done.

Then we go to portal.azure.com, and you’re already logged in. Microsoft has already created a subscription for you that is connected to a new Azure AD Directory.

Now, we click on the hamburger menu in the upper left corner and select “Home,” which leads us to the screen below.

CORS Settings

After the creation of the Storage Account, open the storage account and select “Settings”->”Resource Sharing (CORS)”

Storage Account Key

Please check under “Settings”->”Configuration” that “Allow storage account key access” is enabled and “Version 1.2” selected for the minimum Tls Version. As the last action go to “Security + networking” -> “Access keys” and click on show for “key1”. After that, you will see the “Copy” Icon for getting the key we need in our Next.js 14 project.

Creation of a new container

Open “Data storage” and select “Containers”. Top left “+ Container” define a name in the flyout on the right side and click “Create” on the bottom.

New Env Variables

We need three new env variables for this example.

New FileUploader Component

Under components/azure/storageaccounts I created a new component named “fileuploader.component.tsx”.

New NPM Packages

On the top, we have a donut chart built with “react-chartjs-2,” which shows us the “Used” and “Free Space.” Below that, we have the dropzone, which can also be used as a file selector. Below is the “upload” button and three different self-explanation buttons, followed by the uploaded file list.

New API Routes for the different actions

We need 4 new API routes for the delete, deleteall, list and sastoken logic. We build them under app/api/azure/storageaccount

deleteall/route.ts

filedelete/route.ts

list/route.ts

sastoken/route.ts

We have to generate a SAS token link for the direct upload to Azure; otherwise, uploading files with a file size higher than 4.5 MB will fail (Vercel Serverless function limit).

All needed routes were secured with next-auth and Azure AD B2C. Enjoy the widget, which works great and looks nice as well and adapt it according to your needs.

Cloudapp-dev, and before you leave us

Thank you for reading until the end. Before you go:

Please consider clapping and following the writer! 👏 on our Medium Account

Or follow us on twitter -> Cloudapp.dev