unite cms: S3 Fileupload via GraphQL API

Franz Wilding
Dec 7, 2018 · 2 min read

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.

Image for post
Image for post
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.

Image for post
Image for post

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

Image for post
Image for post

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

unite cms

Incredible flexible headless CMS built on top of Symfony…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store