Not able to save/download browser blob data object

Question

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.

Answer 1

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);
});