2

I have a web page where user uploads a video file using html's "input type = file" tag, I am catching that uploaded video file in JavaScript function variable where it is coming as blob URL. "blob:https://www.myownsite.com:8080/2e8cfd32-abf2-4db3-b396-91f76cc3b40c". I am not able to save this blob URL in my system.

HTML code:

<input type="file" name="video_file_name" accept="video/*">
<input type="submit" value="Upload Video" id="customVideoSubmit">
<button onClick="postVideo();" id="customVideoSubmit" aria- hidden="true">Upload Video</button>

JavaScript code:

    function postVideo(){
    var blobURL = document.querySelector('video').src;
}

variable blobURL contains following blob URL, which plays video properly if I put this on a separate tab of that browser.

blob:https://www.myownsite.com:8080/2e8cfd32-abf2-4db3-b396-91f76cc3b40c

How can I save this blob video file in my system. I have tried number of JavaScript methods and also back end methods in my Perl code like 

decode_base64($cgi->{blobURL}) ;

Nothing worked though. Any help will be much appreciated.

Ambr
  • 73
  • 1
  • 8
  • Where is `Blob URL` created? Is requirement to save file to local filesystem or server? – guest271314 Oct 09 '17 at 02:41
  • On the server. the blobURL has server path, however it is only in the browser memory. blobURL is being created by the browser. It is a browser object. – Ambr Oct 09 '17 at 02:45
  • `POST` the `data URI`, `Blob` or `File` representation of file to server, see https://stackoverflow.com/questions/46557180/how-to-decode-and-upload-gif-via-ajax-and-php/46557251#46557251 – guest271314 Oct 09 '17 at 02:46
  • I am able to POST the blobURL to the server. Perl CGI variable $cgi->{'blobURL'} in my back end Perl script has full URL path of blobURL. So, I have blobURL at server backend just don't know how to save it. – Ambr Oct 09 '17 at 03:29
  • Convert `Blob URL` to `Blob`. It is not possible to process a `Blob URL` at server. – guest271314 Oct 09 '17 at 03:35

1 Answers1

0

To convert a Blob URL to a Blob to POST to server you can use fetch() and Response.blob()

const blobURL = URL.createObjectURL(new Blob([123]));
fetch(blobURL)
.then(response => response.blob())
.then(blob => {
  // do stuff with `blob`: `Blob`
  console.log(blob);
});
guest271314
  • 1
  • 15
  • 104
  • 177
  • Have you read linked Question at previously posted comment https://stackoverflow.com/questions/46638009/not-able-to-save-download-browser-blob-data-object/46639149?noredirect=1#comment80225489_46638009? – guest271314 Oct 09 '17 at 06:00