Verwenden Sie Dropzone mit JSF

Question

Ich würde gerne wissen, wie DropZone.js mit JSF zum Hochladen einer Datei verwenden. In der Dokumentation (http://www.dropzonejs.com/#usage) heißt es, dass Dropzone verwendet, ist wie mit:

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

Aber ich weiß nicht, wie der serverseitige Teil in JSF zu implementieren, um die Datei zu erhalten und speichern sie in der Scheibe.

Answer 1

Es scheint, dass Sie nicht genau erkennen, dass JSF im Kontext dieser Frage nur ein HTML-Code-Generator ist. JSF bietet eine <h:inputFile> Komponente, die ein HTML <input type="file"> Element generiert.

es selbst ausprobieren:

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

Wenn Sie die JSF-Seite in einem Web-Browser öffnen und tun Rechtsklick und Seitenquelltext, dann sollten Sie etwas sehen:

<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> 

Blick , da ist dein <input type="file"> Element!

Wenn wir nun Dropzone konfigurieren pro its documentation (und Sie die dropzone.js Datei in Ihrem JSF-Projekt gemäß den Anweisungen in How to reference CSS/JS/image resource in Facelets template? installieren), dann sollten wir in der JSF-Seite mit etwas am Ende wie folgt:

<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> 

Die Bohne sieht aus wie folgt:

@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(); 
    } 

} 

Es gibt drei Dinge zu berücksichtigen mit JSF zu nehmen:

1. Die Option Dropzone paramName muss genau auf name des generierten Elements <input type="file"> gesetzt werden, das im obigen Beispiel uploadForm:file ist.
2. Die JSF-Eingabedatei und die Befehlsschaltflächenkomponenten müssen in ein Element mit dem Dropzone-spezifischen class="fallback" eingebettet werden, damit sie ausgeblendet werden (und einen Rückfall für JavaScript/Ajax-defiziente Clients bereitstellen). Do nicht entfernen Sie sie, sonst wird JSF die Verarbeitung der hochgeladenen Datei verweigern, da sie ihren Job basierend auf dem Komponentenbaum ausführen muss.
3. Die Methode save() wird direkt vom Setter aufgerufen. Dies ist irgendwie fischig, aber da Dropzone keine Möglichkeit bietet, eine Backing-Back-Aktionsmethode direkt auszulösen, ist dies die einfachste Problemumgehung. Eine andere Lösung ist es, eine valueChangeListener auf dem <h:inputFile> zu befestigen und Warteschlange das Ereignis an die INVOKE_APPLICATION Phase nach How to get updated model values in a valueChangeListener method?

Ihre nächste Frage wahrscheinlich sein soll „Wie soll ich es retten?“. In diesem Fall weiterhin hier:

• How to save uploaded file in JSF
• Recommended way to save uploaded files in a servlet application