Home / jQuery / Direct upload to Amazon S3 using EvaporateJS and PHP

Direct upload to Amazon S3 using EvaporateJS and PHP

Direct upload to Amazon S3 tutorial is rarely available on internet with a clear cut explanation. Although you find a few unsatisfying articles they don’t have a demonstration in jQuery and PHP. So I thought of writing a tutorial on this topic. I have implemented this upload in Laravel framework and it works seamlessly. Now lets see how to integrate this with jQuery.

Important: Assuming that you have created an S3 bucket and obtained AWS_KEY and AWS_SECRET_KEY let us proceed. If not get your keys

First grab a copy of EvaporateJS and extract the evaporate.js file anywhere into your project folder.

Before you start coding setup the security! You don’t want your bucket to be available for the public to upload junk, do you? There are three important changes you should do,

1. Restrict the public to only read files from the bucket

List permissions

2. By default the uploaded files are private, so make it available to the public. To do this click on the Add bucket policy in permissions tab and save it with the following config

3. Configure CORS to a specific domain. By default your bucket is open to the world and you may not worry about this while developing your app but when you move to production make sure to change <AllowedOrigin> to your domain from *

To achieve this click on the Add CORS configuration and save it with the following code

Now things are in place to accept uploads but we are yet to set up the code. Lets start with the User Interface, lets keep it simple as our objective is just the File Upload

Markup

I have styled my project files which is not shown in the tutorial.

If you want to add more than one file, simply add multiple attribute the input element

Now create an Instance of EvaporateJS with four mandatory parameters,

1. signerUrl – To generate a Signature that will be accepted by S3
2. aws_key – Your AWS_KEY
3. bucket – Your bucket name
4. aws_url – Endpoint URL

We want the upload to happen as soon as the user selects a file. To achieve this we need to bind a change event with jQuery. You can also do this with pure javascript.

Now validate the file for maximum file size. In this project I’ve set 512KB limit for each file.

If file size is greater than 512KB stop code execution else iterate through each element and upload them using the EvaporateJS instance. So all put together looks like this

signature.php

EvaporateJS supports progress and complete methods in order to identify upload complete of each file as well as the entire upload. Check the browser console to find the uploaded data in percentage.

That’s it! Feel free to ask questions in the comments section…

Download   Preview

About Ashik

I am a Full Stack Developer and love to work on APIs and Apps. Hardcore lover of Ionic and Laravel <3

Check Also

Weather forecast API using jQuery, Ajax and PHP

Weather forecast API is widely used as widgets in small blogs to huge news website …

  • Ilya E

    Hi, I recieved this error:
    evaporate.js:1214 Uncaught TypeError: Cannot set property ‘foo’ of undefined
    Can you tell me why?

    • Ilya E

      If I comment the signParams block, I get this error.

      SignatureDoesNotMatch
      The request signature we calculated does not match the signature you provided. Check your key and signing method.

      AKIAI5CRWDE4R2ND3QCQ
      POST
      x-amz-acl:public-read
      x-amz-date:Tue, 29 Mar 2016 15:10:15 GMT
      /uploadedmedia/test_205551491.png?uploads

      TiI61TJUVJzo6XLuW/+ngkdlTew=
      CDB12DF036143DFD
      QXJYTc1bj4mvsyJ/kaMhh5RNXkz7kg2D5XlE56eTzWOARah8J7cOAnJDJjqn0OIruJBL0dtQTYM=

      • If you see the documentation of evaporateJS it mentioned not to remove the signParams for specific reasons. Hence do not remove it.

        • Ilya E

          OK, but then what do I do about the initial error?
          evaporate.js:1214 Uncaught TypeError: Cannot set property ‘foo’ of undefined

          • You got this fixed? Are you testing this project without modifying the downloaded code?

Do you wan't to get notified?

I will not spam your inbox. I will only send email whenever I publish a new article or to share information about technology

You have Successfully Subscribed!