title: Displaying BLOBs dynamically
body: <p>Recently i've been working on a rather modest application, which lists contacts. When a detail-link was clicked, a popup would come up with more details and an image of that contact.
  The table this was based on contained a column photo_reference, which held a path to a folder under /i/. With this setup, it was easy to get the images working for each contact.
  The popup i showed was a bunch of htmlcode i put in the region footer, and hid.</p>
  
  <pre><code>&lt;div id="contact_popup" class="contact_pop"&gt;
     &lt;div class="contact_pop_imgcontainer"&gt;
        &lt;img id="id_photo" class="contact_pop" /&gt;
     &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>When the detail was clicked, i retrieved data via an application process, and showed a modal dialog of this container.</p>
  
  <p>Now the scope has changed: users need to be able to upload their own images. So, i went to work and made it so the images get uploaded into wwv_flow_files, and then i move them to a new contact_image table. So far so good. But now i want to display these pictures, and here i'm kind of stuck.
  * I could include a column in my IR, and put a blob format mask on it with image. I've got this working, but annoyingly. My image table has as primary key the field 'ID'. My contacts table also has 'ID' as PK.
  Since <code>IMAGE:APXT_CONTACTS_IMG:SMALL_PHOTO:ID::::::inline:</code> specifies ID as the PK, it uses ID from my contacts table. 
   My link between tables is <code>APXT_CONTACTS.CONTACT_IMAGE_ID -&gt; APXT_CONTACTS_IMG.ID</code>.
  The way i might make it work is to rename my id field in the image table to contact_image_id. (why couldnt the format mask just take the column it's based on as the value :(). 
   I then could hide the column, and take the image with javascript to show in my popup. However, this preloads all images for the amount of selected rows, which isn't entirely bad, but i'm looking for an alternative first.</p>
  
  <ul>
  <li><p>get_blob_file_src also seems no use to me because of the limited use of the parameters (file browse item, id field), and even then, could i use this through an ajax callback?</p></li>
  <li><p>I'd much rather be able to get the image blob via ajax to then display in my popup, but i have no clue as to how to do this. I've made a stored procedure which gets the file to download and call this from an application process (ajax callback), and with firebug i can see the post/response, but i wouldn't know how to get this displayed as an image.</p></li>
  </ul>
  
  <p>Javascript:</p>
  
  <pre><code>function cimg(){
     var get = new htmldb_Get(null, &amp;APP_ID., "APPLICATION_PROCESS=get_img", &amp;APP_PAGE_ID.);
     get.addParam('x01', 25);
     var greturn = get.get();
     alert(greturn);
     var pic = new Image();
     pic.onload = function(){
        document.body.appendChild(pic);
     };
     pic.src = greturn;
  };
  </code></pre>
  
  <p>Page process:</p>
  
  <pre><code>begin
     show_small_photo(apex_application.g_x01);
  end;
  </code></pre>
  
  <p>Stored Procedure:</p>
  
  <pre><code>create or replace procedure "SHOW_SMALL_PHOTO"
  (p_contact_image_id IN NUMBER)
  is
     v_mime      apxt_contacts_img.mime_type%type;
     v_length    NUMBER;
     v_filename  apxt_contacts_img.filename%type;
     v_lob       BLOB;
  begin
      SELECT mime_type, lengthb(small_photo), filename, small_photo
      INTO v_mime, v_length, v_filename, v_lob
      FROM apxt_contacts_img
      WHERE id = p_contact_image_id;
  
      OWA_UTIL.mime_header (NVL (v_mime, 'application/octet'), FALSE);
  
      HTP.p ('Content-length: ' || v_length);
      -- needed?
      --HTP.p ('Content-Disposition: attachment; filename="'||v_filename||'"');
      OWA_UTIL.http_header_close;
      wpg_docload.download_file (v_lob);
  end;
  </code></pre>
  
  <p>(I'd rather not have to grant execute to public and call the stored procedure via a link.)
  This way i'd only have to load the pictures of links clicked. Though this code doesn't work. I get the alert and see a bunch of those weird chars, so i presume that is the blob talking. But i'm not getting an image anywhere.</p>
  
  <p>Am i missing something? Doing something wrong? I'm totally out of clues.</p>
  
  <p>Instead of my existing code, i might make this work through creating another page, and juggle page items and their values around to try and get the same layout going, and then get that page through ajax? 
  I'm mainly trying to minimize impact (=work) on the existing app, so i wouldn't have to yet again change pages.</p>
  
  <p>TL;DR: is it possible to retrieve and display an image blob from a table not in the report query, preferably through ajax?</p>
  
  <p><strong>This is Apex 4.02 on an 11g db</strong></p>
  
  <p>Thanks, 
  Tom</p>