Issue with ajax file upload (Node.js, express, jQuery)

Question

I am struggling to get a file upload script working. I am using a node/express backend with jQuery firing off the ajax request.

Markup:

<input id="audio" type="file" name="audio">

Front end JS:

var formData = new FormData();
formData.append("audio", e.data.audio, 'testname');

$.ajax({
    url: 'api/upload',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

using a custom written module that executes the following and places it into e.data.audio

if(has('fileReader')){
    return this.$input[0].files[0] || '';
}

When i select as small audio file to upload and submit, e.data.audio has the following value at the point it is set into the ajax function argument object:

Lack of SO streetcred means I need to put images on imgur https://i.sstatic.net/dAjfb.png

After the request is sent I am using the files property of the request object (req.files) to get access to the file, in order to save it.

exports.upload = function(){
    return function(req, res){
        console.log(req.files);
        if (req.files && req.files.audio){
            var file = req.files.audio;
            fs.readFile(file.path, function(err, data){
                if (err){
                    res.send(err);
                }
                var newPath = __dirname + 'public/audio';
                fs.writeFile(newPath, data, function(err){
                    if (err){
                        res.send(err);
                    }else{
                        res.send(true);
                    }
                });

            })
        }else{

        }
    }
};

However the issue is that the path always seems to be the clients local path.

Lack of SO streetcred means I need to put images on imgur https://i.sstatic.net/fMvZn.png

Ive done a fair amount of googling and cant seem to find anything along the same lines. I am obviously just missing something basic and need someone to point me in the correct direction.

mscdex · Accepted Answer · 2014-10-06 16:51:09Z

1

file.path is the path to the temporary file that was created on the server that holds the uploaded file data, it's not the path of the file from the uploader's system.

On an unrelated note, __dirname does not include a trailing slash so you'll probably want this:

var newPath = __dirname + '/public/audio';

instead of:

var newPath = __dirname + 'public/audio';

Also you probably should use fs.rename to move the file instead of reading the whole file into memory and then writing it back out again. Example:

var file = req.files.audio;

fs.rename(file.path, __dirname + '/public/audio', function(err) {
  res.send(err ? err : true);
});

answered Oct 6, 2014 at 16:51

mscdex

107k15 gold badges201 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tarqu1n Over a year ago

The issue was with the path not having a trailing slash rather than anything to do with the temp file on the server. Thanks very much for your help!

Dipak Over a year ago

req.files is always undefined, any suggestion on that?

Collectives™ on Stack Overflow

Issue with ajax file upload (Node.js, express, jQuery)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related