/waDropzone

The waDropzone implements the DropzoneJS library. This widget lets the user drag and drop a file into the widget and the file gets uploaded to the server via AJAX. For more details please see www.dropzonejs.com/.

Primary LanguageJavaScript

Custom Widget for Wakanda

The waDropzone widget is simple implementation of DropzoneJS library, for more details please see https://www.dropzonejs.com/.

Video Demo

http://www.youtube.com/watch?v=ErjplSPF0MA

Installation Note

Properties

This waDropzone widget has the following properties:

  • Parall Uploads: How many file uploads to process in parallel. (See the Enqueuing file uploads section for more info: https://www.dropzonejs.com/)
  • Max File Size: The max file size allowed (in MB).
  • Upload Multiple: Whether the widget should send multiple files in one request.
  • Create Image Thumbnails: Display thumbnails for images.
  • Add Remove Links: This will add a link to every file preview to remove or cancel (if already uploading).
  • Max Files: How many files the widget can handle.
  • Auto Process: if checked, it will process files automatically, if not, you should call the .processQueue() method to upload files.
  • In Case of conflict: Select an action in case if file already exists.
  • Upload folder: Path to the folder where to save the files.

Events:

This waDropzone widget has 11 Events:

  • On File Added: called whenever a file is added to the widget.

  • On File Removed: Called whenever a file is removed from the list. You can listen to this and delete the file from your server if you want to.

  • On Error: An error occured. Receives the errorMessage as second parameter and if the error was due to the XMLHttpRequest the xhr object as third.

  • On Processing: When a file gets processed (since there is a queue not all files are processed immediately).

  • On Upload Progress: Gets called periodically whenever the file upload progress changes. Gets the progress parameter as second parameter which is a percentage (0-100) and the bytesSent parameter as third which is the number of the bytes that have been sent to the server.

  • On Sending: Called just before each file is sent. Gets the xhr object and the formData objects as second and third parameters, so you can modify them (for example to add a CSRF token) or add additional data.

  • On Processing: When a file gets processed (since there is a queue not all files are processed immediately).

  • On Success: The file has been uploaded successfully. Gets the server response as second argument.

  • On Complete: Called when the upload was either successful or erroneous.

  • On Cancel: Called when a file upload gets canceled.

  • On Max Files Reached: Called when the number of files accepted reached the maxFiles limit.

  • On Max Files Exceeded: Called for each file that has been rejected because the number of files exceeds the maxFiles limit.

Methods

  • getAcceptedFiles: List of files accepted.
  • getRejectedFiles: List of files rejected by the widget (due to size, file type etc).
  • getRejectedFiles: List of files rejected by the widget (due to size, file type etc).
  • getQueuedFiles: List of files in the Queue.
  • getUploadingFiles: List the files currently in the upload process.
  • disable: Disable the widget.
  • enable: Enable the widget.
  • addFile(file): Add file to the widget, it accept one parameter File Object file (http://www.w3.org/TR/FileAPI/#dfn-file).
  • enqueueFiles(files): enqueue multiple files to the Queue, it accept an array of file objects.
  • enqueueFile(file): enqueue single file to the Queue, it accept an file object as parameter.
  • removeFile(file): remove file from the widget.
  • removeAllFiles(cancelIfNecessary): remove all files from the widget, pass a boolean to cancel the uploading files as well.
  • removeAllFiles(cancelIfNecessary): remove all files from the widget, pass a boolean to cancel the uploading files as well.
  • processQueue(): start processing files in the Queue.
  • processFiles(files): process the specified files.
  • cancelUpload(file): cancel the upload for the specified file.
  • uploadFiles(files): Start uploading the specified files.

Goals

The waDropzone is an alternative to upload multiple files to Wakanda Server, it's easy to use just Drag & Drop the widget to your page and you're up & running.

More Information

For more information on how to install a custom widget, refer to Installing a Custom Widget.

For more information about Custom Widgets, refer to Custom Widgets in the Architecture of Wakanda Applications manual.