Copied!

Complete How-To Guide To Set Up Form File Uploads With Azure

A No-Steps-Missed, Step-By-Step Guide To Configure Everything To Accept Form File Uploads In A Form.io Form With Azure.

Form File Uploads With Azure

Updated October 29, 2026

To accept form file uploads with Azure, create an Azure storage account and a container, set CORS on the storage account to allow GET, OPTIONS, and PUT, and copy the account’s connection string. Then paste the connection string and container name into your Form.io project under Settings, Integrations, File Storage, Azure Blob, and set each File component’s storage to Azure File Services. Every step is below, with a screenshot.

The concept of setting up form file uploads is simple, but it can feel cumbersome, especially if you’re not familiar with any of the big cloud storage providers.

This guide eliminates that burden, at least if you’re using Azure.

When I say No Steps Missed, that means every single step is included, with a screen shot, for everything you need to get it working—everything.

Including:

  • Creating An Azure Account
  • Setting Up An Azure Subscription
  • Creating An Azure Storage Account
  • Creating An Azure Storage Container
  • Creating a Form.io account if you are not using the enterprise embedded platform
  • Configuring Form.io
  • Setting Up A Form
  • Testing The Upload

That means this is long. Let’s get started.

A. Set Up A Brand New Azure Account

  1. Sign into portal.azure.com. If you don’t yet have an account, you will need to create one.

  2. If this is a brand new Azure account, it will look like the below screen shot when you sign in. You will need to set up a subscription. If you’re not sure which to choose, just choose the free trial:

    Welcome to Azure screen for an account with no subscription, with the Start button under Start with an Azure free trial

    If you already have an Azure account, go to section B.

  3. Click Start Free. Once the free trial is over, you will default to the Pay As You Go Plan and you will only pay if you exceed the free limits.

    Azure free account page with the Start Free button

    At the time of writing this:

    • Block Blob storage (ZRS HOT) is $0.023 per GB per month
    • Block Blob storage (ZRS COOL) is $0.013 per GB per month
    • The free trial lets you transfer 5GB with 20k read and 10k write operations within a 12 month period
  4. Complete the form to set up a subscription:

    Azure subscription sign-up form

    Azure will ask you to Verify Identification With Card, which is just a credit card requirement. You must provide a credit card to create an account—I believe this is the case for any of the big 3 cloud providers.

  5. As it is creating your subscription, you will see this. It is totally optional. You can just let the screen sit there while it creates:

    Azure screen shown while the new subscription is being created

  6. Once your subscription is created, you will be redirected to this page. Click Go to Azure portal.

    Azure confirmation page after the subscription is created, with the Go to Azure portal button

  7. If you want to educate yourself, you may go through the check list. Otherwise, click the X at the top right:

    Azure portal getting-started checklist with the close X at the top right

B. Create A Storage Account

  1. Click Storage Accounts:

    Azure portal home with Storage accounts highlighted

    In Azure, a Storage Account is different than a storage container. You can have multiple containers in a single account.

  2. Click Create (either one):

    Azure Storage accounts page with the Create buttons highlighted

  3. Since you already created a subscription, the Azure subscription 1 should already be prepopulated in the Subscription field. For the Resource Group field, click Create New:

    Create a storage account form with Azure subscription 1 selected and the Create new link under Resource group

  4. For the name, write a name that you will recognize, perhaps the name of your app or project, then click OK:

    New resource group name field with the OK button

  5. Similarly, write a name for the storage account. If you’re not sure about the rest of the settings, just leave them at their defaults, then click Review.

    Storage account name field on the Basics tab, with the Review button

  6. This next page is a bit confusing because all the options will be grayed out. That’s because Azure is validating the request:

    Storage account Review tab with options grayed out while Azure validates the request

  7. If the validation fails, click the link in the red bar (the name of the storage account is probably already taken):

    Failed validation message in a red bar on the Review tab

    If that’s the case, click the previous button, then click basics, and change the name:

    Previous button on the storage account Review tab

    Basics tab selected in the storage account creation steps

    Storage account name field being changed to a new name

    Once you have entered a new name, just click the review menu option:

    Review menu option in the storage account creation steps

  8. When the review completes and it is valid, the Create button at the bottom will be made available. Click it:

    Passed validation on the Review tab with the Create button enabled

  9. You will see the deployment in progress:

    Azure deployment in progress screen for the new storage account

  10. After a minute, click Go to resource:

    Deployment complete screen with the Go to resource button

  11. Whenever you log back into Azure, you will click Storage Accounts (see step 1), which will display the storage resource you just created:

    Storage accounts list showing the newly created storage account

  12. This is the main view of the storage resource:

    Overview page of the new Azure storage account

