0

I have created an application that recovers a string from a back end and puts it into a blob.

I wrote it with fetch and async-await. The problem is that EI11 doesn't support them.

I can rewrite is easily with $.ajax GET request.

When I use fetch I can retrieve the blob from a URL with no problems.

I get an object as a response and the body as ReadableStream.

When I use $.ajax, I get back only a string. And when I put it in a blob, I get a different result.

For example with fetch my blob URL look like this:

Response: F)D�=C�w�Cu9mc�  
Preview: F)D�=C�w�Cu9mc�   
User window: F)DØ=CŠwºCu9mcœ  

Content-Length: 16
Content-Type: text/html

This way I get the correct exact result as expected.

But with $.ajax:

Response: F)D�=C�w�Cu9mc� 
Preview: F)D�=C�w�Cu9mc�  
User window: F)D�=C�w�Cu9mc�  

Content-Length: 24
Content-Type: text/html

If I console log the blob, I also see the difference in the content length.

I would really prefer not to rewrite the application with external libraries, or adjust it to babel. But I need EI11 support.

My fetch code: 

var res = null;             
res = await fetch( window.location.origin +"url_path"); 
const blob = await res.blob();
var objectURLL = URL.createObjectURL(blob);
settings.clip.token_old = settings.blob_prefix+objectURLL.split("/")[3];

My $.ajax code: 

var blob = null;
var objectURL = null;
$.ajax({ 
    url: "url_path"
    contentType: 'text/html ; charset=utf-8',
    success: function (res){
        blob = new Blob([res],{type:"text/html"});
        objectURL = URL.createObjectURL(blob);
    },
    async: false
});

Also tried: 

blob = new Blob([BOM, res],{encoding:"UTF-8",type:"text/html;charset=UTF-8"});

And:

blob = new Blob([BOM, res],{type:"text/html;charset=UTF-8"});

I found a subjection to add a BOM to the blob, to force the browser to read it correctly.

Like this:

var BOM = new Uint8Array([0xEF,0xBB,0xBF]);
blob = new Blob([BOM, res],{encoding:"UTF-8",type:"text/html;charset=UTF-8"});

Which gave me this in the browser:

F)D�=C�w�Cu9mc�
Content-Length: 27  
Content-Type: text/html

But it wasn't really equal the original string and does not work for me.

matisa
  • 497
  • 3
  • 25
  • That's binary not utf8, don't set the Content-Type header, let the browser and the server negociate that between them. And instead of using $.ajax which will always fetch your data as text, fetch it using XHR and set its `responseType` to "blob" – Kaiido Jun 14 '20 at 00:36
  • Thank you. The problem is that I can not set request.responseType and call xhr synchronously. I also tried what suggested here https://stackoverflow.com/a/27131778/7336374. Looks fine, but they are not equal. – matisa Jun 14 '20 at 10:43
  • Why would you use synchronous xhr? And what does it mean you can not set request.responseType? Why you can't do that? – Kaiido Jun 15 '20 at 02:30
  • @Kaiido I found I way to fix it with XHR. If you will post your answer I will accept it a correct. – matisa Jun 29 '20 at 13:07

0 Answers0