Sending file array from js to java using wicket ajax post

Question

I'm load multiple file list using field input of type file. Problem is i want to delete some of them from original list before form post. Couse FileList is immutable in js and I can't create new input to post with overridden FileList (js security reasons) I must build array with files that I want to submit.

But i don't know how to post and receive it using Wicket.Ajax.post (due to the above-mentioned I can't post form)

Standard fileUploadField get request as instance of IMultipartWebRequest on form post. How to do same using Wicket.Ajax.post ?

Answer 1

Wicket.Ajax.post() is a wrapper for http://api.jquery.com/jquery.ajax/. It just gives you hooks where you can manipulate the request or response: onBefore, onPrecondition, onSuccess, etc. So if you find a way to do what you need with plain jQuery then just add this logic in onBeforeSend hook.

Answer 2

You can already do this my using a MultiFileUpload? You don't need to build it yourself.

See this Wicket example: http://www.wicket-library.com/wicket-examples/upload/multi

Answer 3

I was in the same situation: I wanted to delete a specific file from the file list when I uploaded multiple files at once/in one file input field. The 'MultiFileUploadField' provided in Wicket 6.x deletes all files if they were selected together, which isn't what I want. Because I'm making a kind of plugin to existing software I'm not able to upgrade Wicket to a newer version, nor can I mount a resource in the Wicket application.

Mr Jedi mentioned in the comments:

As far as I remember I used some kind of jQuery uploder plugin and do some tricks with hidden inputs to send those files with form. But I'm not sure, it was some time ago and I don't have project sources.

My solution isn't complete yet and doesn't use an upload plugin (yet?). It can be used as a 'base' for means to upload files to a Wicket application with JavaScript.
The critical component is the added ajaxBehavior which receives a FormData object which was submitted by jQuery.ajax().

A word of caution I use jQuery.ajax() to POST data to the Wicket application, without fallback.
This might not work in older browsers. Check jQuery browser support for more information.
Also note that FormData objects are not fully supported by all browsers yet.

First I extended the existing MultiFileUploadField:

public class MyMultiFileUploadField extends MultiFileUploadField {

    private static final long serialVersionUID = 1L;

    private static final ResourceReference JS = new JavaScriptResourceReference(
                    MyMultiFileUploadField.class, "MyMultiFileUploadField.js");

    private final WebComponent upload;
    private final WebMarkupContainer container;
    private final AbstractAjaxBehavior ajaxBehavior;

    private final String componentIdPrefix;
    private final int maxUploads;
    private final boolean useMultipleAttr;

We provide our own constructor where we add ajaxBehavior to the component:

public MyMultiFileUploadField(String id, IModel<? extends Collection<FileUpload>> model, int max,
                    boolean useMultipleAttr) {
        super(id, model, max);

        this.maxUploads = max;
        this.useMultipleAttr = useMultipleAttr;

        upload = (WebComponent) get("upload"); // Created by parent as: new WebComponent("upload");
        container = (WebMarkupContainer) get("container"); // Created by parent as: new WebMarkupContainer("container");

        ajaxBehavior = new MyMultiFileUploadBehavior();
        add(ajaxBehavior);
    }

Also override the renderHead method so we can render our own JavaScript.
Important here is that we provide the ajaxBehavior.getCallbackUrl() to the script.

 @Override
    public void renderHead(IHeaderResponse response) {
        response.render(JavaScriptHeaderItem.forReference(JS));
        response.render(OnDomReadyHeaderItem.forScript("new MultiFileUpload('" + getInputName() + "', document.getElementById('"
                        + container.getMarkupId() + "'), " + maxUploads + ", " + useMultipleAttr + ", '" + ajaxBehavior.getCallbackUrl()
                        + "').addElement(document.getElementById('" + upload.getMarkupId() + "'));"));
    } // new MultiFileUpload(uploadFieldName, uploadContainer, maxUploads, useMultipleAttr, callbackUrl).addElement(fileInput);

The ajaxBehavior will receive the files and pass them to a FileHandler class for saving.
Many thanks to David Tanzer for explaining this in his post jQuery Wicket.

import org.apache.wicket.behavior.AbstractAjaxBehavior;
import org.apache.wicket.markup.html.form.upload.FileUpload;
import org.apache.wicket.protocol.http.servlet.MultipartServletWebRequest;
import org.apache.wicket.protocol.http.servlet.ServletWebRequest;
import org.apache.wicket.request.cycle.RequestCycle;
import org.apache.wicket.request.handler.TextRequestHandler;
import org.apache.wicket.util.lang.Bytes;
import org.apache.wicket.util.upload.FileItem;
import org.apache.wicket.util.upload.FileUploadException;

public class MyMultiFileUploadBehavior extends AbstractAjaxBehavior {

    private static final long serialVersionUID = 1L;

    @Override
    public void onRequest() {
        final RequestCycle requestCycle = RequestCycle.get();
        readRequest(requestCycle);
        sendResponse(requestCycle);
    }

    private void readRequest(final RequestCycle requestCycle) {
        Map<String, List<FileItem>> multiPartRequestFiles = null;

        final ServletWebRequest webRequest = (ServletWebRequest) requestCycle.getRequest();

        try {
            MultipartServletWebRequest multiPartRequest = webRequest.newMultipartWebRequest(Bytes.megabytes(1), "UploadInfo");
            multiPartRequest.parseFileParts();
            multiPartRequestFiles = multiPartRequest.getFiles();
        } catch (FileUploadException e) {
            e.printStackTrace(System.out);
            return;
        }

        if (multiPartRequestFiles != null && !multiPartRequestFiles.isEmpty()) {
            for (Entry<String, List<FileItem>> entry : multiPartRequestFiles.entrySet()) {
                // For debug: iterate over the map and print a list of filenames
                final String name = entry.getKey();
                System.out.println("Entry name: '" + name + "'");

                final List<FileItem> fileItems = entry.getValue();
                for (FileItem file : fileItems) {
                    System.out.println("Entry file: '" + file.getName() + "'");
                }

                List<FileUpload> fileUploads = buildFileUploadList(fileItems);
                FileUploadForm.getUploadFileHandler().persistFiles(fileUploads);
            }
        }
    }

    private void sendResponse(final RequestCycle requestCycle) {
        requestCycle.scheduleRequestHandlerAfterCurrent(
            new TextRequestHandler("application/json", "UTF-8", "[]"));
    }

    private List<FileUpload> buildFileUploadList(List<FileItem> fileItems) {
        List<FileUpload> fileUploads = new ArrayList<>(fileItems.size());
        for (FileItem fileItem : fileItems) {
            fileUploads.add(new FileUpload(fileItem));
        }
        return fileUploads;
    }
}

You can persist the files the same way as shown in the Wicket Examples (also mentioned by RobAU).

As for the JavaScript I based myself on the script shipped with Wicket 6.x made by Stickman. Please note that this script is still very basic.
More details on using wicket abstractajaxbehavior with jquery ajax.
More information about sending multipart formdata with jquery ajax.

    /**
     * @author Stickman -- http://the-stickman.com
     * @author Vertongen
     * @see /org/apache/wicket/markup/html/form/upload/MultiFileUploadField.js
     */
function MultiFileUpload(uploadFieldName, uploadContainer, maxUploads, useMultipleAttr, callbackUrl) {
    "use strict";
    console.log("Params: " + uploadFieldName+ ", " + uploadContainer + ", " + maxUploads + ", " + useMultipleAttr + ", " + callbackUrl);

    // Is there a maximum?
    if (!maxUploads) {
        maxUploads = -1;
    }
    // Map to hold selected files. Key is formatted as: 'upload_' + uploadId
    var formDataMap = new Map();
    //this.formDataMap = formDataMap;
    var uploadId = 0;
    // Reference to the file input element
    var fileInputElement = null;

    /**
     * Add a new file input element
     */
    this.addElement = function(fileInput) {
        // Make sure it's a file input element
        if (fileInput.tagName.toLowerCase() === 'input' && fileInput.type.toLowerCase() === 'file') {

            if (useMultipleAttr) {
                fileInput.multiple = useMultipleAttr;
                if (Wicket && Wicket.Browser.isOpera()) {
                    // in Opera 12.02, changing 'multiple' this way
                    // does not update the field
                    fileInput.type = 'button';
                    fileInput.type = 'file';
                }
            }

            // Keep a reference to this MultiFileUpload object
            fileInput.multiFileUpload = this;
            // Keep a reference to the file input element
            fileInputElement = fileInput;

            // What to do when a file is selected
            fileInput.onchange = function() {
                // Check to see if we don't exceed the max.
                if (maxUploads !== -1) {
                    if (this.files.length > maxUploads) {
                        console.warn("More files selected than allowed!");
                        this.value = "";
                        return;
                    }
                    if((this.files.length + formDataMap.size) > maxUploads) {
                        console.warn("Total amount of files for upload exceeds the maximum!");
                        this.value = "";
                        return;
                    }
                }

                // Put selected files in the FormDataMap
                for (var i = 0, numFiles = this.files.length; i < numFiles; i++) {
                    uploadId++;
                    var fileId = "upload_" + uploadId;
                    var fileObj = this.files[i];

                    formDataMap.set(fileId, fileObj);
                    // Update uploadContainer add filenames to the list
                    this.multiFileUpload.addFileToUploadContainer(fileId, fileObj);
                }

                // Clear file input
                this.value = "";

                // If we've reached maximum number, disable file input element
                if (maxUploads !== -1 && formDataMap.size >= maxUploads) {
                    this.disabled = true;
                }           
            };          
        } else if (Wicket && Wicket.Log) {
            Wicket.Log.error('Error: not a file input element');
        }
    };

    this.addFileToUploadContainer = function(fileId, fileObj) {
        // Row div
        var new_row = document.createElement('tr');
        var contentsColumn = document.createElement('td');
        var buttonColumn = document.createElement('td');

        // Delete button
        var new_row_button = document.createElement('input');
        new_row_button.id = fileId;
        new_row_button.type = 'button';
        new_row_button.value = 'Remove';

        // Delete function
        new_row_button.onclick = function() {
            // Remove the selected file from the formData map.
            formDataMap.delete(this.id);

            // Remove this row from the list
            this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

            // Re-enable file input element (if it's disabled)
            fileInputElement.disabled = false;

            // Appease Safari
            //    without it Safari wants to reload the browser window
            //    which nixes your already queued uploads
            return false;
        };

        // Add filename and button to row
        contentsColumn.innerHTML = this.getOnlyFileName(fileObj.name);
        new_row.appendChild(contentsColumn);
        new_row_button.style.marginLeft = '20px';
        buttonColumn.appendChild(new_row_button);
        new_row.appendChild(buttonColumn);

        uploadContainer.appendChild(new_row);
    };

    var submitButton = document.getElementById('submitUploads');
    var resetButton = document.getElementById('resetUploads');

    var success = function() {console.log('success!'); };
    var failure = function() {console.log('failure.'); };
    var complete = function() {console.log('Done.'); };

    submitButton.onclick = function() {
        if(!formDataMap || formDataMap.size < 1) {
            console.warn("No files selected, cancelled upload!");
            return;
        }

        // Convert the Map into a FormData object.
        var formData = new FormData();
        formDataMap.forEach(function(value, key) {
              console.log(key + ' = ' + value);
              formData.append("uploads", value);
        });

        // Send the FormData object to our Wicket app.
        jQuery.ajax({
            url: callbackUrl,
            type: 'POST',
            data: formData,
            context: self,
            cache: false,
            processData: false,
            contentType: false,
            success: [success],
            error: [failure],
            // complete: [complete]
        });
    };

    resetButton.onclick = function() {
        formDataMap.clear();
        fileInputElement.disabled = false;
    };

    this.getOnlyFileName = function(file) {
        var toEscape = {
            "&" : "&amp;",
            "<" : "&lt;",
            ">" : "&gt;",
            '"' : '&quot;',
            "'" : '&#39;'
        };

        function replaceChar(ch) {
            return toEscape[ch] || ch;
        }

        function htmlEscape(fileName) {
            return fileName.replace(/[&<>'"]/g, replaceChar);
        }

        var separatorIndex1 = file.lastIndexOf('\\');
        var separatorIndex2 = file.lastIndexOf('/');
        separatorIndex1 = Math.max(separatorIndex1, separatorIndex2);
        var fileName = separatorIndex1 >= 0 ? file.slice(separatorIndex1 + 1, file.length) : file;
        fileName = htmlEscape(fileName);
        return fileName;
    };
}

The JavaScript isn't completely tested yet. I will post updates of the script when I find issues.

You may also want to add a copy the HTML for the MultiFileUploadField.

<wicket:panel xmlns:wicket="http://wicket.apache.org">
    <input wicket:id="upload" type="file" class="wicket-mfu-field" />
    <div wicket:id="container" class="wicket-mfu-container">
        <div wicket:id="caption" class="wicket-mfu-caption"></div>
    </div>
</wicket:panel>

For using the MyMultiFileUploadField class you can look at the Wicket Examples (also mentioned by RobAU). This code and HTML below is based on the Wicket Examples.

// collection that will hold uploaded FileUpload objects
private final Collection<FileUpload> uploads = new ArrayList<>();

public FileUploadForm(String formId, MultiUploadConfig multiUploadConfig) {
        super(formId);

        // set this form to multipart mode (always needed for uploads!)
        setMultiPart(true);

        // Add one multi-file upload field with this class attribute "uploads" as model
        multiFileUploadField = new MyMultiFileUploadField("fileInput",
                        new PropertyModel<Collection<FileUpload>>(this, "uploads"),
                        multiUploadConfig.getMaxNumberOfFiles(), true);
        add(multiFileUploadField);

        // Set the maximum size for uploads
        setMaxSize(Bytes.megabytes(multiUploadConfig.getMaxUploadSize()));

        // Set maximum size of each file in upload request
        setFileMaxSize(Bytes.megabytes(multiUploadConfig.getMaxFileSize()));
    }

    public static IUploadFileHandler getUploadFileHandler() {
        return _uploadFileHandler;
    }

    public static void setUploadFileHandler(IUploadFileHandler uploadFileHandler) {
        _uploadFileHandler = uploadFileHandler;
    }

I use MyMultiFileUploadField in a Wicket form which has the following HTML.

<fieldset>
  <legend>Upload form</legend>
    <p>
      <div wicket:id="fileInput" class="mfuex" />
    </p>
    <input wicket:id="submitUploads" type="submit" value="Upload"/>
</fieldset>