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:
<SPAN class="keyword token">var</SPAN> siteID <SPAN class="operator token">=</SPAN> graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>Id<SPAN class="punctuation token">;</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"sightings ID "</SPAN><SPAN class="punctuation token">,</SPAN> siteID<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> imageUrl <SPAN class="operator token">=</SPAN> <SPAN class="string token">"https://ocean.floridamarine.org/arcgis/rest/services/.../MapServer/1/"</SPAN> <SPAN class="operator token">+</SPAN> siteID<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> params <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
url<SPAN class="punctuation token">:</SPAN> imageUrl<SPAN class="punctuation token">,</SPAN>
handleAs<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"blob"</SPAN>
<SPAN class="punctuation token">}</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"request params "</SPAN><SPAN class="punctuation token">,</SPAN> params<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> imageRequest <SPAN class="operator token">=</SPAN> <SPAN class="token function">esriRequest</SPAN><SPAN class="punctuation token">(</SPAN>params<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
imageRequest<SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>requestSucceeded<SPAN class="punctuation token">,</SPAN> requestFailed<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">requestSucceeded</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">,</SPAN> io<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"request succeeded "</SPAN><SPAN class="punctuation token">,</SPAN> response<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> reader <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FileReader</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
reader<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"loadend"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">==</SPAN> <SPAN class="string token">"image/png"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"image response "</SPAN><SPAN class="punctuation token">,</SPAN> response<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> temp1 <SPAN class="operator token">=</SPAN> <SPAN class="string token">"<a href=' "</SPAN> <SPAN class="operator token">+</SPAN> reader<SPAN class="punctuation token">.</SPAN>result <SPAN class="operator token">+</SPAN> <SPAN class="string token">"&Count=1' target='_blank'><img src=' "</SPAN> <SPAN class="operator token">+</SPAN> reader<SPAN class="punctuation token">.</SPAN>result <SPAN class="operator token">+</SPAN> <SPAN class="string token">"&Count=1' style='width:230px; height:215px;'></img></a>"</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">==</SPAN> <SPAN class="string token">"image/png"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="comment token">//if working with image data</SPAN>
reader<SPAN class="punctuation token">.</SPAN><SPAN class="token function">readAsDataURL</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"image response "</SPAN><SPAN class="punctuation token">,</SPAN> response<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
reader<SPAN class="punctuation token">.</SPAN><SPAN class="token function">readAsText</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">requestFailed</SPAN><SPAN class="punctuation token">(</SPAN>error<SPAN class="punctuation token">,</SPAN> io<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
temp <SPAN class="operator token">=</SPAN> temp <SPAN class="operator token">+</SPAN> <SPAN class="string token">"<br/><div style='text-align:center;'><strong>No Image Available</strong></div>"</SPAN><SPAN class="punctuation token">;</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>error<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>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!!