Create an ADF page to upload a text document and display its content in the ADF page itself

In this exercise we will create and ADF page which will allow us to upload a text file and then on click of a button it will display the content of the text file in the output window of the ADF page.

This is how the page will look like



If the input document uploaded is a text document it will display the content of the text in the output box



If any document other than .txt will be uploaded it will give following response.



You can put some additional logic as you can see i have put a print button also but in this exercise we will just see the basic functionality as how we can create a page which will allow us to upload a text file and then display its content.

Now first thing is drag and drop a Input File component in your page



Next is create a binding for the input file and a ValueChangeListener in the managed bean



Next is drag and drop a richtext Editor in your page and create a binding variable.

Back in your bean you can see following variables created for you.

private RichInputFile upload;
private RichTextEditor richOutput;

and following method

public void onFileUploadValueChangeListener(ValueChangeEvent valueChangeEvent) {
// Add event code here...

}

The reason we have used valueChangeEvent is that on uploading the document the local value of variable will change which confirms to ValueChangeEvent definition

A ValueChangeEvent is a notification that the local value of the source component has been change as a result of user interface activity.

So in this method we can get our data which we will upload from the UI

Create a variable to hold the content of uploadedfile

private UploadedFile file;

now get the content of uploaded file in the variable

file = (UploadedFile)e.getNewValue();

Next is to assign this to an inputstream to read the values

So out final method will have following code

public void onFileUploadValueChangeListener(ValueChangeEvent e) {
// Add event code here...
//resetValue();
file = (UploadedFile)e.getNewValue();
try {
inputstream = file.getInputStream();
} catch (IOException z) {
z.printStackTrace();
}
}


Next is how to assign this value to the rich text editor--> for this drag and drop a button and double click on it to define an action for it.

Following is the code for the action

public String cb1_action() {

if (inputstream != null) {
fileName = file.getFilename();

if (!fileName.endsWith("txt")) {

String output =
"This format of data is not allowed, Please upload data in .txt format only";
richOutput.setValue(output);
} else {

StringWriter writer = new StringWriter();
try {

IOUtils.copy(inputstream, writer);

fileContent = writer.toString();

richOutput.setValue(fileContent);
} catch (IOException e) {
e.printStackTrace();
}
}
}
return null;
}

here we have used the following code

if (!fileName.endsWith("txt")) to accept only those file which has a .txt format.

Now since we are not writing to a output file we have create an object for StringWriter

IOUtils.copy(inputstream, writer); Using this command we are copying the content of inputstream to the writer

finally we are getting the content of the uploaded file in fileContent = writer.toString();

and we are assigning the value to the rich text editor in the below code

richOutput.setValue(fileContent);


My overall code looks like this

package Login;


import javax.faces.event.ValueChangeEvent;

import oracle.adf.view.rich.component.rich.input.RichInputFile;

import java.io.*;

import oracle.adf.view.rich.component.rich.input.RichTextEditor;

import org.apache.commons.io.IOUtils;
import org.apache.myfaces.trinidad.model.UploadedFile;

public class Home {
private RichInputFile upload;
private String fileName;
private UploadedFile file;
private String fileContent;
private InputStream inputstream;
private RichTextEditor richOutput;


public void setUpload(RichInputFile upload) {
this.upload = upload;
}

public RichInputFile getUpload() {
return upload;
}

public String cb1_action() {
// Add event code here...
if (inputstream != null) {
fileName = file.getFilename();
// System.out.println(fileName);
if (!fileName.endsWith("txt")) {
// System.out.println("This format of data is not allowed, Please upload data in .txt format only");
String output =
"This format of data is not allowed, Please upload data in .txt format only";
richOutput.setValue(output);
} else {

StringWriter writer = new StringWriter();
try {

IOUtils.copy(inputstream, writer);

fileContent = writer.toString();

richOutput.setValue(fileContent);
} catch (IOException e) {
e.printStackTrace();
}
}
}

return null;
}




public void onFileUploadValueChangeListener(ValueChangeEvent e) {

file = (UploadedFile)e.getNewValue();
try {
inputstream = file.getInputStream();
} catch (IOException z) {
z.printStackTrace();
}
}


public void setRichOutput(RichTextEditor richOutput) {
this.richOutput = richOutput;
}

public RichTextEditor getRichOutput() {
return richOutput;
}
}


There are few things which we can do to further enhance the functionality of this page as we can reset the data in the UI that is right now if you will see the page it will have following display



It is capturing the name of the input file in the UI which we don't want to capture.

Further if you will try to update in this page it will open a new gui for you to update the file



We can reset these value by modifying our code a bit

just add a reset method to reset the fileContent to null

public void reset() {

if (fileContent != null)
fileContent = null;
}

Also after writing the data just reset the value

if (upload != null) {
upload.resetValue();

So the overall code will be

package Login;


import javax.faces.event.ValueChangeEvent;

import oracle.adf.view.rich.component.rich.input.RichInputFile;

import java.io.*;

import oracle.adf.view.rich.component.rich.input.RichTextEditor;

import org.apache.commons.io.IOUtils;
import org.apache.myfaces.trinidad.model.UploadedFile;

public class Home {
private RichInputFile upload;
private String fileName;
private UploadedFile file;
private String fileContent;
private InputStream inputstream;
private RichTextEditor richOutput;


public void setUpload(RichInputFile upload) {
this.upload = upload;
}

public RichInputFile getUpload() {
return upload;
}

public String cb1_action() {

if (inputstream != null) {
fileName = file.getFilename();

if (!fileName.endsWith("txt")) {

String output =
"This format of data is not allowed, Please upload data in .txt format only";
richOutput.setValue(output);
} else {

StringWriter writer = new StringWriter();
try {

IOUtils.copy(inputstream, writer);

fileContent = writer.toString();

richOutput.setValue(fileContent);
} catch (IOException e) {
e.printStackTrace();
}
}
}
if (upload != null) {
upload.resetValue();

}
return null;
}

public void reset() {

if (fileContent != null)
fileContent = null;
}


public void onFileUploadValueChangeListener(ValueChangeEvent e) {

reset();
file = (UploadedFile)e.getNewValue();
try {
inputstream = file.getInputStream();
} catch (IOException z) {
z.printStackTrace();
}
}


public void setRichOutput(RichTextEditor richOutput) {
this.richOutput = richOutput;
}

public RichTextEditor getRichOutput() {
return richOutput;
}
}

Now if you will deploy this code we will get following output

Now you can see that it is not displaying the name of the file and you can further upload a new text file without opening up the new gui for update