Geek Answers Handbook

Use dropzone with JSF

I would like to know how to use dropzone.js with JSF to upload a file. The documentation ( http://www.dropzonejs.com/#usage ) states that using dropzone is similar to using:

<input type="file" name="file" />

But I do not know how to implement the server side in JSF to get the file and save it to disk.

+4
source share
1 answer

It seems that you do not quite understand that JSF in the context of this question is simply an HTML code generator. JSF offers a <h:inputFile> component that generates an HTML element <input type="file"> .

Try it yourself:

 <h:form id="uploadForm" enctype="multipart/form-data"> <h:inputFile id="file" value="#{bean.file}" /> <h:commandButton id="submit" value="submit" /> </h:form>

If you open the JSF page in a web browser and do rightclick and View Page Source, you should see something like this:

 <form id="uploadForm" name="uploadForm" method="post" action="/playground/test.xhtml" enctype="multipart/form-data"> <input type="hidden" name="uploadForm" value="uploadForm" /> <input id="uploadForm:file" type="file" name="uploadForm:file" /> <input type="submit" name="uploadForm:submit" value="submit" /> <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="3646344859491704387:-5449990057208847169" autocomplete="off" /> </form>

Look, there is your <input type="file"> element!

Now, if we configure Dropzone according to its documentation (and you install the dropzone.js file in your JSF project according to the instructions in How to link to the CSS / JS / image resource in the Facelets template? ), Then we should end up on the JSF page something like this :

 <h:head> ... <h:outputScript name="dropzone.js" /> <h:outputScript>Dropzone.options.uploadForm = { paramName: "uploadForm:file" };</h:outputScript> </h:head> <h:body> <h:form id="uploadForm" enctype="multipart/form-data" styleClass="dropzone"> <div class="fallback"> <h:inputFile id="file" value="#{bean.file}" /> <h:commandButton id="submit" value="submit" /> </div> </h:form> </h:body>

The bean looks like this:

 @Named @RequestScoped public class Bean { private Part file; public void save() throws IOException { String fileName = file.getSubmittedFileName(); String contentType = file.getContentType(); long size = file.getSize(); InputStream content = file.getInputStream(); // ... } public Part getFile() { return file; } public void setFile(Part file) throws IOException { this.file = file; save(); } }

JSF takes into account 3 things:

  • The Dropzone paramName paramName must be set exactly to the name generated <input type="file"> element, which is located in uploadForm:file in the above example.
  • The components of the JSF input file and command buttons must be wrapped in an element with Dropzone-specific class="fallback" in order to be hidden (and provide a reserve for JavaScript / Ajax-deficient clients). Do not delete them, otherwise JSF will refuse to process the downloaded file, because it needs to complete its task based on the component tree.
  • The save() method is called directly by the installer. This is rather suspicious, but since Dropzone does not allow you to directly initiate a bean action method, this is the easiest workaround. Another workaround is to attach the valueChangeListener to <h:inputFile> and the event queue for the INVOKE_APPLICATION phase according to How to get updated model values ​​in the valueChangeListener method?

Perhaps the next question: "How to save it?". In this case, continue here:

+6
source

More articles:


All Articles