Hi,
I need to send some dynamic parameters, (path and others), when uploading files from js.I have a Dojo here: https://dojo.telerik.com/UhicOWUv
I want to hide the file list but I want to display an error message on the page if it doesn't upload. In the above example, I am attempting to upload a file that is too large. Instead of displaying an error message in the "messages" div, it is doing nothing so the user doesn't know it failed. How do I accomplish my goal of hiding the files list but showing a message when something goes wrong?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
</head>
<body>
<input type="file" name="files" id="photos" />
<div id="messages"></div>
<script>
$("#photos").kendoUpload({
async: {
saveUrl: "http://my-app.localhost/save",
removeUrl: "http://my-app.localhost/remove"
},
showFileList: false,
validation: {
allowedExtensions: [".pdf"],
maxFileSize: 900000,
minFileSize: 300000
},
error: function() { $("#messages").append("error"); }
});
</script>
</body>
</html>
We're using kendoUpload control in a .NET MVC project, when selecting multiple files that are tiny in size there is no problem to select and upload many (37 txt files with a size close to 0 used in example). But when trying upload as little as 6 files with a size of around 400Kb the ui seems to upload 1 file, freeze and after some 20 - 30 seconds returns an upload error (hits the "error" method of the kendoUpload object that is).
$("#files").kendoUpload({
async: {
chunkSize: 2048000,
concurrent: false,
saveUrl: infra.App.baseUrl + "Api/Upload/AdicionarAnexos/" + wbc.Upload.sPastaDestino + "/" + wbc.Upload.nCdModulo,
autoUpload: false,
},
...
}
Hi Guys,
Is there a quick way to remove files from a Kendo UI Upload plus fire the corresponding remove request on the server? I have a Kendo UI Form where I added the Kendo Upload. When the user clicks the Clear button in the form, the files are removed from the list however the remove request is not fired thus, the uploaded files are still in the server.
This is the code snippet on how I have added the kendo upload to the kendo form:
$('<input type="file" name="' + options.field + '" id="' + options.field + '"/>').appendTo(container)
.kendoUpload({
multiple: false,
async: {
saveUrl: "/api/upload/save",
removeUrl: "/api/upload/remove"
},
validation: {
allowedExtensions: [".jpg", ".gif"]
},
upload: (e: kendo.ui.UploadUploadEvent) => {
e.data = { uploadId: this._uploadId };
},
remove: (e: kendo.ui.UploadRemoveEvent) => {
e.data = { uploadId: this._uploadId };
},
success: (e: kendo.ui.UploadSuccessEvent) => {
this.enableSubmit(e.operation === 'upload');
}
})
I have tried using the removeAllFiles() or removeFile() but doesn't seem to do any request calls.
Hoping to hear from you soon.
Kindest regards, Ruby.
would like to check if it is possible to style the upload control to as follows
when no file selected
after file selected
Hi,
I was trying to update my kendo version to the latest available (from 2019 to 2022) and when compiling my scss files I always get an error saying that my CSS is invalid after "...-header-border," which most likely corresponds to the $grid-header-border variable in the grid's theme file.
Invalid CSS after "...-header-border,": expected expression (e.g. 1px, bold), was ");"
I have downloaded the latest version from Node. I added the classic version.