S3 file upload with Symphony CMS and Dropzone JS

S3 file upload with Symphony CMS and Dropzone JS

What is an S3 bucket?

A bucket is a logical unit of storage in AWS (Amazon Web Services) object storage service.

S3 (Simple Storage Solution) buckets are used to store objects, which consist of data and metadata that describes the data.

Using S3 with Symphony CMS

We can use S3 to store files which are uploaded from Symphony CMS using the S3 Image Upload extension . This is particularly useful when working on web applications which handle high volumes of files or particularly large files.

Once the extension is installed, you'll see that an event called "Generate S3 Signature" has been created. This event authenticates with S3 in order for the file upload to happen. Create a page called "Ajax" and add the new event to that page.

After that you should go to the Preferences section to configure the S3 Upload extension. Add your S3 bucket Access ID and Secret access id and save it.

Creating the section

Create a section and add an s3 file upload field to it. Here we have created a “Content” section with an S3 file upload field and label for file name.

Configure the field with the bucket name, region, and access control. Enter a file prefix to determin the end location of uploaded files. Here is a screenshot of our field settings.

Now you should be able to add files from Content section to the S3 bucket.

By this point you are able to add files to S3 using the Symphony publish pages.

Uploading files to S3 from the front end

  • Create a front end page for the upload form. In this example it is called "Uploads".
  • Create an event for your content section. In this example it is called "Create content".

Add this form to your page and also link form-submit.js to your template and update your bucket URL in form-submit.js

Ensure that your field’s names are the same as your section field’s names.

This is how the form looks in the browser.

That should be it. All you need to do now is test the form.

After the progress bar shows complete, the file has uploaded to S3. You then need save your entry by submitting the form to save the data into Symphony CMS database. This could be done via AJAX, or clicking the submit button.

Topics: Developer resources, Symphony CMS

© Copyright 2018 Eyes-Down Limited