Question

I am using an example found here. Mozilla developers

I am interested in this example.

function upload(postUrl, fieldName, filePath)
{
  var formData = new FormData();
  formData.append(fieldName, new File(filePath));

  var req = new XMLHttpRequest();
  req.open("POST", postUrl);
  req.onload = function(event) { alert(event.target.responseText); };
  req.send(formData);
}

But I can’t understand what goes where on this example. filePath is understandable but postUrl , fieldName I can find. I am working on image uploading on the page that has Drag and Drop zone for image uploading. How can I use this function to upload the image on my website?

Answer 1

Check out the FormData documentation and XMLHttpRequest documentation.

fieldName The name of the (form) field whose data is contained in value.
postUrl The URL to which to send the request.

You should have a server-side endpoint that responds to the upload request.
For example:

upload('http://mysite.com/uploader.php', 'fileField', 'path/to/my/file.jpg');

Then if you are using PHP on the server-side; you can access that field value on the server-side like this:

$my_files = $_FILES['fileField'];