How to implement dropzone.js to upload file into Amazon s3 server?

Question

Please help to implement the dropzone.js to upload the file into Amazon s3 server. Already referred the following link https://github.com/enyo/dropzone/issues/33, but, no idea to implement. kindly help to implement the same. Any dropzone configuration code is required.

Answer 1

For someone who might also jumped into this question, I'd like to share my working scenario (serverlessly with AWS Lambda).

Note: A full example can be found in my Vue S3 Dropzone component, the code related to Dropzone and S3 are actually framework agnostic.

So, basically,

1. The client (browser) calls an AWS Lambda function to get the pre-signed upload URL for each file being added.
2. When the pre-signed URL returned in response, the client will trigger dropzone.processFile immediately.
3. When the file being processing, change dropzone.options.url for the file accordingly.

Hints:

• As I'm signing a PUT upload-able URL, I'm going to hijack the xhr.send function, otherwise Dropzone will always send file within formData, which is bad for a PUT upload.

The final client code

// In the `accept` function we request a signed upload URL when a file being accepted
accept (file, done) {
  lambda.getSignedURL(file)
    .then((url) => {
      file.uploadURL = url
      done()
      // And process each file immediately
      setTimeout(() => dropzone.processFile(file))
    })
    .catch((err) => {
      done('Failed to get an S3 signed upload URL', err)
    })
}

// Set signed upload URL for each file being processing
dropzone.on('processing', (file) => {
  dropzone.options.url = file.uploadURL
})

The final AWS Lambda code

var AWS = require('aws-sdk')
var s3 = new AWS.S3();
// Make sure you set this env variable correctly
var bucketName = process.env.AWS_BUCKET_NAME

exports.handler = (event, context) => {
    if (!event.hasOwnProperty('contentType')) {
        context.fail({ err: 'Missing contentType' })
    }

    if (!event.hasOwnProperty('filePath')) {
        context.fail({ err: 'Missing filePath' })
    }

    var params = {
        Bucket: bucketName,
        Key: event.filePath,
        Expires: 3600,
        ContentType: event.contentType
    }

    s3.getSignedUrl('putObject', params, (err, url) => {
        if (err) {
            context.fail({ err })
        } else {
            context.succeed({ url })
        }
    })
}

Demo