I need to send file (up to few MB) generated by JavaScript to server. I need to do it with POST (not ajax POST).

How can I add file to input type="file" by JavaScript? According to Pre-Populate HTML form file input it seems that it is not possible due to security reasons. But I create the file in browser, this should not be the security issue.

I can probably paste the file as text to other type of input. But I do not feel that it is correct.

What is solution here? Is there way how to put file from browser to file input? Or is it ok to do it with other input? Is there a way how to pack the file to POST without input element?

The could what I would like to use:

$("#button").click(function(e) {
    $('#file').val(export_pdf());
    $('#form').submit();
});

I need to send file (up to few MB) generated by JavaScript to server. I need to do it with POST (not ajax POST).

How can I add file to input type="file" by JavaScript? According to Pre-Populate HTML form file input it seems that it is not possible due to security reasons. But I create the file in browser, this should not be the security issue.

I can probably paste the file as text to other type of input. But I do not feel that it is correct.

What is solution here? Is there way how to put file from browser to file input? Or is it ok to do it with other input? Is there a way how to pack the file to POST without input element?

The could what I would like to use:

$("#button").click(function(e) {
    $('#file').val(export_pdf());
    $('#form').submit();
});

• javascript
• html
• http

Share Improve this question Follow edited May 23, 2017 at 10:27 CommunityBot 111 silver badge asked Oct 4, 2016 at 14:03 matouscmatousc 3,9971111 gold badges4545 silver badges6767 bronze badges 7

• 2 Possible duplicate of Pre-Populate HTML form file input – Liam Commented Oct 4, 2016 at 14:04
• 2 That question answers your queustion. It isn't possible. Asking the same question again does not alter this fact – Liam Commented Oct 4, 2016 at 14:04
• 1 Please show how you create the file – Alex K. Commented Oct 4, 2016 at 14:04
• 1 @Liam Sorry, I thought it is pretty obvious that the other question is about file taken from puter by browser. But I talk about the file created in browser, it does not touch the puter file storage at all, thus it is different issue. – matousc Commented Oct 4, 2016 at 14:09
• 1 @Liam Having the script send binary data that it has generated by its own is very different from having the script send a file from the user's filesystem. – JJJ Commented Oct 4, 2016 at 14:13

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 3

It isn't possible to create a file and attach it to an HTML form input but using the FormData object you could send a generated file to the server as part of a post request.

Pulled from the MDN:

var formData = new FormData();

// JavaScript file-like object
var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

var request = new XMLHttpRequest();
request.open("POST", "http://foo./submitform.php");
request.send(formData);

Which should get you the same result of a file generated by JS sent to the server.