C. Configure A Blob Resource For File Uploads

Allow Public Access To Read Files On the Storage Account First

You will need to do this if you ever want the files that your users upload to be displayed “publicly.” For example, if it’s an image sharing service or you want them to be able to upload a profile pic and have others see it, you will need to configure this.

  1. On the left menu, click Configuration towards the bottom:

    Storage account left menu with Configuration highlighted

  2. Click Allow Blob Anonymous access, then click Save:

    Storage account Configuration page with Allow Blob anonymous access enabled and the Save button

Create A Container And Then Enable Anonymous Access to Stuff in the Container Itself

The reasons for enabling Anonymous Access are explained in the previous section. At minimum, you will need to create a container.

  1. On the left menu, click Containers:

    Storage account left menu with Containers highlighted

  2. Create a new container by clicking + Container:

    Containers page with the + Container button

  3. Provide a name for the container, then select the permissions option you want:

    New container panel with the name uploads and the anonymous access level options Private, Blob, and Container labeled A, B, and C

    1. Private, can’t view the image without also using code to programmatically pull a huge string that’s appended to the end of the image URL.
    2. Anyone can view the image as long as they have the link to it, which is not easy to remember. This is the most convenient option without allowing users to browse the folder itself (I am choosing this option for my example).
    3. You are literally letting anyone browse the entire folder (you probably don’t want this)
  4. Click Create:

    New container panel with the Create button

Configure CORS So Form.io Can Write To The Storage Container

  1. On the left menu, click Resource Sharing (CORS):

    Storage account left menu with Resource sharing (CORS) highlighted

  2. In the Allowed origins field, add an asterisk:

    CORS settings for Blob service with an asterisk in Allowed origins

    A second row will appear, disregard that.

  3. Click the Allowed methods field in the first row (the row with the asterisk) and check GET, Options, and PUT:

    Allowed methods dropdown in the CORS row with GET, OPTIONS, and PUT checked

  4. Finish the configuration with the details below:

    Completed CORS row with asterisks in Allowed headers and Exposed headers, max age 5, and the Save button

    1. Allowed headers: add an asterisk
    2. Exposed headers: add an asterisk
    3. Max age: 5
    4. Click Save

Obtain Your Connection String (For Use In Form.io)

  1. On the left menu, click Access Keys:

    Storage account left menu with Access keys highlighted

  2. Under Key1, and under Connection String, click the show button, then copy the string to memory:

    Access keys page with the Show button next to the key1 connection string

D. Configure Your Form.io Project For File Uploads

  1. Sign into your Form.io Developer Portal.

    Form.io Developer Portal Projects page with the Create Project button

    1. If you are not using our enterprise embedded platform in your own environment or you just want to try things out, you can create an account with a 30-day free trial at portal.form.io.
    2. Once logged in, go to Projects and click Create Project:
  2. If you already have a project created, open the project you are working on:

    Form.io Developer Portal project list with a project to open

  3. Click Settings on the left menu:

    Form.io project left menu with Settings highlighted

  4. Complete the following operations:

    1. Click Integrations, File Storage, and Azure Blob:
    2. Paste your Connection String From Azure into the Connection String Field
    3. Enter the case-sensitive name of the Container you created in Azure in the Container Name field
    4. Click Save
  5. Form.io project settings: Integrations, File Storage, and Azure Blob tab with Connection String and Container Name fields and the Save Settings button

    From this point forward, you can now configure any form with a file upload field to accept files using Azure Blob.

