I have a form that has three dropdowns and a file upload control, all Kendo components. I'd like the initial state of the Upload component to be disabled until the user has selected the appropriate values from the dropdowns. I have all the dropdowns working appropriately, and their change events are all wired up, but I need to have the initial state of the uploader disabled until all three dropdowns have been answered, and then enable the upload.
In the uploader event, I have the select event wired into the validation, but it doesn;t actually fire until the user has selected a file, whereas I don;t want them to select the file even until the dropdowns have been answered. What is the best way to do this?
$(
"#FileUpload1"
).kendoUpload({
async: {
saveUrl:
"@Url.Action("
UploadFile
", "
Mapping
")"
},
upload:
function
(e) {
e.data = {
clientId: viewModel.get(
"ClientId"
),
uploadType: viewModel.get(
"uploadType"
),
payrollType: viewModel.get(
"payrollType"
)
}
},
multiple:
false
,
localization: {
"select"
:
"Select file to import..."
},
select:
function
(e) {
if
((viewModel.get(
"ClientId"
) ===
""
) ||
(viewModel.get(
"uploadType"
) ===
""
) ||
(viewModel.get(
"payrollType"
) ===
""
)) {
alert(
"Please Make All Appropriate Selections Before Uploading"
);
e.preventDefault();
return
;
}
var
extension = e.files[0].extension.toLowerCase();
if
(ALLOWED_EXTENSIONS.indexOf(extension) === -1) {
alert(
"Please, select a supported file format"
);
e.preventDefault();
return
;
}
},
success:
function
(e) {
spreadsheetWrapper.show();
// Load the converted document into the spreadsheet
$(
"#spreadsheet"
).data(
"kendoSpreadsheet"
).fromJSON(e.response);
$(
"#uploadForm"
).hide();
}
});