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

 

Most popular tags

Failed to execute the [groovy] macro
  1. access rights
  2. activity stream
  3. annotation
  4. attachment
  5. comment
  6. Document Tree Macro
  7. export
  8. Extension Manager
  9. Flamingo skin
  10. global user
  11. Groovy event listener
  12. group
  13. nested page
  14. search
  15. skin
  16. syntax
  17. user
  18. user profile
  19. velocity macros
  20. wiki
  21. wysiwyg
  22. XWiki Applications
  23. xwikiattachment_archive table
  24. xwikiattachment table
  25. xwikiattrecyclebin table
  26. xwikiproperties table

[Display all tags from this space]