CODEWITHSUNDEEP
node.jsfile-upload
rskuja
rskuja

Reputation: 571

Valums file-uploader on nodejs - multiple file upload

I'm using valums ajax file-uploader

My nodejs server side looks like this:

fileStream = fs.createWriteStream(__dirname+'/../public/images/houses/'+rndname);
req.pipe(fileStream);
req.on('end', function() {
  body = '{"success":"true", "name": "'+rndname+'"}';
  res.writeHead(200, 
    { 'Content-Type':'text/plain'
    , 'Content-Length':body.length
    });
  res.end(body);
});

client side:

        function createUploader(){            
        var uploader = new qq.FileUploader({
            element: document.getElementById('homepic'),
            action: '/server/upload',
            allowedExtensions: ['jpg', 'png', 'gif'],
            multiple:true,
            onComplete: function(id, fileName, responseJSON){
              $("#homepic").append("<img src='/images/houses/"+responseJSON.name+"' class='mediumpic' />  ");
            }
        });           
    }
window.onload = createUploader;

This all works for single file upload just great!

So imagine - i press on upload button, chose pic, it uploads really fast, shows up in screen. Now i want to upload another one. I choose pic, it uploads on server fast (i see it on server), i get back the response of new filename and success, i put the picture on screen with my append. But the picture does not show up. I try open in new tab just the pic and still nothing even though i see it on the server standing in the right dir. After like 3-5 min of waiting it just shows up, without even page refresh needed. Whats causing this behavior? Is it the piping and i need to call Mario to fix it or something else? :)

Upvotes: 4

Views: 2348

Answers (2)

Andrew Newdigate
Andrew Newdigate

Reputation: 6205

I've created an Express 3.x middleware component that allows you to access valums/fineuploader uploaded files through the req.files collection.

All you need to do is add the middleware during your Express configuration, like so:

var fineuploaderExpressMiddleware = require('fineuploader-express-middleware');

app.use(express.cookieParser());
app.use(express.bodyParser());
app.use(fineuploaderExpressMiddleware({ uploadDir: '/tmp ' }));

The component is available here: https://github.com/suprememoocow/fineuploader-express-middleware

Upvotes: 1

rskuja
rskuja

Reputation: 571

Changed my req.pipe to req.on('data') and it started to work. Somehow it seems like my req.pipe didnt close connection and was "expecting" for more data to come even though all file was uploaded. That is why i could not call GET to file and it was in "pending" status. This fixed my problems: 

req.on('data', function(data) { 
      ws.write(data); 
    }); 
    req.on('end', function(data) { 
      var body = '{"success":"true", "name": "'+rndname+'"}';
      res.writeHead(200, 
        { 'Content-Type':'text/plain'
        , 'Content-Length':body.length
        });
      res.end(body);
    });

Even though i found solution to my problem if anyone knows why req.pipe didnt close connection and was stuck hanging for like 2-3mins till the pic appeared, let me know.

Upvotes: 4

Related Questions