Как получить выбранные файлы из p: fileUpload после выбора и перед загрузкой - PullRequest
Новая
       25

Как получить выбранные файлы из p: fileUpload после выбора и перед загрузкой

0 голосов
/ 19 сентября 2018

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

Например, пользователь выбирает файл для загрузки, приложение на стороне клиента, затем захватывает этот файл и считывает из него некоторую информацию для отображения в представлении.Тогда, если это то, что пользователь ожидает увидеть, он может нажать «Загрузить».

Есть ли способ вызвать метод в компоненте поддержки, когда файл выбран, и передать ему этот файл, или PrimeFaces не позволяет этому случиться?

index.xhtml 

<h:form id="uploadform" prependId="false" enctype="multipart/form-data">
    <p:outputPanel id="container">
        <center>
            <p:fileUpload fileUploadListener="#{uploadBean.handleFileUpload}" mode="advanced"
                    dragDropSupport="false" allowTypes="/(\.|\/)(csv|xlsx)$/" update="messages"/>

            <p:growl id="messages" showDetail="true" />

        </center>
    </p:outputPanel>                
</h:form>

UploadBean.java 

import org.apache.poi.util.IOUtils;
import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.UploadedFile;

@ViewScoped
@ManagedBean(name = "uploadBean")
public class NetezzaUploadBean implements java.io.Serializable {

    private static final long serialVersionUID = 1L;

    private UploadedFile file = null;

    @PostConstruct
    public void init() {
    }

    public void getFileBeforeSubmit() {
        //Where I want to do some work with the file    
    }

    public void handleFileUpload(FileUploadEvent event){
        FacesMessage message = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
        FacesContext.getCurrentInstance().addMessage(null, message);
    }

    public UploadedFile getFile() {
        return file;
    }

    public void setFile(UploadedFile uploadedFile) {
        this.file = uploadedFile;
    }
}

1 Ответ

0 голосов
/ 19 сентября 2018

PrimeFaces p:fileUpload, кажется, имеет отличную недокументированную функцию, где вы можете использовать встроенное событие ввода файла 'onAdd' (или что-то вроде).Я нашел это в источнике (который открыт ;-)) файла 2-fileUpload.js file 

if($this.cfg.onAdd) {
    $this.cfg.onAdd.call($this, file, function(processedFile) {
       file = processedFile;
       data.files[0] = processedFile;
       this.addFileToRow(file, data);
    });
}

Свойство cfg из $this может быть доступно через

PF('myWidgetId').cfg

И если вы объявите функцию заранее, как 

function myOnAddHandler(file) {
    console.log(file);
}

И добавите ее в виджет с помощью 

PF('myWidgetId').cfg.myOnAddHandler;

Вы можете выбрать файл и перед загрузкойувидеть, что оно вошло в консоль

Файл {имя: "myImage.PNG", lastModified: 1533756086560, webkitRelativePath: "", размер: 38344, тип: "image / png"}

Затем вы можете расширить его, чтобы использовать API-интерфейс файла HTML5 и прочитать его 

function myOnAddHandler(file) {
    var reader = new FileReader(); 
    reader.onload = function(readerEvt) { 
        var binaryString = readerEvt.target.result;
        console.log(btoa(binaryString));
    };
    reader.readAsBinaryString(file);
}

. PrimeFaces сам использует этот вид в соответствующем addFileToRow, чтобы показатьПредварительный просмотр

После просмотра большего количества java-кода PrimeFaces может даже оказаться, что вместо PF('myWidgetId').cfg.myOnAddHandler; вы могли бы сделать <p:fileUpload onAdd="myOnAddHandler" .... /> У меня, к сожалению, нет времени, чтобы проверить это прямо сейчас, но этоможет сработать.

...