5

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();
});
Community
  • 1
  • 1
matousc
  • 3,698
  • 10
  • 40
  • 65
  • 2
    Possible duplicate of [Pre-Populate HTML form file input](http://stackoverflow.com/questions/16365668/pre-populate-html-form-file-input) – Liam Oct 04 '16 at 14:04
  • 2
    That question answers your queustion. It isn't possible. Asking the same question again does not alter this fact – Liam Oct 04 '16 at 14:04
  • 1
    Please show how you create the file – Alex K. Oct 04 '16 at 14:04
  • AJAX is how you upload created files.. there is exactly zero difference between AJAX POST and non-AJAX POST. – Robert Parham Oct 04 '16 at 14:09
  • 1
    @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 Oct 04 '16 at 14:09
  • It's essentially the same thing...It's security method to prevent malicious web sites uploading files at will. – Liam Oct 04 '16 at 14:10
  • 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 Oct 04 '16 at 14:13

1 Answers1

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.

Justin MacArthur
  • 4,022
  • 22
  • 27
  • 1
    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. – matousc Oct 04 '16 at 14:18
  • 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. – Justin MacArthur Oct 04 '16 at 14:27
  • But the solution with window.location cause another request. What I need to achieve should be pretty simple operation. Two requests are not nice. – matousc Oct 04 '16 at 14:29
  • 2
    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. – Justin MacArthur Oct 04 '16 at 14:37