I published a database table that contains a 'blob' field and want to retrieve the images for display in an info window. We are currently using php to retrieve the images from the sql database, and then using XMLHttpRequest to connect to the php file an retrieve the image. I am looking for a javascript only method of doing this, however, because we are migrating our data to new servers and do not wish to use php any more (out of my hands). I have read that esri REST does not support 'blob' files, but have also found a sample code in the ArcGIS API reference for doing just that here:
https://developers.arcgis.com/javascript/3/jsapi/esri.request-amd.html
The problem is, this doesn't look like what I want to do. This sample appears to be accessing an actual image, not a 'blob' file. I tried using esriRequest:
var siteID = graphic.attributes.Id;
console.log("sightings ID ", siteID);
var imageUrl = "https://ocean.floridamarine.org/arcgis/rest/services/.../MapServer/1/" + siteID;
var params = {
url: imageUrl,
handleAs: "blob"
}
console.log("request params ", params);
var imageRequest = esriRequest(params);
imageRequest.then(requestSucceeded, requestFailed);
function requestSucceeded(response, io) {
console.log("request succeeded ", response);
var reader = new FileReader();
reader.addEventListener("loadend", function () {
if (response.type == "image/png") {
console.log("image response ", response);
var temp1 = "<a href=' " + reader.result + "&Count=1' target='_blank'><img src=' " + reader.result + "&Count=1' style='width:230px; height:215px;'></img></a>";
};
});
if (response.type == "image/png") {
reader.readAsDataURL(response);
console.log("image response ", response);
} else {
reader.readAsText(response);
}
};
function requestFailed(error, io) {
temp = temp + "<br/><div style='text-align:center;'><strong>No Image Available</strong></div>";
console.log(error);
}
The response is 'text/html' instead of 'image/png' like I think it should be. I also tried using QueryTask (which doesn't appear to have a method for doing this), and 'fetch' which actually looks like the most promising method (I get back a loooong binary code, but no image). When I insert the url for the image into a browser window, it doesn't take me to the actual image, just to the image info minus the actual 'blob' field, so I am missing something.
Thanks for any advice, or suggestions!!
