Unable to set the correct MIME type when slicing a blob

I experienced a bug where svg images could not be shown on Safari. After investigating I realized it was due to the fact that I load ressources as packs/archives of files that I split in the browser.

When I load the ressources, I get a plain text blob. I use blob.slice() to extract a ressource, passing the correct MIME type. However, it seems that the new blob does not have the correct MIME type but still the old one (plain text). On Chrome and Firefox, it turns out that the image can be displayed even if its MIME type is incorrect but not on Safari.

Here is the code which does not work:

const blob = new Blob([ressource], {

  type: "text/plain",

});



const slicedBlob = blob.slice(0, blob.size, "image/svg+xml"); 

// slicedBlob.type is "text/plain"

I also reproduced some minimal test cases: https://jsbin.com/yavaxadalo/edit?js,output

From the MDN docs and the W3C specs it looks that I use the method as it is intended too, but maybe I am missing something ?

edited Jan 7 at 14:15

asked Jan 2 at 10:19

risk

706617

add a comment |

I experienced a bug where svg images could not be shown on Safari. After investigating I realized it was due to the fact that I load ressources as packs/archives of files that I split in the browser.

Here is the code which does not work:

const blob = new Blob([ressource], {

  type: "text/plain",

});



const slicedBlob = blob.slice(0, blob.size, "image/svg+xml"); 

// slicedBlob.type is "text/plain"

I also reproduced some minimal test cases: https://jsbin.com/yavaxadalo/edit?js,output

From the MDN docs and the W3C specs it looks that I use the method as it is intended too, but maybe I am missing something ?

edited Jan 7 at 14:15

asked Jan 2 at 10:19

risk

706617

add a comment |

I experienced a bug where svg images could not be shown on Safari. After investigating I realized it was due to the fact that I load ressources as packs/archives of files that I split in the browser.

Here is the code which does not work:

const blob = new Blob([ressource], {

  type: "text/plain",

});



const slicedBlob = blob.slice(0, blob.size, "image/svg+xml"); 

// slicedBlob.type is "text/plain"

I also reproduced some minimal test cases: https://jsbin.com/yavaxadalo/edit?js,output

From the MDN docs and the W3C specs it looks that I use the method as it is intended too, but maybe I am missing something ?

edited Jan 7 at 14:15

asked Jan 2 at 10:19

risk

706617

I experienced a bug where svg images could not be shown on Safari. After investigating I realized it was due to the fact that I load ressources as packs/archives of files that I split in the browser.

Here is the code which does not work:

const blob = new Blob([ressource], {

  type: "text/plain",

});



const slicedBlob = blob.slice(0, blob.size, "image/svg+xml"); 

// slicedBlob.type is "text/plain"

I also reproduced some minimal test cases: https://jsbin.com/yavaxadalo/edit?js,output

From the MDN docs and the W3C specs it looks that I use the method as it is intended too, but maybe I am missing something ?

javascript blob slice mime-types

edited Jan 7 at 14:15

asked Jan 2 at 10:19

risk

706617

edited Jan 7 at 14:15

asked Jan 2 at 10:19

risk

706617

edited Jan 7 at 14:15

asked Jan 2 at 10:19

risk

706617

asked Jan 2 at 10:19

risk

706617

asked Jan 2 at 10:19

risk

706617

add a comment |

1 Answer
1

active

oldest

votes

I have to admit I am a bit clueless about this Safari's bug.
This should probably be reported.

I'd like to point out that your jsbin was a bit misleading, since the Blob returned by the slice method correctly has its type set to 'image/svg+xml' (you were logging the type of the original blob2), but this just makes things even weirder...

Now, I'm not too clear as to why you want to use Blob.slice here, if you just want to change the type of that Blob, then you can simply create a new one using the Blob() constructor which also accepts other Blobs as blobType.

const blob1 = new Blob([

`<svg xmlns="http://www.w3.org/2000/svg">

  <rect width="100" height="100"/>

</svg>`

], {type: 'text/plain'});

console.log(blob1.type);



const blob2 = new Blob([blob1], {type: 'image/svg+xml'});

console.log(blob2.type);

img.src = URL.createObjectURL(blob2);

<img id="img">

And if you really wish to use the Blob.slice method, then as a workaround, you can create a new one from the Blob constructor which will wrap it correctly:

const blob1 = new Blob([

`<svg xmlns="http://www.w3.org/2000/svg">

  <rect width="100" height="100"/>

</svg>[BAD-DATA]`

], {type: 'text/plain'});



// if we need to slice it

const sliced = blob1.slice(0, blob1.size - '[BAD-DATA]'.length);

// wrap it again for Safari...

const blob2 = new Blob([sliced], {type: 'image/svg+xml'});

img.src = URL.createObjectURL(blob2);

<img id="img">

answered Jan 4 at 15:55

Kaiido

43.5k465105

You are right about the error in my jsbin, thanks. About the usage of blob.slice(), that's because the blob may contain many assets (which may not be of the same type) and not only one like in my test case. About the new Blob([blob]), thanks for the advice, this is much simpler than my attempt using a FileReader.

– risk
Jan 7 at 14:21

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54004554%2funable-to-set-the-correct-mime-type-when-slicing-a-blob%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I have to admit I am a bit clueless about this Safari's bug.
This should probably be reported.

const blob1 = new Blob([

`<svg xmlns="http://www.w3.org/2000/svg">

  <rect width="100" height="100"/>

</svg>`

], {type: 'text/plain'});

console.log(blob1.type);



const blob2 = new Blob([blob1], {type: 'image/svg+xml'});

console.log(blob2.type);

img.src = URL.createObjectURL(blob2);

<img id="img">

And if you really wish to use the Blob.slice method, then as a workaround, you can create a new one from the Blob constructor which will wrap it correctly:

const blob1 = new Blob([

`<svg xmlns="http://www.w3.org/2000/svg">

  <rect width="100" height="100"/>

</svg>[BAD-DATA]`

], {type: 'text/plain'});



// if we need to slice it

const sliced = blob1.slice(0, blob1.size - '[BAD-DATA]'.length);

// wrap it again for Safari...

const blob2 = new Blob([sliced], {type: 'image/svg+xml'});

img.src = URL.createObjectURL(blob2);

<img id="img">

answered Jan 4 at 15:55

Kaiido

43.5k465105

You are right about the error in my jsbin, thanks. About the usage of blob.slice(), that's because the blob may contain many assets (which may not be of the same type) and not only one like in my test case. About the new Blob([blob]), thanks for the advice, this is much simpler than my attempt using a FileReader.

– risk
Jan 7 at 14:21

add a comment |

I have to admit I am a bit clueless about this Safari's bug.
This should probably be reported.

const blob1 = new Blob([

`<svg xmlns="http://www.w3.org/2000/svg">

  <rect width="100" height="100"/>

</svg>`

], {type: 'text/plain'});

console.log(blob1.type);



const blob2 = new Blob([blob1], {type: 'image/svg+xml'});

console.log(blob2.type);

img.src = URL.createObjectURL(blob2);

<img id="img">

And if you really wish to use the Blob.slice method, then as a workaround, you can create a new one from the Blob constructor which will wrap it correctly:

const blob1 = new Blob([

`<svg xmlns="http://www.w3.org/2000/svg">

  <rect width="100" height="100"/>

</svg>[BAD-DATA]`

], {type: 'text/plain'});



// if we need to slice it

const sliced = blob1.slice(0, blob1.size - '[BAD-DATA]'.length);

// wrap it again for Safari...

const blob2 = new Blob([sliced], {type: 'image/svg+xml'});

img.src = URL.createObjectURL(blob2);

<img id="img">

answered Jan 4 at 15:55

Kaiido

43.5k465105

You are right about the error in my jsbin, thanks. About the usage of blob.slice(), that's because the blob may contain many assets (which may not be of the same type) and not only one like in my test case. About the new Blob([blob]), thanks for the advice, this is much simpler than my attempt using a FileReader.

– risk
Jan 7 at 14:21

add a comment |

I have to admit I am a bit clueless about this Safari's bug.
This should probably be reported.

const blob1 = new Blob([

`<svg xmlns="http://www.w3.org/2000/svg">

  <rect width="100" height="100"/>

</svg>`

], {type: 'text/plain'});

console.log(blob1.type);



const blob2 = new Blob([blob1], {type: 'image/svg+xml'});

console.log(blob2.type);

img.src = URL.createObjectURL(blob2);

<img id="img">

And if you really wish to use the Blob.slice method, then as a workaround, you can create a new one from the Blob constructor which will wrap it correctly:

const blob1 = new Blob([

`<svg xmlns="http://www.w3.org/2000/svg">

  <rect width="100" height="100"/>

</svg>[BAD-DATA]`

], {type: 'text/plain'});



