Chunked Multiple File Upload with AJAX in Oracle APEX

<span style="font-size:22px"><h2>Chunked Multiple File Upload with AJAX in Oracle APEX</h2></span>

Chunked Multiple File Upload with AJAX in Oracle APEX

You need a place to store Chunked Multiple File Upload
You can insert the uploaded files directly into a table, or you can use a temporary collection as I did in the demo. I started collecting UPLOADED_FILES in an After Header PL / SQL process.

Steps To How To Chunked Multiple File Upload with AJAX

1. Create A New Blank Page- Name- Multiple File Upload

2. You Need A Place To Store Uploaded Files You Can Insert The Uploaded Files Directly Into A Table, Or You Can Use A Temporary Collection As I Did In The Demo. I Started Collecting Uploaded_files In An After Header Pl / Sql Process.

Create A New Region-        Name- Uploaded Files
       Type- Interactive Report
       Source Type- Sql Query >> Paste The Following Sql Code

	                    
                        SELECT seq_id,
      'UPLOADED_FILES'                 AS collection_name,
      c001,
      c002,
      DBMS_LOB.getlength (blob001)     AS file_size,
      DBMS_LOB.getlength (blob001)     AS blob001,
      seq_id                           AS delete_file
 FROM apex_collections
WHERE collection_name = 'UPLOADED_FILES'

Template- Standard
Static Id- Report

3. Create A File Browse… Page Item, Name- P92_FILE_UPLOAD
Custom Attributes- multiple

Browse A File On The Page ... Create The Item And Allow It To Select Multiple Files. You Can Do This By Placing Multiple In The Custom Attribute Page Item Property.

4. Create A New Page Item, Name- P92_DELETE_FILE_ID

5. Create A Button, Button Name- UPLOAD_FILE

6. Create a Process, Point- After Header
PL/SQL Code- Paste The Following Sql Code

	                    
                        DECLARE
   lco_collection_name   CONSTANT apex_collections.collection_name%TYPE
                                      := 'UPLOADED_FILES' ;
BEGIN
   IF NOT apex_collection.collection_exists (lco_collection_name)
   THEN
       apex_collection.create_collection (
           p_collection_name   => lco_collection_name);
   END IF;
END;

7. Create a dynamic action on the Upload File button. Name- Collection

       Event- Click        Selection Type- Button
       Button- UPLOAD_FILE

       Client-side Condition-
       Type- JavaScript expression
       JavaScript Expression-

	                    
                        fileInputElem.files.length != 0

Action- Execute JavaScript Code

	                    
                            spinner = NEW Spinner(spinOptions).spin(spinTargetElem);
   fileIndex = 0;
   uploadFile(fileIndex);

I Created A Button That Is Responsible For Starting The Process Of Uploading Files To The Server Don't Let The Button Submit The Page - Define Its Action By Dynamic Action.

8. The Upload_file Ajax Callback Process Uploadfile Calls The Upload_file Ajax Callback Process From The Javascript Function. This Creates A Blob Variable From The F01 Array And Adds A Member To The Uploaded_files Collection.

Create Ajax Callback Processes, Name- UPLOAD_FILE
PL/SQL Code- Paste The Following Sql Code

	                    
                        DECLARE
   lco_collection_name   CONSTANT apex_collections.collection_name%TYPE
                                      := 'UPLOADED_FILES' ;
   l_blob                         BLOB;
   l_filename                     VARCHAR2 (200);
   l_mime_type                    VARCHAR2 (200);
   l_token                        VARCHAR2 (32000);
BEGIN
   l_filename := APEX_APPLICATION.g_x01;
   l_mime_type := NVL (APEX_APPLICATION.g_x02, 'application/octet-stream');
   -- build BLOB from f01 30k array (base64 encoded)
   DBMS_LOB.createtemporary (l_blob, FALSE, DBMS_LOB.session);
   FOR i IN 1 .. APEX_APPLICATION.g_f01.COUNT
   LOOP
       l_token := wwv_flow.g_f01 (i);
       IF LENGTH (l_token) > 0
       THEN
           DBMS_LOB.append (
               dest_lob   => l_blob,
               src_lob    =>
                   to_blob (
                       UTL_ENCODE.base64_decode (
                           UTL_RAW.cast_to_raw (l_token))));
       END IF;
   END LOOP;
   -- add collection member (only if BLOB is not null)
   IF DBMS_LOB.getlength (l_blob) IS NOT NULL
   THEN
       apex_collection.add_member (
           p_collection_name   => lco_collection_name,
           p_c001              => l_filename,
           p_c002              => l_mime_type,
           p_blob001           => l_blob);
   END IF;
   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;

🔗 Download a JS file by clicking the download button below.-
URL-Download

10. After downloading the file, upload it to the Static Application Files from the share component of your application.

11. Copy the reference name of the file

I will come back to the edit page again.

12. Go to Page Properties and paste the JS file reference name in the JavaScript File URLs.

	                    
                        #APP_FILES#spin.min.js

13. Copy and paste the following JavaScript code between Function and Global Variable Declaration.

	                    

VAR fileInputElem = document.getElementById('P92_FILE_UPLOAD');
VAR fileIndex = 0;
// builds A js ARRAY FROM LONG STRING
function clob2Array(clob, size, array) {
 loopCount = Math.floor(clob.length / size) + 1;
 for (var i = 0; i < loopCount; i++) {
   array.push(clob.slice(size * i, size * (i + 1)));
 }
 return array;
}
// converts binaryArray to base64 string
function binaryArray2base64(int8Array) {
 var data = "";
 var bytes = new Uint8Array(int8Array);
 var length = bytes.byteLength;
 for (var i = 0; i < length; i++) {
   data += String.fromCharCode(bytes[i]);
 }
 return btoa(data);
}
// a recursive function that calls itself to upload multiple files synchronously
function uploadFile(pFileIndex) {
 var file = fileInputElem.files[pFileIndex];
 var reader = new FileReader();
 reader.onload = (function(pFile) {
   return function(e) {
     if (pFile) {
       var base64 = binaryArray2base64(e.target.result);
       var f01Array = [];
       f01Array = clob2Array(base64, 30000, f01Array);
       apex.server.process(
         'UPLOAD_FILE',
         {
           x01: file.name,
           x02: file.type,
           f01: f01Array
         },
         {
           dataType: 'json',
           success: function(data) {
             if (data.result == 'success') {
               fileIndex++;
               if (fileIndex < fileInputElem.files.length) {
                 // start uploading the next file
                 uploadFile(fileIndex);
               } else {
                 // all files have been uploaded at this point
                 spinner.stop();
                 fileInputElem.value = '';
                 $('#report').trigger('apexrefresh');
               }
             } else {
               alert('Oops! Something went terribly wrong. Please try again or contact your application administrator.');
             }
           }
         }
       );
     }
   }
 })(file);
 reader.readAsArrayBuffer(file);
}
// variables for spin.js
var spinner;
var spinTargetElem = document.getElementById('wwvFlowForm');
var spinOptions = {
 lines: 13
, length: 28
, width: 14
, radius: 42
, scale: 1
, corners: 1
, color: '#000'
, opacity: 0.25
, rotate: 0
, direction: 1
, speed: 1
, trail: 60
, fps: 20
, zIndex: 2e9
, className: 'spinner'
, top: '50%'
, left: '50%'
, shadow: false
, hwaccel: false
, position: 'absolute'}

14. Change your page item name and ID to your liking in the code.

The work of uploading our files is almost over.
Now we will discuss in detail how to delete the uploaded file and how to save it in the database.

15. We will go to the DELETE_FILE column to delete the tube row of the Apex Collection.        Type- Link
       Target- javascript:$s('P92_DELETE_FILE_ID', #SEQ_ID#);void(0);
       Link Text-

Now we will see if the ID goes right into the Delete item by clicking on the Delete button

16. If the ID in the deleted item is changed correctly then we are no longer on the item Name- delete collection
Action- Execute JavaScript Code

	                    
                        var confirmDialog = confirm('Are you sure you want to delete this file?');
if (confirmDialog == true) {
 spinner = new Spinner(spinOptions).spin(spinTargetElem);
 
 apex.server.process(
   'DELETE_FILE',
   {
     x01: $v('P92_DELETE_FILE_ID')
   },
   {
     dataType: 'json',
     success: function(data) {
       spinner.stop();
       if (data.result == 'success') {
         $('#report').trigger('apexrefresh');
       } else {
         alert('Oops! Something went terribly wrong. Please try again or contact your application administrator.');
       }
     }
   }
 );
} else {
 $s('P92_DELETE_FILE_ID', '');
}

orrectly change your report ID and item name in the code.

17. Now we will again create an Ajax callback process, Name- DELETE_FILE
PL/SQL Code- Paste The Following Sql Code

	                    
                        BEGIN
   apex_collection.delete_member (
       p_collection_name   => 'UPLOADED_FILES',
       p_seq               => APEX_APPLICATION.g_x01);
   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;

ur deletion process is almost over, now we will see if it is being deleted properly by clicking on the Delete button.

Now we will save the data in Apex Collection. Chunked Multiple File Upload

18. We will first take a button to save the data in the Apex collection. Name-save data

19. I will create a process, Name-save data Name - SAVE_DATA
Name-save data PL/SQL Code- Paste The Following Sql Code

	                    
                        DECLARE
   -- get files data from saved apex_collection
   CURSOR l_cur_files IS
       SELECT c001        AS filename,
              c002        AS mime_type,
              d001        AS date_created,
              n001        AS file_id,
              blob001     AS file_content
         FROM apex_collections
        WHERE collection_name = 'UPLOADED_FILES';
BEGIN
   -- loop over files cursor
   FOR l_rec_files IN l_cur_files
   LOOP
       -- do whatever processing is required prior to the insert into your own table
       INSERT INTO custom_table (filename,
                                 mime_type,
                                 upload_date,
                                 file_content,
                                 fk_id)
            VALUES (l_rec_files.filename,
                    l_rec_files.mime_type,
                    l_rec_files.date_created,
                    l_rec_files.file_content,
                    :1);
   END LOOP;
   -- clear original apex collection (only if exist)
   IF apex_collection.collection_exists (
          p_collection_name   => 'UPLOADED_FILES')
   THEN
       apex_collection.delete_collection (
           p_collection_name   => 'UPLOADED_FILES');
   END IF;
END;

Change the collection name, item name as you like in the code

ur work is almost done. Now we will first upload the multiple file, then delete a data and save all the data in the Apex collection to the database. Chunked Multiple File Upload.
e hope that after watching the entire video / post, you too can easily use the whole process of uploading multiple files in your application, by commenting on any problem. Chunked Multiple File Upload

🔗 Demo Application-
URL- Demo Application
Username - demo, Pass- demo

I hope everyone will like it. Please watch the full video,
Comment on any of your problems, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable. Visit my blog site, new technology related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
Please stay tuned by subscribing to the YouTube channel, and encourages new videos to be uploaded.Chunked Multiple File Upload
=================
Visit my site to get more collaborative posts about Oracle Apex and subscribe to my YouTube channel. Thanks.Chunked Multiple File Upload
Comment on any of your issues, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable.Chunked Multiple File Upload
Visit my blog site, new technology-related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.Chunked Multiple File Upload
==============================

🙍🏾‍ Md jABER HOSSEN
📲 Mobile- +8801760688286
📨 Email- jaberit786@gmail.com
🌐 FB- facebook.com/mdjaber.hossen1
Please Subscribe to My Channel

Many thanks for visiting the site.