Javascript Events

The file upload widget emits two custom events - when an upload starts and when a file has uploaded successfully.

  1. The event fileUploadStarted is emitted when the user starts an upload.
  2. The event fileUploadSuccess is emitted when the file has uploaded successfully.
  3. The event fileUploadFailed if emitted if the file upload fails.

An example of how to listen to these event is shared below:

Give the form element a custom id:

<input type="hidden" id="test-files-uploader" class="simple-file-upload">

Grab the id of the form input:

  const el = document.getElementById("test-files-uploader");

To listen to the file upload started event:

   el.addEventListener("fileUploadStarted", function (e) {
    alert('file upload started' + this.value)
  });

To listen to the file upload success event:

  el.addEventListener("fileUploadSuccess", function (e) {
    console.log(this.value)
  });

To listen to the file upload failure event:

  el.addEventListener("fileUploadFailed", function (e) {
    console.log(this.value)
  });

Note: The uploader automatically give the user visual feedback if their upload fails, so you don't need to write custom code to listen to the failure event (unless you want to)!