Question

115

How to set the download file extension for blob data

rated 0 times [ 116] [ 1] / answers: 1 / hits: 9259 / 2 Years ago, thu, march 31, 2022, 12:00:00

In my site video use the blob data, when the video was downloaded, the saved filename is the blob name with .txt(4671addc-3ce0-4eb6-b414-ddf3406b1fe5.txt) extension in Chrome borwser, while in firefox is with .mp4(4671addc-3ce0-4eb6-b414-ddf3406b1fe5.mp4) extension.

How can I specific the download file extension and the filename.

I've tried to set it with below code, but none works.

    type="video/mp4"

    filename="111.mp4"

    download="111.mp4"

Here is the sample code, I use now.

<video 

    width="300px"

    id="video"

    type="video/mp4"

    filename="111.mp4"

    download="111.mp4"

    controls=""

    src="blob:http://localhost/4671addc-3ce0-4eb6-b414-ddf3406b1fe5">

</video>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

chase

Add To Favorites

Follow

Total Points: 78

Total Questions: 106

Total Answers: 93

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

chase questions

1 React changing react-icon color on mouse hover

Thu, Jul 1, 21, 00:00, 3 Years ago

1 Passing Objects as Argument to GraphQL Mutation (graphql-request)

Sun, Dec 20, 20, 00:00, 3 Years ago

1 how to get data from response from fetch javascript request

Sat, Dec 12, 20, 00:00, 4 Years ago

1 CSS select all previous siblings for a star rating

Mon, Sep 14, 20, 00:00, 4 Years ago

1 Shopify - Slick Slider / Carousel - Responsive setting not working

Mon, Apr 27, 20, 00:00, 4 Years ago

View All

answered 2 Years ago anayaashleyh · Accepted Answer

using HTML5 `download` attribute download the `Blob` URL file

Notice

download attribute only for HTML5 a or area tag ✅

download attribute not exist on HTML5 video tag ❌

download `Blob` URL image

<section>

  <img id="img" />

  <a id="img-link" download>...loading</a>

</section>

// ES5

function generatorBlobURL(url, type, dom, link) {

  var xhr = new XMLHttpRequest();

  xhr.open('GET', url);

  xhr.responseType = 'arraybuffer';

  xhr.onload = function(res) {

    var blob = new Blob(

      [xhr.response],

      {'type' : type},

    );

    var urlBlob = URL.createObjectURL(blob);

    // render `blob` url ✅

    dom.src = urlBlob;

    // using `a` tag download ✅

    link.href = urlBlob;

    link.innerText = urlBlob;

    link.download = filename;

  };

  xhr.send();

}



(function() {

  var type = 'image/png';

  var url = 'https://cdn.xgqfrms.xyz/logo/icon.png';

  var dom = document.querySelector('#img');

  var link = document.querySelector('#img-link');

  var arr = url.split('/');

  var filename = arr[arr.length - 1] || 'default-filename';

  generatorBlobURL(url, type, dom, link, filename);

})();

download `Blob` URL video

<section>

  <video id="video" controls width="400" height="300">

    loading...

  </video>

  <br>

  <a id="video-link" download>...loading</a>

</section>

// ES5

function generatorBlobURL(url, type, dom, link) {

  var xhr = new XMLHttpRequest();

  xhr.open('GET', url);

  xhr.responseType = 'arraybuffer';

  xhr.onload = function(res) {

    var blob = new Blob(

      [xhr.response],

      {'type' : type},

    );

    var urlBlob = URL.createObjectURL(blob);

    // render `blob` url ✅

    dom.src = urlBlob;

    // using `a` tag download ✅

    link.href = urlBlob;

    link.innerText = urlBlob;

    link.download = filename;

  };

  xhr.send();

}



(function() {

  var type = 'video/mp4';

  var url = 'https://cdn.xgqfrms.xyz/HTML5/Blob/2022-04-07-sh.mp4';

  var dom = document.querySelector('#video');

  var link = document.querySelector('#video-link');

  var arr = url.split('/');

  // arr.at(-1);

  var filename = arr[arr.length - 1] || 'default-filename';

  setTimeout(() => {

    generatorBlobURL(url, type, dom, link, filename);

  }, 0);

})();

live demo

https://codepen.io/xgqfrms/full/YzYRLwg

screenshots

refs

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes