有没有办法使用JSF2.2可靠地上传大文件

Question

I have a problem to upload large files to my server application (Tomcat7, JSF2.2, PrimeFaces). I would like to upload files up to 5 GB. This needs much time and the probability of a short connection lost is very high.

Currently I tried the primefaces fileupload. This works but if I lost the network connection then the upload stopped directly without any feedback on client or server side.

Is there a way to make it reliable?

Also the possibility to resume a file upload would be very fine.

Answer 1

I will try to answer my question...

The best way to make an upload reliable and resumable into a JSF/Primefaces web application is the integration of the Javascript library resumable.js (or similar libaries based on it).

It uses the HTML5 File API which is supported by many modern browsers.

Integration/Implementation:

On client-side you have to integrate the resumable.js library and some Javascript code to handle the upload. For that the resumable.js library provide some events like uploadStart, fileSuccess and many more. In combination with the PrimeFaces <p:remoteCommand> you can communicate from Javascript to the server-side web application.

Code Example: Add resumable.js JavaScript library

<h:outputScript library="js" name="resumable.js" />

Code Example: Initialize resumable object

var r;
var maxFileSize = #{uploadDataBean.getUploadSizeLimit()};
var allowedFileExtensions = #{uploadDataBean.getFileTypes()};

function pageLoaded() {
    PF('wVarStartBtn').disable();

    r = new Resumable({
        target: '../upload',
        chunkSize: 1*1024*1024,
        forceChunkSize: true,
        prioritizeFirstAndLastChunk: false,
        simultaneousUploads: 3,
        testChunks: true,
        chunkRetryInterval: 1000,
        maxFiles: 1,
        maxFilesErrorCallback: callbackMaxFiles,
        maxFileSize: maxFileSize,
        maxFileSizeErrorCallback: callbackMaxFileSize,
        fileType: allowedFileExtensions,
        fileTypeErrorCallback: callbackFileType,
        method: "octet"
    });

    r.assignDrop($('.resumable-drop')[0]);
    r.assignBrowse($('.resumable-select')[0]);

    // ### resumable event functions ###
    r.on('fileAdded', function(file) {
        console.log("File added: Name = " + file.fileName + ", No. of Chunks = " + file.chunks.length);
        ...
    }
    ...
}

Code Example: Communication from Javascript to the Managed Bean

<h:form id="hiddenInputsForm" prependId="false" style="display:none;">
    <p:remoteCommand name="rcStartUpload" update=":msg :msgs" actionListener="#{uploadDataBean.uploadStarted()}" />
    <p:remoteCommand name="rcUploadComplete" update=":msg :msgs" actionListener="#{uploadDataBean.uploadComplete()}" />
    <p:remoteCommand name="rcAddFile" update="hiddenInputsForm" />
    <h:inputText id="fileupload-hidden-input-filename" value="#{uploadDataBean.fileName}" />
    <h:inputText id="fileupload-hidden-input-fileidentifer" value="#{uploadDataBean.fileIdentifier}" />
    <h:inputText id="fileupload-hidden-input-filesize" value="#{uploadDataBean.fileSize}" />
    <h:inputText id="fileupload-hidden-input-chunksize" value="#{uploadDataBean.chunkSize}" />
</h:form>

<script type="text/javascript">
    ...

    function pageLoaded() {
        ...        
        // ### resumable event functions ###
        r.on('fileAdded', function(file) {
            console.log("File added: Name = " + file.fileName + ", No. of Chunks = " + file.chunks.length);

            document.getElementById('fileupload-hidden-input-filename').value = file.fileName;
            document.getElementById('fileupload-hidden-input-fileidentifer').value = file.uniqueIdentifier;
            document.getElementById('fileupload-hidden-input-filesize').value = file.size;
            document.getElementById('fileupload-hidden-input-chunksize').value = file.chunks.length;

            rcAddFile();

        });
        r.on('uploadStart', function () {
            console.log("Upload started");
            rcStartUpload();
        })
        r.on('fileSuccess', function(file) {
            console.log("File upload success");
            rcUploadComplete();
        });
        ...
    }

</script>

The server-side needs a WebFilter to receive the GET and POST requests from resumable.js. You have to implement the doFilter method from javax.servlet.Filter interface. This filter class uses another class (eg UploadFileManager) with static methods to check if a chunk already received and to save nonexistent chunks. If the upload is complete, then the client can call their managed bean via a RemoteCommand. The Bean itself can access the uploaded file by the same UploadFileManager class via a static method.

Note: The UploadFileManager class with the static methods must be threadsafe!

Component diagram