Attach file to input type="file" with javascript

Question

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();
});

That question answers your queustion. It isn't possible. Asking the same question again does not alter this fact — Liam
– Liam, Commented Oct 4, 2016 at 14:04
@Liam Sorry, I thought it is pretty obvious that the other question is about file taken from computer by browser. But I talk about the file created in browser, it does not touch the computer file storage at all, thus it is different issue. — matousc
– matousc, Commented Oct 4, 2016 at 14:09
@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
– JJJ, Commented Oct 4, 2016 at 14:13

Justin MacArthur · Accepted Answer · 2016-10-04 14:08:30Z

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.com/submitform.php");
request.send(formData);

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

answered Oct 4, 2016 at 14:08

Justin MacArthur

4,05024 silver badges27 bronze badges

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

4 Comments

matousc Over a year ago

Ok, but If I send the file like this, it does not redirect the user to the provided address, it just send the file there.

Justin MacArthur Over a year ago

You can then use a window.location.href = "url" to redirect the user, the only other option I can think of would be to attach the file contents to a hidden element's value but I've never used a method like that so I can't verify how well it would work.

matousc Over a year ago

But the solution with window.location cause another request. What I need to achieve should be pretty simple operation. Two requests are not nice.

Justin MacArthur Over a year ago

That is unfortunately the nature of web security, there's no way I've encountered that will let you populate a forms file upload system with script generated data. It's a read only property of the form.

Collectives™ on Stack Overflow

Attach file to input type="file" with javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related