Questions on Kendo UI for jQuery Forum

0 answers

42 views

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>

Upload

asked on 31 Oct 2023

0 answers

51 views

Custom theme builder CSS invalid

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.

Grid

Upload

asked on 04 Nov 2022

0 answers

235 views

Kendo Upload Widget File Size Limitations

Hello,

I am using the Kendo Upload widget to upload images to a web application. I am having some issues with file sizing even though my maximumfile size is set to 10 MB and the Image is 5.1 MB.

I was unable to find any information on built-in limitations for the uploader on in the Kendo UI jQuery documentation.

Are there any built-in limitations to this widget in terms of file size? If so, what are they?

Upload

asked on 02 Nov 2022

0 answers

195 views

Posting form data using javascript with Kendo Upload stop working recently

Hi

I have upload code similar to the below and was working till recently.

Error preventing the form from being posted. but no error detail from JavaScript.

This only happen using Chrome, file Firefox no issue.

No problem when posting without the rawfile.

Can anyone help?Thanks in advance.

<script>

$("#submitForm").on("click", function(e) {

e.preventDefault();

// Append the desired file

var formData = new FormData();

var upload = $("#files").getKendoUpload();

var files = upload.getFiles();

formData.append('files', files[0].rawFile);

// Send the request

$.ajax({

url: 'index.php?type=save',

type: 'POST',

data: formData,

cache: false,

contentType: false,

processData: false,

success: function (response) {

console.log(response);

}

});

</script>

Upload

asked on 14 Jun 2022

0 answers

213 views

Upload widget drag&drop is not working inside a grid

Hello all,

I have two issues adding the upload widget inside the grid.

1. I am trying to create a grid with an upload widget as one of its columns and make user be able to upload a file using drag&drop functionality.

The problem is that I could select file by the select button but drag&drop functionality is not working.

Below is my source data.

html:

<div id="grid1wrapper" class="row">
	<div class="col-md-12">
		<div id="grid1" kendo-grid="grid1" k-options="gridOptions" k-data-source="dataSource"></div>
	</div>
</div>

javascript:

$scope.gridOptions = {
	height: 500,
    	editable: true,
    	resizable: true,
    	navigatable: true,
    	columns: [
    		{
    			field: 'filename',
    			title: 'File Name'
    		},
    		{
    			title: 'File',
    			field: 'file',
    			attributes: { "class": 'text-center' },
    			editor: $scope.fileUploader,
    			width: 200 
    		},
    		{ 
    			command: "destroy", 
    			title: "&nbsp;", 
    			width: 40 
    		}]
    };

$scope.fileUploader = function(container, options) {
		const name = options.field; 
		$('<input type="file"  name="'+ name +'"/>')
			.appendTo(container)
			.kendoUpload({
				multiple: false,
				localization: {
		               dropFilesHere: "DropFilesHere"
		        }
			});
	};

2. After upload file and click another field to fill out the data, the uploaded file disappears and I cannot save file with save button.

Any idea?

Thank you.

Drag and Drop

Grid

Upload

asked on 23 Feb 2022

0 answers

92 views

File or directory not found error while uploading file

Greetings. I am getting the following error while uploading a file with Kendo upload. Code works fine at local. But it gives this error on the server.

Error:

Client-Side Code:

$("#batchFile").kendoUpload({
async: {
saveUrl: '/DijitalArsiv/UploadFile/',
autoUpload: false
},
upload: function (e) {

if (uploadFileNode.isMainFolder) {
realPath = realPath + "\\" + personelID
}

e.data = { "id": uploadFileNode.id, "path": realPath, "isMainFolder": uploadFileNode.isMainFolder, "type": uploadFileNode.spriteCssClass };

},
select: function (e) {

if (e.files.length != 0) {
$.each(e.files,function (index, value) {

var filtredValue = acceptedFileTypes.filter(x => x == value.extension)
if (filtredValue.length == 0) {
e.preventDefault();
$("#message-alert").html("Sadece '.pdf', '.jpg', '.png', '.jpeg', '.docx', '.xlsx' türünde dosyalar yükelenebilir. Lütfen yüklediğiniz dosyların türünü kontrol edin.")
kendoWindowMessageAlertModal.data("kendoWindow").content($("#message-alert").html()).center().open();
}
})
}
},
success: function (e) {

if (e.response.Status) {
getTreeView().append([{ id: e.response.ID, text: e.response.FileName, spriteCssClass: e.response.Type, UnicParentCode: nodeToUploadParent.UnicParentCode, isDraggable: true, isDroppable: true, hasChildren: false, isEditable: false, isMainFolder: false }], nodeToUpload)
updateBackupTree();
} else {
e.preventDefault();
}
},
multiple: true,
batch: true,
localization: {
cancel: "İptal",
dropFilesHere: "Dosyalarınızı Buraya Sürükleyebilirsiniz!",
remove: "Sil",
retry: "Tekrar Dene!",
select: "Dosya Seç",
statusFailed: "Yükleme Başarısız!",
statusUploaded: "Yükleme Başarılı!",
statusUploading: "Yükleniyor...",
uploadSelectedFiles: "Yükle"
}
});

Server-side Code:

[HttpPost]
public JsonResult UploadFile(HttpPostedFileBase batchFile, int? id, string path, bool isMainFolder,string type)
{

}

Upload

asked on 23 Dec 2021

0 answers

66 views

For Uploading is it possible to Upload the File path from a shared drive?

Is it possible instead of uploading files can I choose a file from the file explorer window and upload a hyperlink which has the file path to that file from a shared server.

Upload

asked on 20 Sep 2021

0 answers

652 views

How to await response from upload

I have a form that accepts text inputs and a file. The kendo upload component is async so I can take advantage of the drag and drop feature. I want the user to be able to upload multiple files. When the user has finished filling out the form and selecting their files the user clicks a submit form button and the following should happen:

The files are uploaded.
The function waits for a response from the upload.
The saveURL returns a response with an internal fileID and other information.
The response is saved in a local URL.
This is then added to an object containing the rest of the form field's values and a second ajax call is made to upload the entire form's data including the fileID's to a database.

Here is a Dojo I started: https://dojo.telerik.com/@dojolee/EfiXIbeH

Dojo

Upload

asked on 25 Aug 2021

0 answers

140 views

Upload compatibility with jQuery 1.9.x

Hello,

The Upload official release (Q1 2013 and earlier) is not compatible with jQuery 1.9.x

The problem is limited to asynchronous mode only. An error is thrown when the server returns an empty response. As a workaround, you can return an empty JSON object with content type set to "text/plain".

Users are urged to update to the latest hotfix version (2013.1.327+) as part of the jQuery upgrade process.

Apologies for the caused inconvenience.

Upload

asked on 04 Apr 2013

0 answers

55 views

Upload: post metadata before the file

Upload component posts the file before the metadata, but our server expects the metadata first because it includes vital information for processing the uploaded file. We do not want to save an intermediate copy before processing to avoid unnecessary processing overhead. Is there a way to instruct the Upload component to post the metadata before the file?

Upload