dinsdag 6 november 2012

Upload specific file types (images only) in ADF

Use case:

I have this ADF project where the user had the possibility to upload .jpg and .png files into your ADF app.


My Solution: 

What you need before we begin: A bean and a page or fragment.

 

1) Let's start by adding this tag:
<af:inputFile label="Logo" id="if1" />
Then add normal command button.
 <af:commandButton text="Upload" id="cb6" />
2) Now add this attribute to your bean :
private UploadedFile screenshotFile;
and create/generate the getter and setter:
    public void setScreenshotFile(UploadedFile screenshotFile) {
        this.screenshotFile = screenshotFile;
    }

    public UploadedFile getScreenshotFile() {
        return screenshotFile;
    }

3) Go back to your page and select the af:inputfile tag.  Now go to your property window and select the 'value' field and open the Expression Builder. Navigate to 'ADF Managed Beans' , choose the correct scope folder and then your bean. Somewhere in that list you should find the attribute you just added. Select it.

4) Go back to your bean and add the following method :
public String processUpload() {
        UploadedFile myfile = this.getScreenshotFile();
        String filetype = myfile.getContentType();
        String fileExt = filetype.substring(filetype.lastIndexOf("/")+1);
        if(fileExt.equals("jpeg") || fileExt.equals("png"))
        {
            FacesContext fctx = FacesContext.getCurrentInstance();
            ServletContext servletCtx =
                (ServletContext)fctx.getExternalContext().getContext();
            String imageDirPath = servletCtx.getRealPath("/");
            try {
                InputStream inputStream = myfile.getInputStream();
                BufferedImage input = ImageIO.read(inputStream);
   
                File outputFile =
                    new File(imageDirPath + "/screenshots/"+myfile.getFilename());        
                ImageIO.write(input, "PNG", outputFile);
                              
            } catch (Exception ex) {
                ex.printStackTrace();
            }
            JSFUtils.addFacesInformationMessage("Successfully uploaded: " + myfile.getFilename() +
                                 " (" + myfile.getLength() + " bytes)");
        }
        else
        {
            JSFUtils.addFacesInformationMessage("You can only upload .png and .jpg files!");
        }
       
        return null;
    }
Note that I have a folder 'screenshots' in the Web Content of my ViewController.
This method will process the upload and save the screenshot to the screenshot folder.

5) Let's go back to our page, select the command button, go to the property window. Go to 'Action' and select 'Edit'. Select your bean and the method you just added.
 
6) Almost done now! On your page you should have an <af:form> tag.
Just add usesUpload="true" so you would have something like :
<af:form id="f1" usesUpload="true">
If you are using a taskflow with page fragments, check the page where you dragged your TF on. The form tag should be there.

7) For the last step, right click your ViewController and select 'New'.

Select 'Weblogic Deployment Descriptor'.


Select weblogic.xml and press next until the wizard disappears.
This file will be added to ViewController > Web Content > WEB-INF. Open it.


 Check the box like in the picture above and test the upload function!



Notes

  • I'm using JSFUtils to display an popup with error, info,... messages. If you want to use it as well, it can be find here: http://fusionsuperhero.blogspot.be/2011/06/adfutils-and-jsfutils.html
  • I'm checking the file extension in order to ensure that only .jpg and .png can be uploaded. Of course you can change it to whatever you want.
 






2 opmerkingen:

  1. thanks for great post, but i don't know where is "pnlUploadForm.setVisible(false)" from?

    BeantwoordenVerwijderen
    Reacties
    1. That is the binding from the panelFormLayout where your inputFile and commandButton are in (simular to step 3).
      But it's not mandatory for this. In my use case I was forced to make the upload functionality invisible when the first upload was successful.
      So in other words, you can leave that line out (will update my code!). Thanks for the reply!

      Verwijderen