ADF Faces File Uploading – It is really that simple!

One particularly type of interaction in web applications is typically a little bit tricky. Requiring additional analysis of the frameworks used. For me personally it was even the way to get started with Java technology (Jason Hunter’s Servlet Programming – that’s where for me it all began). I am talking about File Uploading. Functionality required in many applications, and frequently causing some headaches. I am working on an ADF project where we are considering offering an "Excel upload’ facility as method for getting data into the application. Doing some initial investigations, it struck me how extremely simple and straightforward the implementation of file upload with ADF Faces really is!

ADF Faces File Uploading - It is really that simple! adffileupload1 

The steps:....

  • set the usesUpload property of the af:form element to true
  • add an af:inputFile element to the form
  • bind the value attribute of this inputFile to a managed bean property of type UploadedFile (oracle.adf.view.faces.model.UploadedFile)
  • write code in the setter method for this property to actually do something with the uploaded file contents

And this is all you need to do! Let’s create a simple example that will serve as our stepping stone for uploading CSV and Excel files. We will create a simple application that can upload text files and display their contents and several file details:

ADF Faces File Uploading - It is really that simple! adffileupload2

Let’s first create a new JDeveloper Application with a new Project. In this project, create a new JSF page (FileUpload.jspx).

Use the af:form tag instead of the h:form and set the usesUpload attribute to true:

<af:form usesUpload="true"> 

Add an inputFile element: 

<af:inputFile label="File to Upload" columns="90" 
value="#{FileProcessor.uploadedFile}"/>
 

and tie its value attribute to a managed bean – that we will create in just a moment. 

Add a PanelForm with a number of fields to display the properties of the uploaded file:

<af:panelForm>
<af:inputText label="File Name" value="#{FileProcessor.filename}" readOnly="true"/>
<af:inputText label="File Size" value="#{FileProcessor.filesize}" readOnly="true"/>
<af:inputText label="File Type" value="#{FileProcessor.filetype}" readOnly="true"/>
<af:inputText label="File Contents" value="#{FileProcessor.filecontents}" columns="220" rows="30" />
</af:panelForm>

Create the Java Class that will handle the uploaded file:

package nl.amis.adffaces.files;

import java.io.IOException;

import oracle.adf.view.faces.model.UploadedFile;

public class FileProcessor {
private UploadedFile uploadedFile;
private String filename;
private long filesize;
private String filecontents;
private String filetype;

public FileProcessor() {
}

public void setUploadedFile(UploadedFile uploadedFile) {
this.uploadedFile = uploadedFile;
this.filename = uploadedFile.getFilename();
this.filesize = uploadedFile.getLength();
this.filetype = uploadedFile.getContentType();
try {
this.filecontents = parseISToString(uploadedFile.getInputStream());
} catch (IOException e) {
// TODO
}
}

public UploadedFile getUploadedFile() {
return uploadedFile;
}

public void setFilename(String filename) {
this.filename = filename;
}

public String getFilename() {
return filename;
}

public void setFilesize(long filesize) {
this.filesize = filesize;
}

public long getFilesize() {
return filesize;
}

public void setFilecontents(String filecontents) {
this.filecontents = filecontents;
}

public String getFilecontents() {
return filecontents;
}

public void setFiletype(String filetype) {
this.filetype = filetype;
}

public String getFiletype() {
return filetype;
}

// from: http://www.bubble-media.com/cgi-bin/articles/archives/000038.html

public String parseISToString(java.io.InputStream is) {
java.io.DataInputStream din = new java.io.DataInputStream(is);
StringBuffer sb = new StringBuffer();
try {
String line = null;
while ((line = din.readLine()) != null) {
sb.append(line + "\n");
}
} catch (Exception ex) {
ex.getMessage();
} finally {
try {
is.close();
} catch (Exception ex) {
}
}
return sb.toString();
}
}
 

And finally configure the FileProcessor managed bean in the faces-config.xml file.

<managed-bean>
<managed-bean-name>FileProcessor</managed-bean-name>
<managed-bean-class>nl.amis.adffaces.files.FileProcessor</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>

Now we can run the JSF page. We can press the browse button, select a file, press the Start Upload button and have the file uploaded to the application server. The FileProcessor Bean’s setUploadedFile method is invoked and the properties and contents are extracted from the UploadedFile object and set on the other bean properties.

Resources

Download JDeveloper 10.1.3.2 Application: ADFFacesUploadFile.zip.

26 Comments

  1. Bayat October 9, 2011
  2. vosime October 4, 2011
  3. kunal September 20, 2011
  4. Sombit September 13, 2011
  5. venkat February 15, 2010
  6. venkat February 15, 2010
  7. Fernando September 25, 2009
  8. SMT June 5, 2009
  9. Marko April 6, 2009
  10. Suhana Redzwan February 16, 2009
  11. Aldrino September 9, 2008
  12. Ash Manukyan April 29, 2008
  13. Ashwini April 17, 2008
  14. itu October 3, 2007
  15. itu October 2, 2007
  16. Lucas Jellema September 5, 2007
  17. Robert September 5, 2007
  18. Lucas Jellema September 4, 2007
  19. Robert September 4, 2007
  20. Meenackshi August 17, 2007
  21. Peter Moh August 15, 2007
  22. Peter Moh August 15, 2007
  23. Lucas Jellema August 15, 2007
  24. Meenackshi August 15, 2007
  25. Dave Freyer August 2, 2007
  26. p3t0r July 15, 2007