fd.append("upload", file) yields,

------WebKitFormBoundaryJnjpATRkxe2Duwwu
Content-Disposition: form-data; name="userid"

8022171621665209152
------WebKitFormBoundaryJnjpATRkxe2Duwwu
Content-Disposition: form-data; name="upload"; filename="sample.csv"
Content-Type: text/csv


------WebKitFormBoundaryJnjpATRkxe2Duwwu--

fd.append("upload", evt.target.result) yields,

------WebKitFormBoundaryITfVxS7FbNWfk3Ty
Content-Disposition: form-data; name="userid"

8022171621665209152
------WebKitFormBoundaryITfVxS7FbNWfk3Ty
Content-Disposition: form-data; name="upload"

"Healthy1.jpg","1","3","1","5"
"Unhealthy1.jpg","0","2","1","2"
"Water1.jpg","2","2","1","3"
------WebKitFormBoundaryITfVxS7FbNWfk3Ty--

But I need this,

------WebKitFormBoundaryITfVxS7FbNWfk3Ty
Content-Disposition: form-data; name="userid"

8022171621665209152
------WebKitFormBoundaryITfVxS7FbNWfk3Ty
Content-Disposition: form-data; name="upload"; filename="sample.csv"
Content-Type: text/csv

"Healthy1.jpg","1","3","1","5"
"Unhealthy1.jpg","0","2","1","2"
"Water1.jpg","2","2","1","3"
------WebKitFormBoundaryITfVxS7FbNWfk3Ty--

Here is my code:

app.ports.uploadFile.subscribe(function(userid){
    var file = document.getElementById("csv").files[0];
    var fr = new FileReader();
    fr.readAsText(file, "UTF-8");
    fr.onload = function (evt) {
        console.log(evt.target.result);
        var fd = new FormData();
        fd.append("userid", userid)
        fd.append("upload", file) // <<<<< WHAT DO I PUT HERE?
        var xhr = new XMLHttpRequest()
        xhr.open('post', "http://localhost:8668/upload/ugimgset", true)
        xhr.setRequestHeader("Content-Type", "multipart/form-data")
        xhr.setRequestHeader("Authorization", "Bearer " + token() )
        xhr.send(fd)
    }
})

fd.append("upload", file) yields,

------WebKitFormBoundaryJnjpATRkxe2Duwwu
Content-Disposition: form-data; name="userid"

8022171621665209152
------WebKitFormBoundaryJnjpATRkxe2Duwwu
Content-Disposition: form-data; name="upload"; filename="sample.csv"
Content-Type: text/csv


------WebKitFormBoundaryJnjpATRkxe2Duwwu--

fd.append("upload", evt.target.result) yields,

------WebKitFormBoundaryITfVxS7FbNWfk3Ty
Content-Disposition: form-data; name="userid"

8022171621665209152
------WebKitFormBoundaryITfVxS7FbNWfk3Ty
Content-Disposition: form-data; name="upload"

"Healthy1.jpg","1","3","1","5"
"Unhealthy1.jpg","0","2","1","2"
"Water1.jpg","2","2","1","3"
------WebKitFormBoundaryITfVxS7FbNWfk3Ty--

But I need this,

------WebKitFormBoundaryITfVxS7FbNWfk3Ty
Content-Disposition: form-data; name="userid"

8022171621665209152
------WebKitFormBoundaryITfVxS7FbNWfk3Ty
Content-Disposition: form-data; name="upload"; filename="sample.csv"
Content-Type: text/csv

"Healthy1.jpg","1","3","1","5"
"Unhealthy1.jpg","0","2","1","2"
"Water1.jpg","2","2","1","3"
------WebKitFormBoundaryITfVxS7FbNWfk3Ty--

Here is my code:

app.ports.uploadFile.subscribe(function(userid){
    var file = document.getElementById("csv").files[0];
    var fr = new FileReader();
    fr.readAsText(file, "UTF-8");
    fr.onload = function (evt) {
        console.log(evt.target.result);
        var fd = new FormData();
        fd.append("userid", userid)
        fd.append("upload", file) // <<<<< WHAT DO I PUT HERE?
        var xhr = new XMLHttpRequest()
        xhr.open('post', "http://localhost:8668/upload/ugimgset", true)
        xhr.setRequestHeader("Content-Type", "multipart/form-data")
        xhr.setRequestHeader("Authorization", "Bearer " + token() )
        xhr.send(fd)
    }
})

• javascript
• xmlhttprequest
• multipartform-data
• filereader
• form-data

Share Improve this question Follow asked Apr 6, 2017 at 4:22 broinjcbroinjc 2,69944 gold badges3030 silver badges4646 bronze badges 11

• maybe stackoverflow./questions/21044798/… helps – Jaromanda X Commented Apr 6, 2017 at 4:28
• thanks, but i don't want to use jQuery. But that is helpful - maybe i need to select the whole form, not just the input! i will try this – broinjc Commented Apr 6, 2017 at 4:35
• What is purpose of using FileReader? javascript at Question appears to return expected result – guest271314 Commented Apr 6, 2017 at 5:06
• 1 Problem Exists Between Chair And Keyboard :p – Jaromanda X Commented Apr 6, 2017 at 5:28
• 1 @broinjc FileReader is not necessary. fd.append("upload", file) yields expected result described at OP – guest271314 Commented Apr 6, 2017 at 16:56

 |  Show 6 more ments

1 Answer 1

Sorted by: Reset to default 3

I found the sources of my errors

1. I only needed FormData() - it takes care of the file and hidden fields.
2. I was overwriting Content-Type. Form boundaries were lost when I did this:

`xhr.setRequestHeader("Content-Type", "multipart/form-data")

The corrected code is below (along with some context):

app.ports.uploadFile.subscribe(function(pathAndId){
    var [tasksrvPath, formId] = pathAndId
    try {
        var fd = new FormData(document.getElementById(formId));
        var r = new XMLHttpRequest()
        r.open("POST", tasksrvPath, true)
        r.setRequestHeader("Authorization", "Bearer " + token() )
        r.send(fd)
        r.onload = function() {
            app.ports.status.send(r.statusText)
        }
    } catch(e) {
        console.log(e.message);
    }
})