Multipart upload issue

[leemm]

Hi,

Bit of a long one so bear with me.

I have a simple form set up which performs a multipart... post to an end point. For some unknown reason when viewing req.payload the number of bytes written to disk for the upload is completely different (almost double) that of the original file. Meaning the file within tmp is appears corrupted.

Form:

<form method="post" action="http://localhost:8000/images/test" enctype="multipart/form-data">

    <label for="token">Token:</label>
    <input type="text" name="token" /><br/>

    <label for="title">Title:</label>
    <input type="text" name="title" /><br/>

    <label for="upload">File (Binary):</label>
    <input type="file" name="upload"/><br/>

    <input type="submit" value="Submit"/>
  </form>

Node:

var addTest = function(req){
console.log(req.payload);
};
{ method: 'POST', path: '/images/test', config: { handler: addTest } }

payload:

{ token: 'dbc52349e2b4a2c649ef5995a3a01c4c',
  title: 'Formidable Bug?',
  upload: 
   { domain: null,
     _events: null,
     _maxListeners: 10,
        _maxListeners: 10,
        path: '/var/folders/m8/csnqt26s5pg_rngmzdk44jhr0000gn/T/9774d1b7e108926d360f2dc471260899',
        fd: 18,
        writable: false,
        flags: 'w',
        encoding: 'binary',
        mode: 438,
        bytesWritten: 464869,
        busy: false,
        _queue: [],
        _open: [Function],
        drainable: true } } }

Original file:
donut.jpg, 226,616 bytes

I'm not sure if this is an issue or just the fact that my implementation is flawed. Or whether there's a bug in the version of Formidable installed alongside 0.16.

Dev environment is MacOSX Mountain Lion running 0.8.16.

Any advice would be appreciated.

Thanks.

[tillre]

Same problem here when doing a xhr with FormData, like:

On the client:

var file = $('input[type="file"]')[0].files[0];

var fd = new FormData();
fd.append('title', 'Some Image');
fd.append('image', file);

var req = new XMLHttpRequest();
req.open('POST', '/foo');
req.send(fd);

On the server:

server.route({
    path: '/foo',
    method: 'POST',
    handler: function(req) {
        req.reply(format('uploaded %s (%d Kb) to %s as %s',
                                   req.payload.image.name,
                                   req.payload.image.size / 1024,
                                   req.payload.image.path,
                                   req.payload.title));
    }
});

I got it working using express with no problems. But the file saved by Hapi is nearly twice as large as the original file (original: 105802 bytes, uploaded: 195680 bytes). When i upload a simple text file, it seems to be ok. When i open the image file in a texteditor, i can see that it has kinda the same content, but more bytes 'inbetween', than the original file. Some binary encoding issue maybe?

Im using master branch, Mac OS X 10.8.3, Chrome 26

EDIT: Got the same problem, when using a regular form and let the browser handle the submit.

[leemm]

Glad it's not just me. I spent a good few hours on this yesterday trying various tricks.

I'd prefer not to have to set up express just to handle multipart data tbh.

[cabrel]

You can set the payload type to 'stream' on the route and then handle the upload yourself

[hueniverse]

What version of node?

[leemm]

0.8.16 for me.

[tillre]

v0.10.4 here

[pandeysoni]

You can visit for working code in https://github.com/pandeysoni/Hapi-file-upload-download

/*
 * upload file
 */

exports.uploadFile = {
    payload: {
        maxBytes: 209715200,
        output: 'stream',
        parse: false
    },
    handler: function(requset, reply) {
        var form = new multiparty.Form();
        form.parse(requset.payload, function(err, fields, files) {
            if (err) return reply(err);
            else upload(files, reply);
        });
    }
};

/*
 * upload file function
 */

var upload = function(files, reply) {
    fs.readFile(files.file[0].path, function(err, data) {
        checkFileExist();
        fs.writeFile(Config.MixInsideFolder + files.file[0].originalFilename, data, function(err) {
            if (err) return reply(err);
            else return reply('File uploaded to: ' + Config.MixInsideFolder + files.file[0].originalFilename);

        });
    });
};

[terryx]

I can't get this working in hapi 16.1.0. Having error of

Cannot create property 'flowing' on string '[object Object]'

[mtharrison]

@terryx can't get what working? If it's the code posted by @pandeysoni, you should open the issue in their repo https://github.com/pandeysoni/Hapi-file-upload-download

[terryx]

I'm sorry, i did not use the example provided by @pandeysoni. Instead I tried to run this and got an error of Cannot create property 'flowing' on string '[object Object]'

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="photo">
  <button type="submit"></button>
<form>

server.route({
    method: 'POST',
    path: '/upload',
    handler: function(request, reply) {
       const { payload } = request;
         return reply(payload); //error
    },
    config: {
      payload: {
        maxBytes: 809715200,
        output: 'stream',
        parse: true
      }
    }
  });

[terryx]

I figured out this was caused by one of plugin installed
https://github.com/genediazjr/disinfect

I will open an issue there. Thanks !