Get the file details(Single and Multiple) that are selected using a File Browse Item using JavaScript in Oracle APEX

-

 In this blog I will be explaining, how to get the details of a file(s), selected using a File Browse Item, using JavaScript in Oracle APEX.

For Single File:

1) Create a Region.

2) Create an Item (Type: File Browse) in the Region. (In this example: P1_FILE_BROWSE).

3) Create 3 More items in the page to store the File Name, File Size and File Type.             

    (In this example: P1_FILE_NAME, P1_FILE_SIZE, P1_FILE_TYPE) 

4) Create an On Change Dynamic Action on the P1_FILE_BROWSE item.

5) Create a True Action (Type: Execute JavaScript Code) and paste the below code.

var $filebrowseItem = $("#P1_FILE_BROWSE");

var filebrowseItemLength = $filebrowseItem[0].files.length;

var fileArray = $filebrowseItem[0].files;

if (filebrowseItemLength > 0) {

    for (var i = 0; i < filebrowseItemLength; i++) {
        var fileName = fileArray[i].name;
        var fileSize = fileArray[i].size;
        var fileType = fileArray[i].type;
        
        apex.item( "P1_FILE_NAME" ).setValue( fileName );
        apex.item( "P1_FILE_SIZE" ).setValue( fileSize  + " bytes" );
        apex.item( "P1_FILE_TYPE" ).setValue( fileType );
    }
}
Note: Replace the items P1_FILE_BROWSE, P1_FILE_NAME, P1_FILE_SIZE, P1_FILE_TYPE with the item names in your page.

For Multiple Files:

1) Create a Region (Type: Static Content).

2) Create an Item (Type: File Browse) in the Region. (In this example: P1_FILE_BROWSE_MULTIPLE).

3) Paste the below code in the Source of the Static Content region. 

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:first-child {
  background-color: #e8e8e8;
}

</style>
</head>
<body>
<table class="uploaded-files-tbl">
  <tr>
    <th>File Name</th>
    <th>File Size</th>
    <th>File Type</th>
  </tr>
  <tr>
  <td colspan="3"> No Data Found </td> 
  </td>    
</table>
</body>
</html>
Info: Using the above code we are creating a HTML Table.

4) Create an On Change Dynamic Action on the P1_FILE_BROWSE_MULTIPLE item.

5) Create a True Action (Type: Execute JavaScript Code) and paste the below code.
//To remove the existing rows
$(".uploaded-files-tbl").find("tr:gt(0)").remove();

var $filebrowseItem = $("#P36_FILE_BROWSE_MULTIPLE");

var filebrowseItemLength = $filebrowseItem[0].files.length;

var fileArray = $filebrowseItem[0].files;

if (filebrowseItemLength > 0) {
    for (var i = 0; i < filebrowseItemLength; i++) { 
    
        //to append the file(s) data to the table
        $('.uploaded-files-tbl tr:last').after('<tr><td>'+ fileArray[i].name +'</td><td>'+ fileArray[i].size +'</td><td>'+ fileArray[i].type +'</td></tr>');            
    }    
}

Please refer the below link to know how to insert multiple files to an APEX collection via AJAX. Credits: Nick Buytaert



Click here for DEMO

Happy CODING !!!

Thank you :)


Comments

Post a Comment

Popular posts from this blog

Allow Only Number/Decimal values In a Number/Text Field Using JavaScript in Oracle APEX

-
Image
In this blog I will be explaining how to restrict users from typing only numbers/decimal values in a Number/Text Item in Oracle APEX. 1) Create a Region .    2) Create an Item in the page (Type: Text Field or Number Field ). 3) To allow only Numbers, paste the below code in the Page ->  Execute When Page Loads Section . $("#P30_NUMBER_FIELD_ITEM").keypress(function(event){ event = (event) ? event : window.event; var charCode = (event.which) ? event.which : event.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; });   Note: Replace P30_NUMBER_FIELD_ITEM with your Item name. 4) To allow only Decimal values, paste the below code in the  Page  ->  Execute When Page Loads Section . $("#P30_DECIMAL_FIELD_ITEM").keypress(function(event){ event = (event) ? event : window.event; if ( event.which != 0 && (event.which < 48 || event.which > 57) &am
Read more

Display and Edit CLOB Content in Oracle APEX

-
Image
In this post I will be explaining how to display  and edit a CLOB content in Oracle APEX.  Please follow the below steps: 1) Create a table T_EMPLOYEE CREATE TABLE T_EMPLOYEE ( EMP_ID NUMBER, EMP_NAME VARCHAR2(100), DESCRIPTION CLOB ); 2) Insert the required data into the T_EMPLOYEE table.                           3) Create a page in the application.  (In this example Page - 5) 4) Create another page with the Page Mode as Modal Dialog (In this example Page - 6)   5) Create a region and two items in Page - 6. The Items are:     P6_EMP_ID -> Type -> Hidden  (Value Protected: No)     P6_EMP_DESCRIPTION ->   Type  ->  Text Area   (or) Rich Text Editor 6) Now navigate back to Page - 5 and create a Region ( Type -> Interactive Report ) 7) Paste the below code in the Source -> SQL Query of the Interactive Report SELECT EMP_ID, EMP_NAME, 'Preview' as "PREVIEW" FROM T_EMPLOYEE; 8) Go to the PREVIW column
Read more

Copy the value of an Item to Clipboard in Oracle APEX

-
APEX does not provide an inbuilt functionality to copy the value of a page item to clipboard . Use my plug-in Copy To Clipboard to achieve or if it has to be achieved via code p lease follow the below steps :- For visible Items: 1) Create an  Item in the APEX page. (In this example the Item is P1_ITEM) 2) Create a button. (In this example the button is P1_COPY) 3) Create a Dynamic action          Event:  Click         Selection Type:  Button         Button:  P1_COPY 4) Create a True Action      Action:  Execute JavaScript Code      Paste the below code:        /*to select the text field*/ $("#P1_ITEM").select(); /*to copy the text inside the text field*/ document.execCommand("copy"); /*to show success message (Optional)*/ apex.message.showPageSuccess('Copied to Clipboard!'); For hidden Items: Step 1,2 and 3 is similar 4) Create a True Action      Action:  Execute JavaScript Code      Paste the below code:        /*
Read more