File Storage

File field components allow interaction with a file storage provider. Since <form.io> does not itself store files, a provider needs to be configured.

Custom Url

Custom Url Provider does not have any settings in the Project Settings. Instead, it is set in the Url field on the form component when it is added to a form.

In order to use a Custom Url Provider, you will need to set up a service that can upload and serve files. See https://github.com/danialfarid/ng-file-upload#server-side for setting up a compatible service.

The information posted to the server will be

{
  file: file
}

The server should save the contents of the file somewhere and return the following object.

{
  url: 'http://link.to/file',
  name: 'The_Name_Of_The_File.doc',
  size: 1000
}

You may return additional attributes if desired.

S3

The S3 Storage provider allows file storage and retrieval using any S3 compatible service but was specifically designed for Amazon Web Services S3.

If you haven’t already done so, go to Amazon Web Services and sign up for an account.

In order to use S3, you will need to configure an IAM user and an S3 bucket.

Create an IAM user

Go to Services->IAM and click on the Users tab.

Click the Create New Users button.

Enter a user name such as “UploadUser” and be sure that “Generate an access key for each user” is checked.

Click the Create button

Be sure to download the credentials and save the “Show User Security Credentials”. You are going to need the Access Key ID and Secret Access Key in the configuration.

Finally, go back to the Users Page for your new user and copy the User ARN. It should look like.

arn:aws:iam:XXXXXXX:user/UploadUser

Create an S3 bucket

NOTE: <form.io> supports the V2 AWS authentication. Certain AWS regions do not support V2 authentication. Here is a list of regions compatible with <form.io>.

  • US East (N. Virginia)
  • US West (N. California)
  • US West (Oregon)
  • Asia Pacific (Singapore)
  • Asia Pacific (Sydney)
  • Asia Pacific (Tokyo)
  • EU (Ireland)
  • South America (São Paulo)

Go to Services->S3

Click Create Bucket and enter a name and region for the bucket and create it.

Next, click on the bucket anad ensure the Properties tab is selected. Then open the Permissions fieldset.

Click Add bucket policy and add the following. Be sure to put the correct User ARN from earlier in the Principal property and change the bucket name in both Resource properties.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "UploadFile",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::XXXXXX:user/UploadUser"
            },
            "Action": [
                "s3:GetObject",
                "s3:PutObjectAcl",
                "s3:PutObject"
            ],
            "Resource": "arn:aws:s3:::formio-upload/*"
        },
        {
            "Sid": "crossdomainAccess",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::formio-upload/crossdomain.xml"
        }
    ]
}

Save this and then click Add CORS configuration and add the following.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

You may replace <AllowedOrigin>*</AllowedOrigin> with the domain names of the sites your app will be running on or leave it open.

Save the configuration and the bucket settings.

Your S3 bucket should now be properly configured.

Enter S3 Project Settings

On form.io go to your Project Settings page and Select File Storage and open S3. Enter the information for the IAM user and S3 bucket you just created.

Access Key Id

This is from the IAM user credentials.

Secret Access Key

This is from the IAM user credentials.

Bucket Name

The name of the bucket you created.

Bucket URL

This will automatically set for AWS. If you are using a different S3 compatible service, enter the Bucket URL here.

Starts With

All files uploaded to this bucket can be appended with this string to puth them in a folder.

Access Control List

Control the permissions around this file. Select either Public or Private.

Max Size

Optionally set the maximum upload file size.

Policy Expiration

Optionally set how long upload policies will last.

Enter all of this information and save the settings. Your project is now set up to use the S3 File Storage provider. To use it, select S3 on the Storage setting on the file component.

Dropbox

The Dropbox storage provider allows using the Dropbox service for storing files within your project.

To connect your project to Dropbox, go to Project Settings->File Storage->Dropbox. Click the Connect to Dropbox button. A window will open asking you to authorize Form.io to access your Dropbox account. After allowing it you should see “Your project is connected to a Dropbox account.” This indicates that your project has successfully connected.

Next add a File component to a form and select “Dropbox” as the storage provider. Save the form.

All files added to that file component should now be immediately added to the Dropbox folder. Files are limited to 150MB.