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 setup a subscription. If you’re not sure which to choose, just choose the 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.

   

   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 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:

   

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

   

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

   

B. Create A Storage Account

1. Click Storage Accounts:

   

   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):

   

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:

   

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

   

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.

   

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

   

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

   

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

   

   

   

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

   

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

   

9. You will see the deployment in progress:

   

10. After a minute, click Go to resource:

    

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

    

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

    

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:

   

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

   

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:

   

2. Create a new container by clicking + Container:

   

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

   

   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 without 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:

   

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

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

   

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

   

   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:

   

4. Finish the configuration with the details below:

   

   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:

   

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

   

D. Configure Your Form.io Project For File Uploads

1. Sign into your Form.io Developer Portal.

   

   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:

   

3. Click Settings on the left menu:

   

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. 

   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:

   

2. At the top right, click New Form:

   

3. Select a form type:

   

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. 

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

   

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:

   

   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:

   

9. Click Save to save the settings.

   

10. Click Create Form at the bottom right:

    

11. Click Access at the top right:

    

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

    

    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:

    

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

    

15. Click Go To Form:

    

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

    

17. You should see Submission Complete:

    

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

    

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