S3 file upload component

[aptkingston]

Description

This PR adds a component for uploading files to a S3 datsource. This new component is a familiar dropzone component which needs to be placed inside a form. Unlike normal dropzones, a button action is used to actually process the file upload.

In order to upload files to S3, you must have a S3 datasource configured with a valid access key and secret key that allows writing to whatever bucket you plan to upload files to.

S3 upload component

The new S3 upload component is a form component, and lives in the form category. The reason it is a form component rather than a standalone component is because it brings a few benefits which would otherwise not be possible:

• We get validation for free
• We can disable the field
• We can observe the value of the component using the form value

The new component looks identical to the existing dropzone:

It takes the same settings as the normal dropzone, but has a few extra ones for configuring where to upload the file. The additional settings are:

• Which S3 datasource to upload to
• Which bucket to upload to
• What the uploaded file name should be (this could be bound to another form field to make it dynamic, or indeed generated with JS and inserting a timestamp for example)
  

Uploading files

When you choose a file in the new component, it is displayed exactly the same as the normal dropzone component. Unlike the normal dropzone component, we do not read the full file into memory here or automatically upload it anywhere. We do still read image files into memory in order to generate a data URL to use as a preview.

Images files will show a preview:

And non image files will not show a preview:

To send the upload, a new button action named "Upload File to S3" has been added. This takes one setting - what component you would like to upload:

One nice thing about file upload components - they are global (on the screen). You do not need to nest the button anywhere in particular in order to be able to reference a certain file upload component. Any button can upload any file.

As large files may be uploaded, the component displays a loading indicator and disables the component until the file is uploaded:

Success or failure notifications will also be provided so you know whether or not the upload was successful:

Upload result

The URL of the file in S3 is included in the button outputs, so can be used in further button actions:

Whether or not this file is publicly accessible is determined by the permissions on the bucket itself, and is up to the owner of the S3 bucket to determine.

Custom endpoints

S3 datasources with custom endpoints are not supported. This is mainly due to the non-compliance with presigned URL domain names. Real S3 uses bucket.domain as the FQDN, and using a custom endpoint when generating a presigned URL spits out a value of something like bucket.10.0.0.1 for example, if using a local IP address. Due to this behaviour we just have to put a limitiation on this functionality that it will only work with real S3 and not MinIO.

Datasources with custom endpoints are filtered out of the list when selecting a datasource to use with the S3 upload component, which should help prevent confusion. There is also helper text displayed in the builder for this component which also states this. Finally the server will also explicitly state this if it does receive a request using a custom endpoint.

[codecov-commenter]

Codecov Report

Merging #4030 (157b6a1) into develop (5ede1e2) will not change coverage.
The diff coverage is 100.00%.

@@           Coverage Diff            @@
##           develop    #4030   +/-   ##
========================================
  Coverage    68.91%   68.91%           
========================================
  Files          139      139           
  Lines         4633     4633           
  Branches       685      685           
========================================
  Hits          3193     3193           
  Misses        1018     1018           
  Partials       422      422           

Impacted Files	Coverage Δ
packages/server/src/api/routes/static.js	100.00% <ø> (ø)
packages/server/src/utilities/index.js	71.05% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5e285f2...157b6a1. Read the comment docs.