Page Header

Javascript Events

The file upload widget emits three custom events - uploaded started (single uploader), file uploaded successfully, and file upload failed.

1. The event fileUploadStarted is emitted when the upload begins.
2. The event fileUploadSuccess is emitted when the file (or files) has uploaded successfully.
3. The event fileUploadFailed is 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) // The url of the uploaded file
    console.log(e.detail.files) // Array of file details 
  });

To listen to the file upload failure event:

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

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)!