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:
That means this is long. Let's get started.
Sign into portal.azure.com. If you don’t yet have an account, you will need to create one.
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.
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:
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.
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:
Once your subscription is created, you will be redirected to this page. Click Go to Azure portal.
If you want to educate yourself, you may go through the check list. Otherwise, click the X at the top right:
Click Storage Accounts:
In Azure, a Storage Account is different than a storage container. You can have multiple containers in a single account.
Click Create (either one):
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:
For the name, write a name that you will recognize, perhaps the name of your app or project, then click OK:
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.
This next page is a bit confusing because all the options will be grayed out. That's because Azure is validating the request:
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:
When the review completes and it is valid, the Create button at the bottom will be made available. Click it:
You will see the deployment in progress:
After a minute, click Go to resource:
Whenever you log back into Azure, you will click Storage Accounts (see step 1), which will display the storage resource you just created:
This is the main view of the storage resource:
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.
On the left menu, click Configuration towards the bottom:
Click Allow Blob Anonymous access, then click Save:
The reasons for enabling Anonymous Access are explained in the previous section. At minimum, you will need to create a container.
On the left menu, click Containers:
Create a new container by clicking + Container:
Provide a name for the container, then select the permissions option you want:
Click Create:
On the left menu, click Resource Sharing (CORS):
In the Allowed origins field, add an asterisk:
A second row will appear, disregard that.
Click the Allowed methods field in the first row (the row with the asterisk) and check GET, Options, and PUT:
Finish the configuration with the details below:
On the left menu, click Access Keys:
Under Key1, and under Connection String, click the show button, then copy the string to memory:
Sign into your Form.io Developer Portal.
If you already have a project created, open the project you are working on:
Click Settings on the left menu:
Complete the following operations:
From this point forward, you can now configure any form with a file upload field to accept files using Azure Blob.
On the left menu, click Forms:
At the top right, click New Form:
Select a form type:
Complete the following operations:
Click the File tab, click the Storage field, then select Azure File Services:
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.
Change the File Maximum Size to what you see fit or leave for now:
Click Save to save the settings.
Click Create Form at the bottom right:
Click Access at the top right:
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:
Click the Launch tab:
At the top right, click Make Public (so you can test it):
Click Go To Form:
Drag a file into the upload area and click Submit:
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.
We use cookies to improve user experience and analyze website traffic. For these reasons, we may share your site usage data with our analytics partners. By clicking “I Accept,” you consent to store on your device.