ADF File Uplaod and Display in Inline frame or popup

Created a simple application to upload, download files and store in Blog object.

Create a simple database table.

CREATE TABLE FILES
(
  SNO NUMBER(5, 0) NOT NULL
, FILENAME VARCHAR2(50 BYTE) NOT NULL
, FILEBLOB BLOB NOT NULL
, FILETYPE VARCHAR2(20 BYTE) NOT NULL
);

CREATE SEQUENCE FILES_SEQ INCREMENT BY 1 MAXVALUE 9999 MINVALUE 1 CYCLE NOCACHE ORDER;

Create a simple model to store files in database.

 

Created a simple client method to store data in database.

    public void uploadFile(BlobDomain file,String fileName,String fileType){

        Row row = getCreateFileVO().createRow();
        row.setAttribute("Fileblob", file);
        row.setAttribute("Filename", fileName);
        row.setAttribute("Filetype", fileType);
        this.getDBTransaction().commit();
    }

The inputFile component can be placed in either an h:form tag or an af:form tag, but in either case, you have to set the form tag to support file upload. If you use the JSF basic HTML h:form, set the enctype to multipart/form-data. This would make the request into a multipart request to support file uploading to the server. If you are using the ADF Faces af:form tag, set usesUpload to true, which performs the same function as setting enctype to multipart/form-data to support file upload.

Created a simple UI to display files in database and to upload new file.

 

      <af:panelGroupLayout id="pgl1" layout="horizontal">

        <af:inputFile label="Select File:" value="#{managedBean.file}" id="if1"/>
        <af:commandButton text="Upload" id="b1" action="#{managedBean.doUpload}"/>
      </af:panelGroupLayout>

To hold the input file value created a managed bean and create a variable based on  org.apache.myfaces.trinidad.model.UploadedFile interface.

To store data in database we need to convert this file to BlobDomain object.

    private BlobDomain convertToBlobDomain(InputStream in) throws SQLException, IOException {

        BlobDomain blob = new BlobDomain();
        OutputStream out = blob.getBinaryOutputStream();
        writeInputStreamToOutputStream(in, out);
        in.close();
        out.close();
        return blob;
    }

To download file from data base we need to cover the blog object o stream.

if you want to download file then

<af:commandButton value="Download">
  <af:fileDownloadActionListener filename="hello.txt"
      contentType="text/plain; charset=utf-8"
      method="#{bean.getFile}"/>
</af:commandButton>

public void getFile(FacesContext context, OutputStream out) throws IOException{
  OutputStreamWriter w = new OutputStreamWriter(out, "UTF-8"); 

   . . .

  out.write(byteBuffer, 0, b) 

  . . .
}

To display a file in ADF page we need to output stream .

in this example i displaying a file in ADF inline frame.

        <af:panelGroupLayout id="pgl3"  styleClass="AFStretchWidth" >
          <af:inlineFrame id="if2" partialTriggers="t1" source="/servlets/downloadfile?psno=#{managedBean.sno}"   styleClass="AFStretchWidth" inlineStyle="height:500px;"/>
        </af:panelGroupLayout>

Create a simple Servlet and convert the blob data to stream.

Sample UI's

Uploaded a simple PDF and displaying in inline frame.

 

Uploaded a simple Image file.

You can download the sample code.