Uploading A File With Formdata And Multer

I have successfully managed to upload a file to a Node server using the multer module by selecting the file using the input file dialog and then by submitting the form, but now I w

Solution 1:

multer uses multipart/form-data content-type requests for uploading files. Removing this bit from your doRequestSetHeaders function should fix your problem:

if(method === "POST" || method === "PUT"){
   r.setRequestHeader("Content-Type", "application/json");
}

You don't need to specify the content-type since FormData objects already use the right encoding type. From the docs:

The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data.

Here's a working example. It assumes there's a dropzone with the id drop-zone and an upload button with an id of upload-button:

var dropArea  = document.getElementById("drop-zone");
var uploadBtn = document.getElementById("upload-button");
var files     = [];

uploadBtn.disabled = true;
uploadBtn.addEventListener("click", onUploadClick, false);

dropArea.addEventListener("dragenter", prevent, false);
dropArea.addEventListener("dragover",  prevent, false);
dropArea.addEventListener("drop", onFilesDropped, false);   

//----------------------------------------------------functionprevent(e){

    e.stopPropagation();
    e.preventDefault();
}

//----------------------------------------------------functiononFilesDropped(e){

    prevent(e);

    files = e.dataTransfer.files;

    if (files.length){
        uploadBtn.disabled = false;
    }
}

//----------------------------------------------------functiononUploadClick(e){

    if (files.length){
        sendFile(files[0]);
    }
}

//----------------------------------------------------functionsendFile(file){

    var formData = newFormData();
    var xhr      = newXMLHttpRequest();

    formData.append("track", file, file.name);

    xhr.open("POST", "http://localhost:3000/tracks/upload", true);

    xhr.onreadystatechange = function () {  
        if (xhr.readyState === 4) {  
            if (xhr.status === 200) {  
                console.log(xhr.responseText);
            } else {  
                console.error(xhr.statusText);  
            }  
        }  
    };

    xhr.send(formData);
}

The server side code is a simple express app with the exact router code you provided.

Solution 2:

to post a FormData object accepted by multer the upload function should be like this:

functionuploadFile(fileToUpload, url) { 
    var formData = newFormData();
    //append file here 
    formData.append('file', fileToUpload, fileToUpload.name);
    //and append the other fields as an object here/* var user = {name: 'name from the form',
        email: 'email from the form' 
        etc...       
    }*/
    formData.append('user', user);

    // This function simply creates an XMLHttpRequest object// Opens the connection and sends form_datadoJSONRequest("POST", "/tracks/upload", null, formData, function(d) {
        console.log(d);
    })
}