is it possible to save into folder using createObjectURL?

Question

URL.createObjectURL(event.target.files[0] this makes me able to view the image just uploaded in the browser. Using the same hack is there a way, where I can store the file/image into a folder instead of URL?

 console.debug(URL.createObjectURL(event.target.files[0]));

the above logs out, this: blob:http%3A//mysite.localhost.com/f96c26b4-9938-4f6e-941e-edbdae3454c9

I just wonder if I can replace mysite.localhost.com with folder path. I even tried replacing URL with full path to a folder, but createObjectURL only work on URL. Is there any function to save file into folder?

No, the Object URL created by `URL.createObjectURL`is only available for the current session, in the browser's memory. What you'll want to save is the Blob passed to this method. Saving to user's machine folder would be an huge security flow. What you can do is to use something like FileSaver.js which will show a prompt requesting your user to save the file, or if you meant to save on server-side, then yes there are ways ;-) — Kaiido, Aug 03 '16 at 05:44
@Kaiido, I see..I'm struggling hard to save into folder via jquery :( — 112233, Aug 03 '16 at 05:45
Kaiido, I want to save on server side...what's the way, pls? I use $(':form').submit() and passing data like: $(this).serialize(). In php script I'm only getting other input values but not file input.. — 112233, Aug 03 '16 at 05:55

score 8 · Accepted Answer · answered Aug 03 '16 at 06:09

Per your comment

I want to save on server side..

the answer becomes "yes it's possible".

First let's explain your misconception :

The string returned by the method URL.createObjectURL() is an URI pointing to some place in the browser's memory, where the Blob passed as first argument will be accessed as a file.

This file is not accessible otherwise than through this URI, and this URI is only available for the current session. You can't share it nor access it from an other machine, nor even from the same machine with an other browser. It will be deleted when the document who called it will be closed (in some implementations, it needs an hard-refresh).

But what you need is actually to save the Blob you passed.
This can be achieved quite easily thanks to the FormData Object, which will allow you to send it through an XHR request.

input.onchange = function() {

  var formData = new FormData();
  formData.append('file', this.files[0], 'yourFileName.ext');

  var xhr = new XMLHttpRequest();
  xhr.onload = callback; // assuming you've got a callback function
  xhr.open('POST', yourServerSideFileHandlerScript);
  xhr.send(formData);

};

or with jQuery,

$(input).on('change', function() {

  var formData = new FormData();
  formData.append('file', this.files[0], 'yourFileName.ext');

  $.ajax({
    url: yourServerSideFileHandlerScript,
    data: formData,
    processData: false,
    contentType: false,
    type: 'POST',
    success: callback
  });

});

You then will be able to get it server-side as any file upload.

Example server-side code (here php):

if ( isset( $_FILES["file"] ) ){
  $dir = 'some/dir/';
  $blob = file_get_contents($_FILES["file"]['tmp_name']);
  file_put_contents($dir.$_FILES["file"]["name"], $blob);
}

thanks a lot..it works..and wonderful explanation...have a wonderful day! — 112233, Aug 03 '16 at 06:24
Thank you sir.. but may I humbly request an asp equivalent of the server side code, if using `FormData()`? — Malcolm Salvador, Jun 05 '17 at 08:12
@Malky.Kid I absolutely don't know nothing about ASP... But isn't [this Q/A](https://stackoverflow.com/questions/28369529/how-to-setup-a-webapi-controller-for-multipart-form-data) what you are after ? — Kaiido, Jun 05 '17 at 08:17
@Kaiido thank you. I also found this https://stackoverflow.com/questions/29096426/jquery-ajax-file-upload-to-asp-net-with-all-form-data as reference. — Malcolm Salvador, Jun 05 '17 at 08:24

is it possible to save into folder using createObjectURL?

1 Answers1