Использование dropzone с JSF

Question

Я хотел бы знать, как использовать dropzone.js с JSF для загрузки файла. В документации (http://www.dropzonejs.com/#usage) он говорит, что с помощью Dropzone, как с помощью:

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

Но я не знаю, как реализовать серверную часть в JSF, чтобы получить файл и сохранить его в диске.

Answer 1

Похоже, что вы не совсем понимаете, что JSF в контексте этого вопроса является просто генератором кода HTML. JSF предлагает компонент <h:inputFile>, который генерирует элемент HTML <input type="file">.

Попробуйте сами:

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

При открытии страницы JSF в веб-браузера и сделать правый клик и View Page Source, то вы должны увидеть что-то вроде этого:

<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 , есть ваш элемент <input type="file">!

Теперь, если мы настроим Dropzone согласно its documentation (и установить файл dropzone.js в вашем JSF проекта в соответствии с инструкциями в How to reference CSS/JS/image resource in Facelets template?), то мы должны в конечном итоге на странице JSF с чем-то вроде этого:

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

боб выглядит точно так же, как это:

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

} 

Есть 3 вещи, которые следует принимать во внимание с JSF:

1. Параметр Dropzone paramName должен быть установлен в точности name сгенерированного элемента <input type="file">, который в приведенном выше примере равен uploadForm:file.
2. Элементы входного файла JSF и компоненты командной строки должны быть обернуты элементом с конкретным Dropzone class="fallback", чтобы быть скрытым (и обеспечить резерв для клиентов с дефицитом JavaScript/Ajax). Do не удалить их, в противном случае JSF откажется обрабатывать загруженный файл, потому что ему необходимо выполнить свое задание на основе дерева компонентов.
3. Метод save() вызывается непосредственно установщиком. Это довольно подозрительно, но поскольку Dropzone не дает возможности напрямую инициировать метод действия бэк-компонента, это самый простой способ обхода. Другим решением является прикрепить valueChangeListener на <h:inputFile> и очереди событие в INVOKE_APPLICATION фазе согласно How to get updated model values in a valueChangeListener method?

Ваш следующий вопрос будет, вероятно, будет «Как следует ли сохранить его?». В этом случае, по-прежнему здесь:

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