the goal to:
- be able upload file browser
- be able stream upload directly s3
- relay upload progress browser
it took me while figure out (and didn't quite find answer 3 on stackoverflow yet) posting answer in case else has same problem.
i'm open suggestions better solutions (the speeds on mine pretty horrible).
on frontend html
<input type="file" class="file" name="files[]">
on frontend js
require('blueimp-file-upload'); var socket = require('socket.io-client'); var filesize; var socketid; // socket used transmit percent uploaded server socket.connect() // when socket gives unique id save // can identify client .on('id', function (data) { socketid = data; }) .on('uploadprogress', function (data){ // can show progress bar percentage var pct = data.loaded / filesize; }); $('.file') .change(function (){ // save file size can calculate perfectage filesize = this.files[0].size; }) .fileupload({ datatype: 'json', }) .fileupload('option', { url: '/upload?socketid=' + socketid });
on server
var busboy = require('busboy'); var aws = require('aws-sdk'); var socket = require('socket.io'); var express = require('express'); var http = require('http'); // set express var app = express(); var server = http .server(app) .listen(80); var io = socket(server); // keeps track of open sockets var sockets = {}; io.on('connection', function (socket) { var uniqueid = _.random(0, 100000000); app.socket[uniqueid] = socket; socket.emit('id', uniqueid); }); // set upload route app.post('/upload', function (req, res) { aws.config.update({ appkey: '', jskey: '', }); var s3 = new aws.s3(); var busboy = new busboy({ headers: req.headers }); busboy.on('file', function(fieldname, file, filename) { s3.upload({ bucket: 'bucketname', key: new date().gettime() + filename, body: file //stream }, function(err, file){ res.json({ success: true }); }).on('httpuploadprogress', function(evt) { //emit progress sockets[req.query.socketid].emit('uploadprogress', evt); }); }); req.pipe(busboy); });
Comments
Post a Comment