Upload progress event

[koder217]

Files are being uploaded successfully to S3 but I am unable to show any progress bar events in browser.

What must I do to get progress events ?

[LinusU]

This seems like a client side issue, have you tried looking at the xmlhttprequest progress event?

[koder217]

Yes, I've tried using blueImp's plugin and jQuery malsup plugin. Progress goes from 0 to 100 in fraction of second and it just stops there. Chrome shows the request status as pending and it just stays there. After the file is uploaded in s3, res.send() is executed, If there is no timeout anywhere in between. ( My upload speed sucks and there is no way it actually uploaded a 5 mb test file that fast )

My hypothesis is that the file stream is uploaded in one go very quickly from client to server since I am testing locally, so the upload 'progress' event is doing its job. on the server. server is buffering the entire file in memory and then streaming it to s3 as a separate stream which is happening slowly as expected. I don't think the same stream that is coming from client is piped all the way to s3.

Hope i am making sense.

I tried using "progress-stream" module and piping the request as you suggested in another thread, but it didn't do anything. Below is the code I am using

var upload = multer({
        storage: multerS3({
            s3: s3,
            bucket: Settings.S3FilesBucketName,
            metadata: function (req, file, cb) {
                cb(null, {fieldName: file.fieldname});
            },
            key: function (req, file, cb) {
                console.log("KEYYY",file.originalname);
                cb(null, "/multertesterr/"+Date.now().toString())
            }
        }),
        limits: {fileSize: 10 * 1024 * 1024}
    }).single('files');
app.post('/upload', function (req, res, next) {
        var p = progress();
        req.pipe(p);
        p.headers = req.headers;
        p.on('progress', function (status) {
            console.log(status);
        });
        upload(p, res, function (err) {
            res.send('Successfully uploaded files!')
        });
    });

[dsgriffin]

@koder217 did you ever manage to get multer and progress-stream working together? require retrieving progress on server also

[koder217]

Nope, no luck

[syberkitten]

Any chance re-opening this issue, or any progress on the progress event? (no pun intended)

[abhi12299]

Any solution to this yet? Facing the same issue

[xfishernet]

same issue

[vincentwinkel]

It's quite tricky. First, you need to manage correctly the XHR progress. You can arbitrary use N% of your progressbar for XHR and (100-N)% for S3. You need to send metadata during upload containing the file count (eg. using a X-header). Then you need to override _handleFile to call a callback after each file processed. Using socketIO you update the client about the progress.