Overview

This document explains about how to preview multiple blob contents while uploading using file browser element in Oracle Apex.

Technologies and Tools Used

The following technology has been used to preview blob contents in Oracle APEX,

  • Oracle Apex
  • PL/SQL
  • Javascript

Use Case

If a requirement arises to preview multiple uploaded files before getting stored into the database. We can use following steps to achieve this functionality.

  • First method can be used to achieve this using Javascript functions and file reader API.
  • Second method can be used to achieve this using PL/SQL Dynamic region and Utl packages.

Steps with Screenshot

Steps to be followed,

Step 1:  Create a new page with four page items (file browser,file type,Mime type,Charset) and change the storage type of file browser as “Table APEX_APPLICATION_TEMP_FILES”

                                                            

Step 2:  Create a new static region to preview the uploaded blob content and provide static id as “previewObject”

 

Step 3: Paste the following code in Page level function and global variable declaration editor.

Code:

window.onload = function () {

var fileUpload = document.getElementById(“P52_DOWNLOAD”);

fileUpload.onchange = function () {

if (typeof (FileReader) != “undefined”) {

var objPreview = document.getElementById(“previewContainer”);

objPreview.innerHTML = “”;

var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.pdf)$/;

for (var i = 0;i<fileUpload.files.length; i++) {

var file = fileUpload.files[i];

if(regex.test(file.name.toLowerCase())) {

var reader = new FileReader();

reader.onload = function (e) {

var element= document.createElement(“object”);

element.height = “300”;

element.width = “300”;

element.data = e.target.result;

dvPreview.appendChild(element);

}

var g=reader.readAsDataURL(file);

} else {

apex.message.showErrors([

{

 type:       “error”,

 location:   [ “page”, “inline” ],

 pageItem:   “P52_DOWNLOAD”,

 message:    “Inavlid file format”,

 unsafe:     false

}])

objPreview.innerHTML = “”;

return false;

}}

}

else{

 apex.message.showErrors([

 {

  type:       “error

  location:   [ “page”, “inline” ],

  pageItem:   “P52_DOWNLOAD”,

  message:    ” Try to re-upload with specified file format.”,

  unsafe:     false

  }]);

 }};

There is an alternate way to achieve this same functionality as follows,

Step 4: Create new Pl/SQL dynamic content region and paste the following code as source of the region.

Code:

DECLARE

   v_blob    BLOB;

   l_step    number:=22500;

   l_count  number :=0;

   l_file_name varchar2(500);

   l_mime_type VARCHAR2(100);

   l_file_names apex_t_varchar2;

BEGIN

if (:P52_DOWNLOAD is not null) then

l_file_names := apex_string.split (

                        p_str => : P52_DOWNLOAD,

                        p_sep => ‘:’ );        

for i in 1 .. l_file_names.count loop

select blob_content,MIME_TYPE,filename

into v_blob,l_mime_type,l_file_name

from apex_application_temp_files

where name = l_file_names(i);

DBMS_LOB.OPEN(v_blob, DBMS_LOB.LOB_READONLY);

 htp.p( ‘<embed src=”data:’||l_mime_type||’;base64,’ );

 for i in 0 .. trunc((dbms_lob.getlength(v_blob) – 1 )/l_step) loop

htp.p(utl_raw.cast_to_varchar2(utl_encode.base64_encode(dbms_lob.substr(v_blob, l_step, i * l_step + 1))));

end loop;

htp.p(‘” height=”300″ width=”300″ ><p>’||l_file_name||'</p>’);

DBMS_LOB.CLOSE(v_blob);

End loop;

 else

 htp.p(‘Upload a PDF/Image file and view Here’||:P52_DOWNLOAD);

end if;

 EXCEPTION WHEN NO_DATA_FOUND

 THEN

 v_blob:=EMPTY_BLOB();

 WHEN OTHERS THEN

raise_application_error(‘-20000’,sqlerrm);

htp.p(‘There was an error displaying the BLOB file, Sorry’);

END;

Output:

Conclusion:

This is all about how to preview multiple blob contents while uploading using file browser, which helps ends users to review their documents before getting stored into the database. We can do further customization by centralizing the above code as the application process which will provide accessibility to all the APEX pages.

Recent Posts

Start typing and press Enter to search