// if we need to slice it

const sliced = blob1.slice(0, blob1.size - '[BAD-DATA]'.length);

// wrap it again for Safari...

const blob2 = new Blob([sliced], {type: 'image/svg+xml'});

img.src = URL.createObjectURL(blob2);

<img id="img">

answered Jan 4 at 15:55

Kaiido

43.5k465105

I have to admit I am a bit clueless about this Safari's bug.
This should probably be reported.

const blob1 = new Blob([

`<svg xmlns="http://www.w3.org/2000/svg">

  <rect width="100" height="100"/>

</svg>`

], {type: 'text/plain'});

console.log(blob1.type);



const blob2 = new Blob([blob1], {type: 'image/svg+xml'});

console.log(blob2.type);

img.src = URL.createObjectURL(blob2);

<img id="img">

And if you really wish to use the Blob.slice method, then as a workaround, you can create a new one from the Blob constructor which will wrap it correctly:

const blob1 = new Blob([

`<svg xmlns="http://www.w3.org/2000/svg">

  <rect width="100" height="100"/>

</svg>[BAD-DATA]`

], {type: 'text/plain'});



// if we need to slice it

const sliced = blob1.slice(0, blob1.size - '[BAD-DATA]'.length);

// wrap it again for Safari...

const blob2 = new Blob([sliced], {type: 'image/svg+xml'});

img.src = URL.createObjectURL(blob2);

<img id="img">

const blob1 = new Blob([

`<svg xmlns="http://www.w3.org/2000/svg">

  <rect width="100" height="100"/>

</svg>`

], {type: 'text/plain'});

console.log(blob1.type);



const blob2 = new Blob([blob1], {type: 'image/svg+xml'});

console.log(blob2.type);

img.src = URL.createObjectURL(blob2);

<img id="img">

const blob1 = new Blob([

`<svg xmlns="http://www.w3.org/2000/svg">

  <rect width="100" height="100"/>

</svg>`

], {type: 'text/plain'});

console.log(blob1.type);



const blob2 = new Blob([blob1], {type: 'image/svg+xml'});

console.log(blob2.type);

img.src = URL.createObjectURL(blob2);

<img id="img">

const blob1 = new Blob([

`<svg xmlns="http://www.w3.org/2000/svg">

  <rect width="100" height="100"/>

</svg>[BAD-DATA]`

], {type: 'text/plain'});



// if we need to slice it

const sliced = blob1.slice(0, blob1.size - '[BAD-DATA]'.length);

// wrap it again for Safari...

const blob2 = new Blob([sliced], {type: 'image/svg+xml'});

img.src = URL.createObjectURL(blob2);

<img id="img">

const blob1 = new Blob([

`<svg xmlns="http://www.w3.org/2000/svg">

  <rect width="100" height="100"/>

</svg>[BAD-DATA]`

], {type: 'text/plain'});



// if we need to slice it

const sliced = blob1.slice(0, blob1.size - '[BAD-DATA]'.length);

// wrap it again for Safari...

const blob2 = new Blob([sliced], {type: 'image/svg+xml'});

img.src = URL.createObjectURL(blob2);

<img id="img">

answered Jan 4 at 15:55

Kaiido

43.5k465105

answered Jan 4 at 15:55

Kaiido

43.5k465105

answered Jan 4 at 15:55

Kaiido

43.5k465105

answered Jan 4 at 15:55

Kaiido

43.5k465105

You are right about the error in my jsbin, thanks. About the usage of blob.slice(), that's because the blob may contain many assets (which may not be of the same type) and not only one like in my test case. About the new Blob([blob]), thanks for the advice, this is much simpler than my attempt using a FileReader.

– risk
Jan 7 at 14:21

add a comment |

You are right about the error in my jsbin, thanks. About the usage of blob.slice(), that's because the blob may contain many assets (which may not be of the same type) and not only one like in my test case. About the new Blob([blob]), thanks for the advice, this is much simpler than my attempt using a FileReader.

– risk
Jan 7 at 14:21

You are right about the error in my jsbin, thanks. About the usage of blob.slice(), that's because the blob may contain many assets (which may not be of the same type) and not only one like in my test case. About the new Blob([blob]), thanks for the advice, this is much simpler than my attempt using a FileReader.

– risk
Jan 7 at 14:21

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk