Multiple file upload with Jquery in ADF/Webcenter

Hi All,

File upload in Oracle ADF is done with af:inputFile component.

To implement file upload functionality, follow the below steps:

1. add af:inputFile component to the form.
2. set usesUpload property of the af:form element to true.
3. create binding of inputFile and its valueChangeListener in managed bean.
4. write code to implement file upload and display its content in text area as shown in below example:

fileupload1

standard implementation of inputfile is like

jspx code:

 <af:panelGroupLayout id="pgl1" layout="vertical">
              <af:panelGroupLayout id="pgl2" layout="horizontal">
                <af:inputFile label="Upload File" id="if1"
                              binding="#{pageFlowScope.UploadBean.inputFile}"
                              valueChangeListener="#{pageFlowScope.UploadBean.FileUploadVcListener}"
                              autoSubmit="true"/>
                <af:spacer width="10" height="10" id="s1"/>
                <af:commandButton text="Upload" id="cb1"
                                  disabled="#{pageFlowScope.UploadBean.inputFile.value == null ? true : false}"
                                  partialTriggers="if1"
                                  actionListener="#{pageFlowScope.UploadBean.onUploadFile}"/>
              </af:panelGroupLayout>
              <af:spacer width="10" height="10" id="s3"/>
              <af:panelFormLayout id="pfl1" partialTriggers="cb1">
                <af:inputText label="File Name" id="it2" columns="30"
                              readOnly="true"
                              value="#{pageFlowScope.UploadBean.fileName}"/>
                <af:inputText label="File Content" id="it1" rows="10"
                              columns="100" readOnly="true"
                              value="#{pageFlowScope.UploadBean.fileContent}"/>
              </af:panelFormLayout>
              <af:spacer width="10" height="10" id="s2"/>
            </af:panelGroupLayout>

Managed Bean Code:

import java.io.IOException;
import java.io.InputStream;
import java.io.StringWriter;
import javax.faces.event.ActionEvent;
import javax.faces.event.ValueChangeEvent;
import oracle.adf.view.rich.component.rich.input.RichInputFile;
import org.apache.commons.io.IOUtils;
import org.apache.myfaces.trinidad.model.UploadedFile;

public class UploadBean {
    private RichInputFile inputFile;
    private UploadedFile file;
    private String fileContent;
    private String fileName;
    private InputStream inputstream;

    public UploadBean() {
        super();
    }

    public void FileUploadVcListener(ValueChangeEvent valueChangeEvent) {
        resetValue();
        file = (UploadedFile)valueChangeEvent.getNewValue();
        try {
            inputstream = file.getInputStream();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public void onUploadFile(ActionEvent actionEvent) {
        if (file != null && inputstream != null) {
            fileName = file.getFilename();
            StringWriter writer = new StringWriter();
            try {
                IOUtils.copy(inputstream, writer);
                fileContent = writer.toString();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        if (inputFile != null) {
            inputFile.resetValue();
            inputFile.setValid(true);
        }
    }

    public void resetValue() {
        if (fileName != null)
            fileName = null;
        if (fileContent != null)
            fileContent = null;
        if (inputstream != null)
            inputstream = null;
    }

    public void setInputFile(RichInputFile inputFile) {
        this.inputFile = inputFile;
    }

    public RichInputFile getInputFile() {
        return inputFile;
    }

    public void setFile(UploadedFile file) {
        this.file = file;
    }

    public UploadedFile getFile() {
        return file;
    }

    public String getFileContent() {
        return fileContent;
    }

    public String getFileName() {
        return fileName;
    }
}

Now if you want to have validation then you do validation for file type,file size or any other validations in ValueChangeListener. One of biggest problem is , in large applications, File will be uploaded to a temporary location and if the ere is large user then huge sizes of files will be stored in server location. That can create issue.Because ADF Faces will temporarily store incoming files (either on disk or in memory), by default it limits the size of acceptable incoming requests to avoid denial-of-service attacks that might attempt to fill a hard drive or flood memory with uploaded files. By default, only the first 100 kilobytes in any one request will be stored in memory. Once that has been filled, disk space will be used. Again, by default, that is limited to 2,000 kilobytes of disk storage for any one request for all files combined. Once these limits are exceeded, the filter will throw an EOFException . Files are, by default, stored in the temporary directory used by java.io.File.createTempFile() , which is usually defined by the system property java.io.tmpdir . Obviously, this will be insufficient for some applications, so you can configure these values using three servlet context initialization parameters:

  <context-param>
    <!-- Maximum memory per request (in bytes) -->
    <param-name>oracle.adf.view.faces.UPLOAD_MAX_MEMORY</param-name>
    <!-- Use 500K -->
    <param-value>512000</param-value>
  </context-param>
  <context-param>
    <!-- Maximum disk space per request (in bytes) -->
    <param-name>oracle.adf.view.faces.UPLOAD_MAX_DISK_SPACE</param-name>
    <!-- Use 5,000K -->
    <param-value>5120000</param-value>
  </context-param>
  <context-param>
    <!-- directory to store temporary files -->
    <param-name>oracle.adf.view.faces.UPLOAD_TEMP_DIR</param-name>
    <!-- Use an ADFUploads subdirectory of /tmp -->
    <param-value>/tmp/ADFUploads/</param-value>
  </context-param>

  <!-- This filter is always required by ADF;  one of its functions is 
          file upload. -->
  <filter>
    <filter-name>adfFaces</filter-name>
    <filter-class>oracle.adf.view.faces.webapp.AdfFacesFilter</filter-class>
  </filter>

. Ideally, we should have client side validations , which will ignore all irrelevant files.

So if you use this component, you should delete your file after cancel upload process or after persist the file from temporary locations.

So today, we will discuss another approach for bypassing this scenario. We will use one jquery plugin to have client side validation for size, extension etc.

I will be using this jquery plugin , There are many, you can choose anyone.

Lets look at implementation now
This will be my jspx page

uploadPng

First thing, you need to include css and JS file as below

 <af:resource type="css"  source="http://hayageek.github.io/jQuery-Upload-File/4.0.10/uploadfile.css"/>
 <af:resource type="javascript" source="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
 <af:resource type="javascript" source="http://hayageek.github.io/jQuery-Upload-File/4.0.10/jquery.uploadfile.min.js"/>

And you need to write js in your page as below

   <af:resource type="javascript">
        var pathArray = window.location.pathname.split('/');
        var secondLevelLocation = pathArray[1];
        var url = '/'+pathArray[1]+'/GetFileServlet';  // this will give you post method call to this url
        $(document).ready(function()     // standard jquery ready function
       {
        $("#fileuploader").uploadFile({ 
        url:url,
        allowedTypes:"jpg,bmp,ppt,pps,pptx,pdf,TXT,txt,doc,docx,rtf,odt,zip,xls,xlsx", // you can define allowed extension type.
        fileName:"myfile",
        showDelete: true,   // if you want to show delete icon for each uploaded file
        statusBarWidth:400,  
        dragdropWidth:600,
        maxFileSize:50000*1024   // add maximum upload size for file.
       });
     });
</af:resource>

We will add div as below

 <div id="fileuploader">Upload</div>

When you upload then call will go to GetFileServlet , which is mapped in web.xml .
I am also using Apache common file upload to handle multitype request.

servlet

You can store these document in db, webcenter content using RIDC. for sample purpose, I am storing these documents in file store
in C drive.

You also need to define mapping of servlet in web.xml as below

urlmapping

Now run the application.

Output

upload11

Now select some files and upload

upload22

great. File uploaded to system.

uploadedd

now upload some invalid file,I tried file with eddx extension and you will get validation happened on client side.

upload555

Now try uploaded with large file. I reduce the size limit

uploaded555

Storing file is file system is just for demo. You should store these files in webcenter content using RIDC.

So it is very simple and easy to use and give lot of freedom to use following features.

jQuery File upload plugin has the following features.
Single File Upload
Multiple file Upload (Drag & Drop)
Sequential file upload
File Restrictions
Localization (Multi-language)
Sending Form Data
Adding HTML elements to progressbar
Custom UI
Upload Events
Delete / Download Uploaded files
Image Preview
Show previous uploads

Well that all. Happy uploading in ADF/webcenter.

Custom session timeout warning popup in Webcenter portal 11.1.1.8 using jquery

Hi All,

Requirement – To show customised session time out warning popup in webcenter portal builder.

Solution- Edit your template-

editpagetemplate

In the composer, open web development and add an html markup anywhere in the template.
Edit that markup and add below code as the value.

Below snippet uses normal javascript.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dialog Box Witout Close Button</title>


</head>
<body>
<div id="dialog"  title="Dialog Title"></div>
<script>
var resetTime_int;
function resetTimer(){
    if(resetTime_int) window.clearTimeout(resetTime_int)
    resetTime_int=window.setTimeout(function (){
    if(document.getElementById('dialog').innerHTML = 'You have ' + (timeoutCount * 3000)/1000 + 'seconds until timeout' ;)     
    location.reload()
    }, 1000*60*2)
}

resetTimer()
document.onmousemove=resetTimer
document.onkeyup=resetTimer
</script>
</body>
</html>

html

Following snippet with Jquery

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dialog Box Witout Close Button</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

</head>
<body>
</head>
<body>
<div id="dialog" style="display:none;" title="Dialog Title"></div>
<script>
var lefttime=3;
var interval;
interval = setInterval('change()',60000);


function change()
{
   lefttime--;
   if(lefttime<=2) {
$( "#dialog" ).dialog( "open" );
return false;

}
}
$("#dialog").dialog({
autoOpen: false,
position: 'center' ,
title: 'session',
draggable: false,
width : 400,
height : 200,
resizable : true,
modal : true,
});

JS

With jquery you can make it more beautiful with these dialog options.

Thats it. You can change the time to show popup for idle user.

Happy learning with Vinay in techartifact

Adding JavaScript to a Page in Oracle ADF

In your ADF web application you may want to use javaScript functions to perform some actions in client side. You can either add inline JavaScript directly to a page or you can import JavaScript
libraries into a page. When you import libraries, you reduce the page content size, the libraries can be shared across pages, and they can be cached by the browser. You
should import JavaScript libraries whenever possible. Use inline JavaScript only for cases where a small, page-specific script is needed.

How to Use Inline JavaScript

1. Add the MyFaces Trinidad tag library to the root element of the page by adding the code

<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
xmlns:trh="http://myfaces.apache.org/trinidad/html">

2.In the Component Palette, from the Layout panel, in the Core Structure group,drag and drop a Resource onto the page .

3. In the Insert Resource dialog, select javascript from the dropdown menu and click OK.

4. Create the JavaScript on the page within the tag.

<af:resource>
function sayHello()
{
alert("Hello, world!")
}
</af:resource>

5. In the Structure window, right-click the component that will invoke the JavaScript,and choose Insert inside component>ADF Faces>Client Listener.

6. In the Insert Client Listener dialog, in the Method field, enter the JavaScript function name. In the Type field, select the event type that should invoke the
function.

Note : You can add CSS as well in resource tag.

Thats it.now enjoy javascript in ADF.

Now why we write plain javascript , when we have such a well documented library like jquery or EXTJS. see how we can do that.

How to Import JavaScript Libraries

Use the af:resource tag to access a JavaScript library from a page. This tag should appear inside the document tag’s metaContainer facet.

1. Inside document tag, add the code below and replace the /path with the relative path to the directory that holds the JavaScript library. for example ,You can add Jquery and EXTJS .

<af:document>
<f:facet name="metaContainer">
<af:resource source="/path"/>
</facet>
<af:form></af:form>
</af:document>

2. Structure window, right-click the component that will invoke the JavaScript,and choose Insert inside component>ADF Faces>Client Listener.

3. In the Insert Client Listener dialog, in the Method field, enter the fully qualified name of the function. For example, if the showAlert
function was in the MyScripts library, you would enter MyScripts.showAlert . In the Type field, select the event type that should invoke the function.

That it. enjoy. Happy coding with Techartifact with Vinay Kumar….. 🙂