E. Create A Form With A File Upload Field And Test It

  1. On the left menu, click Forms:

    Form.io project left menu with Forms highlighted

  2. At the top right, click New Form:

    Form.io Forms page with the New Form button at the top right

  3. Select a form type:

    Form.io form type selection screen

  4. Complete the following operations:

    1. Enter a name for your form at the top
    2. Expand the Premium Components section
    3. Drag the File Component into the form field area
  5. Form.io form builder with a form name entered, Premium Components expanded, and the File component dragged onto the form

  6. Click the File tab, click the Storage field, then select Azure File Services:

    File component settings, File tab, with Azure File Services selected in the Storage dropdown

  7. For the File pattern, enter the file extension types you want to accept, including the preceding period, separated by commas. Example if you only want to accept certain images:

    File Pattern field with image file extensions entered, separated by commas

    Leave the asterisk if you want to accept any file type.

  8. Change the File Maximum Size to what you see fit or leave for now:

    File Maximum Size field in the File component settings

  9. Click Save to save the settings.

    Save button in the File component settings

  10. Click Create Form at the bottom right:

    Create Form button at the bottom right of the form builder

  11. Click Access at the top right:

    Access tab at the top right of the form

  12. For testing purposes, we’re going to use the Anonymous role. Select Anonymous under Create Own Submissions, then click Save Settings:

    Form Access settings with Anonymous selected under Create Own Submissions and the Save Settings button

    If your app requires a login and you have authentication set up, then you will configure this to use the Authenticated role.

    Example Scenario: If you want logged-in users to be able to upload a profile image for your app (and replace it, remove it, and see each others’ profile images) then you will need to use the following permissions:

    1. Create Own Submissions: Authenticated
    2. Read Own Submissions: Authenticated
    3. Read All Submissions: Authenticated (so any logged in user will have the ability to see other people’s profile images)
    4. Update Own Submissions: Authenticated
    5. Delete Own Submissions: Authenticated
  13. Click the Launch tab:

    Launch tab for the form

  14. At the top right, click Make Public (so you can test it):

    Make Public button at the top right of the Launch tab

  15. Click Go To Form:

    Go To Form button on the Launch tab

  16. Drag a file into the upload area and click Submit:

    Hosted form with a file dragged into the upload area and the Submit button

  17. You should see Submission Complete:

    Submission Complete message after the test upload

    You will also be able to see the file in the Azure Storage Browser:

    Azure Storage browser showing the uploaded file in the container

Now you can repeat this last section E as many times as you want for any form.

Before You Go Live: Where Files Live, Who Can Read Them, and CORS

The steps above get uploads working for a test. A few things are worth knowing before real users start uploading files:

  • Your files stay in your Azure account. Form.io does not store uploaded files. The browser sends each file straight to your storage provider using a temporary signed URL, and the submission keeps only the file’s metadata, such as its URL, name, and size.
  • Anonymous access is optional. Section C turns on anonymous read access so files like profile images can be shown to anyone with the link. Microsoft keeps anonymous access off by default and recommends disallowing it for optimal security, so if your files should not be public, leave the container set to Private. The File component also has a Private Download option that sends the download request with the user’s JWT token, so your own endpoint can check access before serving the file.
  • Narrow CORS for production. The asterisk in Allowed origins is fine for testing. Form.io’s File Storage docs configure CORS with the domain where your application is hosted plus the Form.io portal, and Azure accepts a list of specific origins in that field.
  • Form permissions control files too. Uploading needs Create permission on the form, and downloading needs Read permission on the submission that holds the file. That is why the Access settings in Section E matter.
  • Plan for orphaned uploads. Files upload as soon as they are selected, before the form is submitted. If someone picks a file and never submits, the file stays in your container, and Form.io does not clean it up for you. A storage lifecycle policy or a periodic check against submission records handles it.
  • Self-hosted versions. If you run Form.io in your own environment, the native Azure integration arrived in version 4.0.0. Earlier versions needed a MinIO gateway.

Azure’s storage prices and free-account terms have changed since this guide was written, so check the current Azure Blob Storage pricing before you pick a tier.

Sources: Form File Uploads, Form.io’s File Storage and Premium Components docs, and Microsoft’s Configure anonymous read access for containers and blobs and CORS support for Azure Storage. Keep reading: CORS Configurations for Embedded Form Infrastructure, Form.io Open Source Core Vs. Enterprise, and the Online Form Builder overview. Or tell us where your files need to live.

Published by

Form.io Wizard
Content Writer

Long time platform user. Runs multiple production applications with a Form.io backend. "Form.io cleans up all the dirty work and does it for you." Deploy forms like its auth or file storage, stop reinventing the wheel. Forms as the UI, the data model, and the API model. Middleware Mafia.

Published by

Form.io Wizard
Content Writer

Long time platform user. Runs multiple production applications with a Form.io backend. "Form.io cleans up all the dirty work and does it for you." Deploy forms like its auth or file storage, stop reinventing the wheel. Forms as the UI, the data model, and the API model. Middleware Mafia.

LighthouseHQ Case Study: Digital Transformation
Get Answers

Need More Answers?

Ask and we'll get back with you in 1 business day.

Contact Us

Send us a message to contact support or ask a question.

Schedule a meeting

Open Source Platform

Read our FAQ to find out what exactly is Open Source

View the Platform Documentation

View the API Documentation

View the Open Source Code

Learn More

Learn How It Works

Read the Release Notes

Discover Industries that use Form.io

Read our Blog