How to retrieve blob content from REST table

871
2
06-03-2019 07:46 AM
FranklinAlexander
Occasional Contributor II

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") {
              //if working with image data
              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!!  

0 Kudos
2 Replies
MichaelVolz
Esteemed Contributor

This would require some research on your part, but I was faced with a similar issue many years ago and it appeared from both my and my colleaques research that the IT industry (for the most part) was moving away from BLOB storage to file based storage.  My org never created an app to read BLOB fields as the software vendors we were working with were redesigning their apps and associated databases to store the data in a file structure instead of a BLOB field.  This was of great benefit to my org as we just needed to create virtual directories on web servers that were sourced from the shared folder storing these files instead of creating an app to be able to read the BLOB field's contents.  I know this is not an answer, but it might aid in making decisions to architecture solutions that are easier to support moving forward as you would not need custom programming.

0 Kudos
FranklinAlexander
Occasional Contributor II

Micheal,

Thanks for the suggestion. A lot of people are saying the same thing from what I have already gleaned from the research I have done to this point. I will pass this along to the folks that manage the database and we'll see what happens. I think it would prevent a lot of unnecessary coding and the images would load faster, but it's not up to me :( 

Gene 

0 Kudos