Saving a blob from JS to Oracle SQL?

Question

I am currently trying to take a photo through a laptops webcam and save it to the Oracle Apex Database.

For capturing a users photo I use simple JS code (see below). How can I save my image to the DB? I figured converting the image to a blob would be the simplest idea, but I am stuck after converting... Can I set a "Display Only" or "Upload File" Item with my Blob?

Thanks a lot for the help!

<html>
Videoplayer will follow here
    <video id="player" autoplay></video>
    <button type="button" id="capture">Capture</button>
    <canvas id="canvas" class="canvasclass"></canvas>
    <button type="button" id="save">Save Photo</button>
    <div id="urldiv">URL here</div>
    <script>
    const player = document.getElementById('player');
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    const captureButton = document.getElementById('capture');
    const savebutton = document.getElementById('save');
    const urlplace = document.getElementById('urldiv');
 
    const constraints = {
        audio:false,video:true
 
    };
 
    captureButton.addEventListener('click', () => {
        context.drawImage(player, 0, 0, canvas.width, canvas.height);
 
        // Stop all video streams.
        player.srcObject.getVideoTracks().forEach(track => track.stop());
    });
 
    navigator.mediaDevices.getUserMedia(constraints)
        .then((stream) => {
        // Attach the video stream to the video element and autoplay.
        player.srcObject = stream;
        });
 
    savebutton.addEventListener('click', () => {
        const dataurl = canvas.toDataURL();
        urlplace.innerHTML = dataurl;
        window.prompt("Copy to clipboard: Ctrl+C, Enter", dataurl);
       // $s("ITEM_NAME", dataurl); 
    })
 
    </script>
<html>

I don't recommend saving the image into the database, it is way too resource costy, a better idea is to put the image on the filesystem and insert the path to it into the database — damir huselja
– damir huselja, Commented Jun 30, 2020 at 14:41
unfortunately not an option at this point. surely the better answer — Florian
– Florian, Commented Jun 30, 2020 at 16:39

kfinity · Accepted Answer · 2020-06-30 15:22:41Z

This article covers taking a photo and saving it in APEX - it's very similar to what you're doing.

The main part relevant to your problem is that your JS 'click' event listener should send the image to a server-side ajax process. Here it's named "SAVE_PHOTO":

apex.server.process(
  'SAVE_PHOTO',
  {
    p_clob_01: canvas.toDataURL().match(/,(.*)$/)[1] 
  },
  {
    success: function(data) {
               if (data.result == 'success') {
                 apex.submit('SNAP_PHOTO');
               }
             }
  }
);

Note that it also submits the page after the ajax call succeeds.

You also need to create the On-Demand Process SAVE_PHOTO in Apex:

declare
  l_photo_clob clob;
  l_photo_blob blob;
begin
  l_photo_clob := apex_application.g_clob_01;
 
  l_photo_blob := apex_web_service.clobbase642blob(
                    p_clob => l_photo_clob
                  );
 
  -- Here, instead of adding the blob to a collection, you could insert it in a table.
  -- If so, you probably want to pass more arguments (e.g. primary key) using apex_application.G_X01 , g_x02, etc
  apex_collection.add_member(
    p_collection_name => 'PHOTOS',
    p_blob001 => l_photo_blob
  );
 
  apex_json.open_object;
  apex_json.write(
    p_name => 'result',
    p_value => 'success'
  );
  apex_json.close_object;
exception
  when others then
    apex_json.open_object;
    apex_json.write(
      p_name => 'result',
      p_value => 'fail'
    );
    apex_json.close_object;
end;

They cover it in more detail in the article.

Collectives™ on Stack Overflow

Saving a blob from JS to Oracle SQL?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related