Telerik Forums
Kendo UI for jQuery Forum
0 answers
235 views

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?

IT
Top achievements
Rank 1
 asked on 02 Nov 2022
1 answer
85 views

Hi everybody.

Is it possible in JQuery KendoUpload to change the binary data before sending it to the server? Specifically pictures. We need to reduce the size of the image before sending it to the server. Does Kendo offer image resizing? Ideally in the upload?


Thank you. Vlado.
Lyuboslav
Telerik team
 answered on 21 Oct 2022
1 answer
63 views

Using this example: https://demos.telerik.com/kendo-ui/spreadsheet/server-side-import-export

I can't find the server-side script being run by this config: saveUrl: "/kendo-ui/spreadsheet/upload"

Where can I find this server-side script?

Neli
Telerik team
 answered on 06 Sep 2022
18 answers
1.3K+ views
Hi,

We have just started to use kendo ui async upload component in our application and I have some few questions regarding it.

1. I Is it somehow possible to customize the 'Select...' button (used to browse in the file systrem) in respect to the text and the color that changes at mouse over?

2. According to the documentation there is a cancel event which can be added in the configuration of file upload as:

$("#fileUpload").kendoUpload({
 async: {
  saveUrl: "upload_url",                            
  autoUpload: true,                                                
  removeUrl: "remove_url"
  },                      
  cancel: onCancel
  });

Though, onCancel method does not seem to be triggered when cancel upload button is pressed. Is is because that removeUrl must be specified? When cancel is activated Is it then through removeUrl that the so far uploaded file is deleted from server (that requires of course that a recourse at removeUrl does that actually), or how does it work?

Is it somehow possible to configure upload component not to show the cancel button?

thanks in advance, Piotr
mkhalesi
Top achievements
Rank 1
Iron
 updated answer on 20 Aug 2022
1 answer
224 views

Hi..

When I upload file using kendo upload, it will hit the error event with response message "An asynchronous module or handler completed while an asynchronous operation was still pending.", but the file is successfully uploaded.

This only happen on the first time, subsequently is not getting the error anymore.


$("#files").kendoUpload({
	async: {
		saveUrl: "upload.aspx",
		removeUrl: "remove",
		autoUpload: true,
		allowmultiple: true,
		batch: true
	},
	localization: {
		select: "Select Files"
	},
	complete: onComplete,                
	error: function (e) {
		console.log(e);
	},
	select: function (e) {
		
	},
	dropZone: "#dropZoneElement",
	showFileList: false
});
Any idea of what is going on?
Martin
Telerik team
 answered on 17 Jun 2022
0 answers
195 views

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>

 

Jimmy
Top achievements
Rank 1
Iron
Veteran
 asked on 14 Jun 2022
1 answer
119 views

I have a requirement that each file should be assigned to a category. We also need to support multiple files upload. Is this possible using the kendo upload?

I know that I can add extra data but that is for the whole upload and not for each file

Martin
Telerik team
 answered on 14 Mar 2022
0 answers
213 views

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.

 

 

Daeyong
Top achievements
Rank 1
 asked on 23 Feb 2022
0 answers
92 views

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)
        {

        }

 

 

cirilla
Top achievements
Rank 1
 asked on 23 Dec 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?