Validate kendo upload control

I have a user form with a kendo upload control. I need to make sure the upload control has been completed before the user is aloud to submit the form. Uploading a file is just an optional. I will like to have a message to the user if they hit the submit button that lets them know the upload control is still processing. I am thinking of using e.preventDefault on the submit button along with a variable to check if they are still uploading a file. I can set it to false in the upload event and switch it to true in the complete event.

Wanted to see if anyone else had any other ideas?

https://dojo.telerik.com/uXOVuHuC

Answer

When user start upload file or an upload process was finish, there will be an uid (unique ID) for each file upload. So you can store these uid in an array when the upload is start, and remove the uid when the upload was finished. Then control whether user can submit the form based on whether the uid array is empty. Following is the example:

Create an array variable which use to store uploading file’s uid

/* use to store file's uids which are uploading */
let uploadingList = [];

Assuming you want to disable the submit button when submit form was not allowed

/* to update button status */
const syncButtonStatus = () => {
    /* set allow to submit form if the list is empty */
    const canSubmit = !uploadingList.length;

    /* disable the button if not allowed to submit */
    $('#submit-button').prop('disabled', !canSubmit);
};

Create a function to add uid to the list

/* add the uid to the list by uid value */
const addUid = (uid) => {
    const index = uploadingList.indexOf(uid);
    if (index == -1) {
        uploadingList.push(uid);
    }
};

When start upload a file, add the uid to the list and update the button status

/* when start upload of each file */
const startUpload = (upload) => {
    /* add the file uid to the list */
    addUid(upload.files[0].uid);

    /* update the button status */
    syncButtonStatus();
};

Create a function to remove uid from the list

/* remove the uid from the list by uid value */
const removeUid = (uid) => {
    const index = uploadingList.indexOf(uid);
    if (index > -1) {
        uploadingList.splice(index, 1);
    }
};

When an upload process was finished, remove uid from the list and update the button status

/* when an upload process was finished regardless of success or failed */
const finishUpload = (upload) => {
    /* loop through each upload file */
    upload.sender.getFiles().forEach((file) => {
        /* remove their uids from the list */
        removeUid(file.uid)
    });

    /* update the button status */
    syncButtonStatus();
};

Demo:

/* use to store file's uids which are uploading */
let uploadingList = [];

/* to update button status */
const syncButtonStatus = () => {
  /* set allow to submit form if the list is empty */
  const canSubmit = !uploadingList.length;

  /* disable the button if not allowed to submit */
  $('#submit-button').prop('disabled', !canSubmit);


  /* THIS IS NOT PART OF THE FUNCTION! it just for demo to show how the list store the uid */
  $('#list').html(uploadingList.reduce((html, uid) => `${html}<li>${uid}</li>`, ''));
};

/* add the uid to the list by uid value */
const addUid = (uid) => {
  const index = uploadingList.indexOf(uid);
  if (index == -1) {
    uploadingList.push(uid);
  }
};

/* when start upload of each file */
const startUpload = (upload) => {
  /* add the file uid to the list */
  addUid(upload.files[0].uid);

  /* update the button status */
  syncButtonStatus();
};

/* remove the uid from the list by uid value */
const removeUid = (uid) => {
  const index = uploadingList.indexOf(uid);
  if (index > -1) {
    uploadingList.splice(index, 1);
  }
};

/* when an upload process was finished regardless of success or failed */
const finishUpload = (upload) => {
  /* loop through each upload file */
  upload.sender.getFiles().forEach((file) => {
    /* remove their uids from the list */
    removeUid(file.uid)
  });

  /* update the button status */
  syncButtonStatus();
};

$(document).ready(function() {
  $("#photos").kendoUpload({
    async: {
      saveUrl: "https://jsonplaceholder.typicode.com/posts/1",
      removeUrl: "https://jsonplaceholder.typicode.com/posts/1",
      autoUpload: true
    },
    upload: startUpload,
    complete: finishUpload,
  });
});

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.default-ocean-blue.min.css">
<form>
  <button type="button" id="submit-button">Submit</button>
  <hr />
  <b>Uploading file uid list:</b>
  <ul id="list">
  </ul>
  <input type="file" name="files" id="photos" />
</form>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/kendo.all.min.js"></script>