HTML5 File Upload Widget

The HTML5 File Upload Widget is bundled with XWiki at it provides an interactive upload User Interface in order to enhance the HTML input elements of type file.

ViewAttachments.png

Usage

To use the File Upload Widget, you just need to create a new instance of "XWiki.FileUploader" and pass the target input element as the first parameter. Additionally, you can pass an optional configuration object as the second parameter.

To start, you can create an HTML input element of type file in a wiki page,

{{velocity}}

(((
{{html}}
<form>
Input: <input type="file" id="fileUploadWidget" name="fileUploadWidget" />
</form>
{{/html}}
)))

{{/velocity}}

then copy the code below in a "XWiki.JavaScriptExtension" object

var targetInput = $('fileUploadWidget');
if(targetInput) {
 new XWiki.FileUploader(targetInput, {
    autoUpload: true,
    progressAutohide: true
  });
}

which will generate:

FileUploadWidget.png

Parameters

OptionDescriptionAccepted valueDefault value
maxFilesizeThe maximum size of the file.A numberThe maximum attachment size configured for the wiki.
fileFilterThe accepted MIME types.A valid JavaScript RegExp object.All MIME types are allowed.
enableFileInfoA flag stating whether the information (name, file format, size) about each selected file should be displayed.true or falsetrue
enableProgressInfoA flag stating whether a progress bar should be displayed as each file is uploaded.true or falsetrue
progressAutohideA flag stating whether the progress information should automatically disappear once all the uploads are completed.true or falsefalse
autoUploadA flag stating whether the upload should start as soon as the files are selected or whether it should wait for a submit event.true or falsetrue
responseContainerIndicates the location where the server response is displayed.If no container is provided, a new div input will be created.
responseURLA custom URL used for retrieving the response after the files are uploaded.A stringIf no URL is provided, the widget will use an existing xredirect parameter in the form.

Related Pages

Search this space