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.
