Error sending an image to bubble (IE11) using webSDK

Répondu

S’abonner

Esben EHRENSKJOLD

• 13 août 2018 06:52

Hi,

I am getting the following error then sending an image to a bubble with IE11?

Console log:

%c Mon Aug 13 2018 07:37:01 | RBW-SDK | StorageSrv   | [addFileBub ] ::  Try to add a file https://esben-lt:8010/images/Prisoners_dilemma_diagram.jpg to the bubble 5b712555651f6e68da73de59 color:green

SCRIPT445: Object doesn't support this action

rainbow-sdk.min.js (1,724847)

This line in rainbow-sdk.min.js

(r.readyState===XMLHttpRequest.DONE){var e=r.response,t=new File([e],i.replace(/^.*[\\\/]/,"")

I am executing this code:

function insertImage(ownedBubble){

rainbowSDK.fileStorage.uploadFileToBubble(ownedBubble, "https://esben-lt:8010/images/Prisoners_dilemma_diagram.jpg", "Prisoner's dilemma diagram");

};

The above function works fine in Chrome. I currently have to use IE11 though. 

 

I have tried http, https, file:/// and C; when pointing to the image with no luck

 

Regards,

 

0

• 

  Vincent BAILLEAU

  • 13 août 2018 07:22

  Hi Esben,

  Did you follow the following tutorial:

  https://hub.openrainbow.com/#/documentation/doc/sdk/web/guides/5-Compatibility_with_IE11

  Regards

  0

  Actions pour les commentaires Permalien
• 

  Esben EHRENSKJOLD

  • 13 août 2018 07:49

  Yes I have added:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.10/es5-shim.min.js"></script>

   

  <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.0.5/es6-promise.min.js"></script>

   

  I had to add:

  <!--polyfill is a dependency for IE11-->

  <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>

   

  and 

   

  //Fix for IE11

  if (!String.prototype.startsWith) {

  String.prototype.startsWith=function(searchString, position) {

  position=position||0;

  returnthis.indexOf(searchString, position) ===position;

  };

  }

   

  In order to get the Web SDK to work in IE11

   

  I can do all the following in IE11:

  • Create bubble
  • Add members
  • Send / receive IM
  • Delete bubble

  Only messing adding an image to the bubble

   

  0

  Actions pour les commentaires Permalien
• 

  Vincent BAILLEAU

  • 13 août 2018 08:47

  Could you please provide logs on error ?

  tks

  0

  Actions pour les commentaires Permalien
• 

  Esben EHRENSKJOLD

  • 13 août 2018 09:05

  I don't think I have more than what I added to the first message:

  Console log:

  %c Mon Aug 13 2018 07:37:01 | RBW-SDK | StorageSrv   | [addFileBub ] ::  Try to add a file https://esben-lt:8010/images/Prisoners_dilemma_diagram.jpg to the bubble 5b712555651f6e68da73de59 color:green

  SCRIPT445: Object doesn't support this action

  rainbow-sdk.min.js (1,724847)

  This line in rainbow-sdk.min.js

  (r.readyState===XMLHttpRequest.DONE){var e=r.response,t=new File([e],i.replace(/^.*[\\\/]/,"")

  0

  Actions pour les commentaires Permalien
• 

  Vincent BAILLEAU

  • 13 août 2018 13:16

  Ok,

  Unfortunately, IE11 doesn't support File creator ( see https://developer.mozilla.org/en-US/docs/Web/API/File ), instead using a file path or an URL in the uploadFileToBubble file parameter, use either a File object or a Blob with additional "name" member.

  Regards

  Vincent

  0

  Actions pour les commentaires Permalien
• 

  Esben EHRENSKJOLD

  • 14 août 2018 08:52

  Thanks Vincent,

  I got the following to work if anyone else need an example:

  function insertImage(ownedBubble){

  varxhr=newXMLHttpRequest();

  xhr.open("GET", "https://esben-lt:8010/images/Prisoners_dilemma_diagram.jpg");

  xhr.overrideMimeType("image/jpeg");

  xhr.responseType="blob";//force the HTTP response, response-type header to be blob

  xhr.onload=function() {

  varmyFile=blobToFile(xhr.response, "Prisoners_dilemma_diagram.jpg");

  rainbowSDK.fileStorage.uploadFileToBubble(ownedBubble, myFile, "Prisoner's dilemma diagram");

  }

  xhr.send();

  };

  functionblobToFile(theBlob, fileName){

  //A Blob() is almost a File() - it's just missing the two properties below which we will add

  theBlob.lastModifiedDate=newDate();

  theBlob.name=fileName;

  returntheBlob;

  }

   

  Also add the following polyfill to eliminate findIndex error in IE11 after initialising the Web SDK 

  //Fix for IE11 findIndex

  if (!Array.prototype.findIndex) {

  Object.defineProperty(Array.prototype, 'findIndex', {

  value: function(predicate) {

  if (this==null) {

  thrownewTypeError('"this" is null or not defined');

  }

  varo=Object(this);

  varlen=o.length>>>0;

  if (typeofpredicate!=='function') {

  thrownewTypeError('predicate must be a function');

  }

  varthisArg=arguments[1];

  vark=0;

  while (k<len) {

  varkValue=o[k];

  if (predicate.call(thisArg, kValue, k, o)) {

  returnk;

  }

  k++;

  }

  return-1;

  }

  });

  }

   

  Regards, Esben

  0

  Actions pour les commentaires Permalien
• 

  Vincent BAILLEAU

  • 14 août 2018 12:09

  Hi Esben,

  happy to see that it works ! Thank you for your contribution. We will try to include this support in one of our next version.

  Regards

  Vincent

  0

  Actions pour les commentaires Permalien

Vous devez vous connecter pour laisser un commentaire.