unite cms: S3 Fileupload via GraphQL API

unite cms allows you to define a s3 field that holds a reference to a file, stored in a s3 bucket. When using the administration interfacer you can select or drop a file and it will be uploaded directly to s3. In this tutorial I will show, how to do this using the unite cms API and simple vanilla JS.

Easy file and image upload in unite cms

How unite cms handles files

unite cms does not allow to upload files to the cms, instead you must upload them directly to s3. This dramatically improves performance, since the files does not need to go through unite cms at all and you can get the full performance of your s3 server.

However, as we don’t want to make your s3 credentials available to the public, unite cms can pre-sign upload urls on the server side. This way, the client /frontend will never see the actual s3 credentials, but a pre-signed upload url that allows to upload one specific file. This works like this:

  1. Client selects a file and sends it’s filename, filetype and the according unite cms field to the unite cms signing endpoint

2. If the filetype is allowed, the signing endpoint returns a pre-signed url with a generated signature that allows to upload exactly this file within the next 5 minutes.

3. The client can now upload the file directly to the s3 server using the pre-signed url

4. File information together with the signature can now be used as a GraphQL mutation input to create / update a file field on a unite cms content (or setting) type.

The final result