Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Express JS + Amazon S3 + DropzoneJS Code Snippet
// Requires https://www.npmjs.org/package/s3-policy and https://www.npmjs.org/package/node-uuid
var config = require('env/' + process.env.NODE_ENV),
policy = require('s3-policy'),
uuid = require('node-uuid');
// SETUP S3
const AWS_ACCESS_KEY = config.s3.accessKey;
const AWS_SECRET_KEY = config.s3.secret;
const S3_BUCKET = config.s3.bucket;
// PRIVATE METHODS
function _getExtension(filename) {
var i = filename.lastIndexOf('.');
return (i < 0) ? '' : filename.substr(i);
}
// PUBLIC METHODS
exports.signS3 = function signS3(req, res) {
var fileExtension = _getExtension(req.body.name),
filename = uuid.v4() + fileExtension,
acl = 'public-read',
p = policy({
acl: acl,
secret: AWS_SECRET_KEY,
length: 5000000, // in bytes?
bucket: S3_BUCKET,
key: filename,
expires: new Date(Date.now() + 60000),
}),
result = {
'AWSAccessKeyId': AWS_ACCESS_KEY,
'key': filename,
'policy': p.policy,
'signature': p.signature
};
res.write(JSON.stringify(result));
res.end();
};
var app = {};
app.signS3RequestURL = '/admin/S3/sign';
app.S3_BUCKET = 'http://your-bucket-name.s3.amazonaws.com/';
app._dropzoneAcceptCallback = function _dropzoneAcceptCallback(file, done) {
file.postData = [];
$.ajax({
url: app.signS3RequestURL,
data: {
name: file.name,
type: file.type,
size: file.size,
_csrf: $('#__createPostToken').val() // this is not needed to make Dropzone work, it's express related
},
type: 'POST',
success: function jQAjaxSuccess(response) {
response = JSON.parse(response);
file.custom_status = 'ready';
file.postData = response;
file.s3 = response.key;
$(file.previewTemplate).addClass('uploading');
done();
},
error: function(response) {
file.custom_status = 'rejected';
if (response.responseText) {
response = JSON.parse(response.responseText);
}
if (response.message) {
done(response.message);
return;
}
done('error preparing the upload');
}
});
};
app._dropzoneSendingCallback = function(file, xhr, formData) {
$.each(file.postData, function(k, v) {
formData.append(k, v);
});
formData.append('Content-type', '');
formData.append('Content-length', '');
formData.append('acl', 'public-read');
};
app._dropzoneCompleteCallback = function(file) {
var inputHidden = '<input type="hidden" name="attachments[]" value="';
var json = {
url: app.S3_BUCKET + file.postData.key,
originalFilename: file.name
};
console.log(json, JSON.stringify(json), JSON.stringify(json).replace('"', '\"'));
inputHidden += window.btoa(JSON.stringify(json)) + '" />';
$('form#createPost').append(inputHidden);
}
app.setupDropzone = function setupDropzone() {
if ($('div#dropzone').length === 0) {
return;
}
Dropzone.autoDiscover = false;
app.dropzone = new Dropzone("div#dropzone", {
url: app.S3_BUCKET,
method: "post",
autoProcessQueue: true,
clickable: true,
maxfiles: 5,
parallelUploads: 3,
maxFilesize: 10, // in mb
maxThumbnailFilesize: 8, // 3MB
thumbnailWidth: 150,
thumbnailHeight: 150,
acceptedMimeTypes: "image/bmp,image/gif,image/jpg,image/jpeg,image/png",
accept: app._dropzoneAcceptCallback,
sending: app._dropzoneSendingCallback,
complete: app._dropzoneCompleteCallback
});
};
app.startup = function startup() {
app.setupDropzone();
}
$(document).ready(app.startup);
@cbrammer

This comment has been minimized.

Show comment
Hide comment
@cbrammer

cbrammer Sep 22, 2014

+1 Thanks for this, worked like a charm

+1 Thanks for this, worked like a charm

@joeabill

This comment has been minimized.

Show comment
Hide comment
@joeabill

joeabill Nov 10, 2014

Thank you sir, worked for me!

Thank you sir, worked for me!

@francolaiuppa

This comment has been minimized.

Show comment
Hide comment
@francolaiuppa

francolaiuppa Dec 19, 2014

Thank you guys! I never saw these notifications.
In case anyone stumbles upon this, I wrote a more detailed explanation here

Owner

francolaiuppa commented Dec 19, 2014

Thank you guys! I never saw these notifications.
In case anyone stumbles upon this, I wrote a more detailed explanation here

@phoet

This comment has been minimized.

Show comment
Hide comment
@phoet

phoet Apr 27, 2015

what exactly is the file.custom_status used for?

phoet commented Apr 27, 2015

what exactly is the file.custom_status used for?

@shaharsol

This comment has been minimized.

Show comment
Hide comment
@shaharsol

shaharsol Jun 3, 2015

Wow this was SO useful!

Wow this was SO useful!

@cyurtbil

This comment has been minimized.

Show comment
Hide comment
@cyurtbil

cyurtbil Jun 25, 2017

best example I've ever seen

best example I've ever seen

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment