XHR2 FIle Upload without a File Upload Form Element

Question

I've having a issue with XHR2 to post to file to server. I have the following issues:

I'd like to perform a POST to a URL, with two parameters and the FILE. I'd like the POST request to act like I used an input=file on the back-end.

The goal is have something like this:

function sendForm(FILE_URI, GO_TO) {
  var formData = new FormData();

  formData.append('param1', "param1");
  formData.append('param2', "Param2");

  // Now we add the file
  formData.append("file", FILE_URI);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', GO_TO, true);
  xhr.onload = function(e) { ... };

  xhr.send(formData);

  return false; // Prevent page from submitting.
}

This code won't work and the server will not look at the "file" param as a $_FILE (I'm using PHP). Remember - there is no File Upload element in the form, it will just be a hidden input with the URI:

<input type="hidden" id="file_item" value="/path/to/image" />

Any guidance on this?

UPDATE

I understand that editing the INPUT file is bad - I don't want to do that. I want to find other ways to POST a file to server without a FORM. I can use XHR2 to upload a BLOB without a form - but I'm looking for ways to have Params + File (or Blob) using XHR2.

A URI is the path to the file (just the like id="file_item") — gregavola, Jan 28 '13 at 20:47

score 1 · Answer 1 · edited May 23 '17 at 10:31

1

Think about this. You go to some random page and a person could put a hidden field on the page and upload any file off your computer. Is that a good design? That is why you can not set the value of a file input. It is off limits. It is a security nightmare.

If it is a path to some file on the internet, why doesn't the webserver fetch it?

Now it is possible to get around it with a proxy on your server using canvas and uploading files that way.

edited May 23 '17 at 10:31

Community

1
1

answered Jan 28 '13 at 20:36

epascarello

204,599
20
195
236

I'm post a image to a API (think adding a photo to a checkin on Foursquare).I need to just pass the image and some form elements as well. I understand that you can't do edit the form file upload field - I'm just looking for ways to do this without a FORM input for file. Such as blob or something else with XHR2. – gregavola Jan 28 '13 at 20:50
You can use canvas [updated post], but you will be limited on browser support. – epascarello Jan 28 '13 at 21:04

score -1 · Answer 2 · answered Jan 28 '13 at 20:37

-1

your form needs the attribute enctype with the value multipart/form-data

<form enctype="multipart/form-data">...</form>

you should also use the file element, and make it hidden via css (the hidden field will not work).

<input type="file" id="file_item" value="/path/to/image" style="visibility: hidden;">

you probably are doing this, because you cant style the file element? see this which opens the file-dialog (via triggering the file element click)

HTML:

<input type="file" id="file_item" value="/path/to/image" style="visibility: hidden;">
<button id="my-btn">click me for opening file dialog</button>

JS:

document.getElementById('my-btn').onclick = function () {
  document.getElementById('file_item').click();
};

working fiddle here: http://jsfiddle.net/LM6zQ/

answered Jan 28 '13 at 20:37

hereandnow78

14,094
8
42
48

You CAN NOT set the value of a file input unless you have some horrible security settings on your browser. – epascarello Jan 28 '13 at 20:38
but you can fake set it if the user uploads a file from his computer. didnt see the uri stuff in his question... thought he wanted to this because of the file element not to be stylable (see my answer) – hereandnow78 Jan 28 '13 at 20:41
You can "fake set what"? What does fake set mean? – epascarello Jan 28 '13 at 20:42
the file element. actually you are setting the file element itself. just read my answer, because you are triggering it to be clicked... – hereandnow78 Jan 28 '13 at 20:44
There IS NO file-upload element here. I'm basically using this in a situation where a user doesn't choose a file - the file is chosen for them based on what they do (select a photo from their gallery, camera, etc). I'm basically trying to upload 3 items (2 params and 1 file). The file can be a blob - I just want to know how to do it all without a file upload element. – gregavola Jan 28 '13 at 20:52
then i misunderstood your question assuming you wanted to use a hidden field for style the upload element. epascarello's answer is correct, you cant do what you want to do... – hereandnow78 Jan 28 '13 at 20:56

XHR2 FIle Upload without a File Upload Form Element

2 Answers2