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>
