APEX

I am trying to make a simple File Upload demo app and running into a strange problem. All seems to succeed with uploading the file to a target table on the server. However, when the file is opened, the contents are garbled. I suspect it has to do with how I am setting the p_clob_01 argument on my apex.server.process call.

When a file is selected for upload (Dynamic Action on change event of File Upload Page Item P3_FILE_PAYLOAD)

let fileCount = $(this.triggeringElement)[0].files.length;

if ( fileCount > 0 )
{
   $s( 'P3_FILE_NAME', $(this.triggeringElement)[0].files[0].name ); 
   $s( 'P3_FILE_MIME_TYPE', $(this.triggeringElement)[0].files[0].type );
   $('#CREATE_BTN').removeClass('noUpload');
}
else
{
   $('#CREATE_BTN').addClass('noUpload');
   $('#previewImage').removeAttr('src');
   $s( 'P3_FILE_NAME', '' );
}

When the user clicks the Create button $('#CREATE_BTN')

fileBrowseElementFileArray = $('#P3_FILE_PAYLOAD')[0].files;

uploadSelectedFile(fileBrowseElementFileArray);

Code located in Function and Global Variable Declaration (invoked by the button click)

const htmldb_delete_message='Are you certain that you want to delete this image?';

function uploadSelectedFile(fileBrowseElementFileArray)
{ 
   if ( $(fileBrowseElementFileArray).length > 0) 
   {     
       const fileName = $(fileBrowseElementFileArray)[0].name;
       const fileType = $(fileBrowseElementFileArray)[0].type;
       const fileReader = new FileReader();
       
       fileReader.readAsDataURL( $(fileBrowseElementFileArray)[0] );
       
       fileReader.onload = function(fileReaderProgressEvent) 
       {
           const fileContent = fileReaderProgressEvent.target.result;
           
           let progressSpinner = apex.util.showSpinner();
           
           apex.server.process( 'UPLOAD_FILE',
                               {
                                   p_clob_01: fileContent,
                                   pageItems: "#P3_FILE_NAME,#P3_FILE_MIME_TYPE,#P3_FILE_WAS_RESIZED,#P3_FILE_COMMENTS,#P3_FILE_TAGS"
                               }, 
                               {
                               dataType: "text", 
                               success: function( data )  
                               {
                                   let responseArray = data.split('~');
                                   let overallStatus = responseArray[0];
                                   if ( overallStatus === 'Success' )
                                   {
                                       apex.message.alert( responseArray[1], 
                                                           function()
                                                           {
                                                               apex.submit({ request:"FILE_UPLOAD_SUCCESS" });
                                                           } );
                                   }
                                   else
                                   {
                                       apex.message.clearErrors();
                                       apex.message.showErrors( [{
                                               type: "error",
                                               location: "page",
                                               message: responseArray[1],
                                               unsafe: false
                                           }] );
                                   }
                               },
                               error: function( jqXHR, textStatus, errorThrown ) 
                               {
                                   apex.message.clearErrors();
                                   apex.message.showErrors( [{
                                           type: "error",
                                           location: "page",
                                           message:jqXHR.status + ': ' + jqXHR.responseText,
                                           unsafe: false
                                       }] );
                               }
                               }).always( function()
                                           {
                                               $(progressSpinner).remove();
                                           }) ;
       }

   }
}

The UPLOAD_FILE AJAX PL/SQL (Invoked by uploadSelectedFile JS )

DECLARE

   DEFAULT_CHARACTER_SET CONSTANT SIMPLE_FILE_UPLOAD.FILE_CHAR_SET%TYPE := 'UTF-8';
   
   lblb_FileAsBlob BLOB;
   
   lclb_FileDataURL CLOB;
   
   ls_CLOBChunk     VARCHAR2(30000);
   
BEGIN

   DBMS_LOB.CREATETEMPORARY( lob_loc => lclb_FileDataURL, 
                             cache   => false, 
                             dur     => DBMS_LOB.SESSION );
                             
   lclb_FileDataURL := apex_application.g_clob_01;
   
   DBMS_LOB.CREATETEMPORARY( lob_loc => lblb_FileAsBlob, 
                             cache   => false, 
                             dur     => DBMS_LOB.SESSION );
                             
   lblb_FileAsBlob := apex_web_service.CLOBBase642BLOB( p_clob => lclb_FileDataURL );
   
   INSERT INTO SIMPLE_FILE_UPLOAD
   ( FILE_NAME, FILE_MIME_TYPE, FILE_CHAR_SET, FILE_CREATE_UPDATE, BLOB_FILE_PAYLOAD, CLOB_FILE_PAYLOAD, FILE_COMMENTS )
   VALUES 
   ( :P3_FILE_NAME, :P3_FILE_MIME_TYPE, DEFAULT_CHARACTER_SET, SYSTIMESTAMP, 
     lblb_FileAsBlob, lclb_FileDataURL, :P3_FILE_COMMENTS );
     
   DBMS_LOB.FREETEMPORARY( lob_loc => lblb_FileAsBlob );
   DBMS_LOB.FREETEMPORARY( lob_loc => lclb_FileDataURL );
   
   HTP.PRN( 'Success~File was successfully Uploaded' );
   
EXCEPTION

   WHEN OTHERS THEN
   
       HTP.PRN( 'Error~An Unrecoverable Error was Encountered Saving the Photo<br><br>' || SQLERRM );
END;

Anyone spot anything I've missed here?