One of my web application developers is using the following code to upload images to a back end server so they can be linked to and stored centrally.
In the Eo.WebBrowser 2015 build this code works as expected, however in 2016.0.28.0 it fails to include the blob in the Http request;
The dataURItoBlob call successfully creates the blob, but formData.Append("files[]", imageBlob) appears to fail to append the data.
The POST call returns a guid which is used to retrieve the file after being uploaded.
If you use Fiddler you can see the data not being passed along in 2016, but see it being passed with the 2015 build.,
I have verified that this code also works in the lastest version of Google Chrome (49)
Can you confirm that this is a bug in EO?
Code: JavaScript
function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
try
{
return new Blob([ia], {type: mimeString});
}
catch (e) {
// The BlobBuilder API has been deprecated in favour of Blob, but older
// browsers don't know about the Blob constructor
// IE10 also supports BlobBuilder, but since the `Blob` constructor
// also works, there's no need to add `MSBlobBuilder`.
var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
var bb = new BlobBuilder();
bb.append(ia.buffer);
return bb.getBlob(mimeString);
}
}
function doLoadImageIn2Attic() {
try { // in2Attic post url
var url = "http://ServerWhichReceivesAndServesFiles/upload";
var formData = new FormData();
var imageBlob = dataURItoBlob(document.getElementById("imageUri").innerHTML);
formData.append("files[]", imageBlob);
// do the post
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if (xhr.status === 200) {
alert(xhr.responseText);
var json = JSON.parse(xhr.responseText);
// load image
var elem = document.getElementById("imagePlaceHolder");
elem.setAttribute('src', 'http://ServerWhichReceivesAndServesFiles/retrieve/' + json.stored.id);
} else {
alert('Request failed. Returned status of ' + xhr.status);
}
};
xhr.onerror = function() {
alert("error requesting " + url);
};
xhr.open('POST', url);
xhr.send(formData);
} catch (e) {
alert(e);
}
}