Upload file from Javascript

Question

I'm developing a Javascript app and I need to use the Mediafire REST API to upload a file. (See upload ducmentation here).

Following this MDN tutorial, and some research, I've written the code below, but it seems it's not working... Note that I don't need for the moment to control the progress and so on, I only want to do the most basic upload operation possible...

Also note that I could a different code, and even jQuery or other (free) libraries, so if you have a better code to upload a file I'd be really grateful...

var controller = this;
var file = $("#file").get(0).files[0];
//The file is correctly retrieved here...

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.mediafire.com/api/upload/upload.php?session_token=' + controller.sessionToken.token);
//(The session_token is valid)
xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.setRequestHeader('x-filesize', file.size);

var reader = new FileReader();
reader.onload = function (evt) {
  var uInt8Array = new Uint8Array(evt.target.result);
  //It seems that here the ArrayBuffer is read correctly, 
  //and I converted it to a ArrayBufferView because Chrome suggested it...
  xhr.send(uInt8Array);
};
reader.readAsArrayBuffer(file);

I can't tell the concrete error, I only know that nothing is happens... but maybe looking at the code you can see some obvious error... The only thing I see is this in Chrome's console:

enter image description here

Note: I know the quality of this question is not the desired and it's TOO vague, but I tried to do my best taking into account that I'm completely new to ALL these technologies...

If you mean the tab `Response` in the last capture, there's nothing there. It says: `This request has no response data available`... Sorry for my ignorance in this regard... — MikO, May 03 '13 at 21:17

Ray Nicholus · Accepted Answer · 2013-05-03T21:37:00.113

1

The presence of an OPTIONS request and the presence of specific headers in the OPTIONS request indicates that your POST request is a cross-domain request. The user agent, following the CORS spec, is first sending an OPTIONS request. This is also called a preflight request, and it is sent, in your case, due to the non-standard header you are including (x-filesize) and the fact that the Content-Type is not form-encoded, MPE, or text/plain. You can either deal with the OPTIONS request server-side, or make appropriate changes to your request so that a preflight is not required. Either way, you are going to have to deal with CORS requests server-side since you are apparently making a cross-domain request. You can read more about CORS in this excellent MDN article.

P.S. Why are you using FileReader here? Just send the File object via XHR, or, better yet, append the File to a FormData object and send that.

edited May 03 '13 at 21:37

answered May 03 '13 at 21:30

Ray Nicholus

19,538
14
59
82

Thanks for the info @Ray, as I said I'm new to this, the only Javascript I know is form validation and few things more, and now I have to deal with this... I can't change anything in *server-side*, because I'm sending the POST request to Mediafire server... Moreover I don't need to use the code I've written at all, I could completely change it (even use jQuery or other libraries)... So if taking a look at Mediafire's upload funtion documentation (see link, very few lines) you can suggest a better code I'd hugely appreciate it! – MikO May 03 '13 at 22:40
I don't really have any working knowledge of mediafire, but it looks like they didn't intend this API to be used from a browser. – Ray Nicholus May 03 '13 at 23:27
Thanks @Ray, so do you mean there's no (simple) way to use this API function from Javascript/jQuery? – MikO May 03 '13 at 23:45
Without cors support from mediafire, that's correct. I don't see any mention of such support in their docs. – Ray Nicholus May 04 '13 at 00:10
Thanks again @Ray, sorry for my ignorance, but this is the last question I promise :), it would be possible (and easy) to call that function from a Java web application? – MikO May 04 '13 at 00:14
You can make any request you want from any server side code, including java. If you are asking about doing this in a java applet: don't do that. Java applets are not a good option anymore. – Ray Nicholus May 04 '13 at 01:24
No I didn't mean applets, but servider-side Java code... Thanks for all your help! – MikO May 04 '13 at 01:36
Yep, certainly from Java server-side code. Shouldn't be too hard if you are familiar with Java. You can make calls back to your local server via javascript which utilizes the mediafire API and returns the result in the response to your ajax request. – Ray Nicholus May 04 '13 at 01:53

Upload file from Javascript

1 Answers1