Telerik Forums
Kendo UI for jQuery Forum
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
237 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
1 answer
121 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
1 answer
754 views

Hello, I'm currently working on a project for my company and ive encountered a problem. I dont know why I cant download the file attachment. ive attached a jpg file of the screenshot for you to see. There is a file attachment named sad kermit(2).jpg and a message in the console in the screenshot

This is my kendo form code in view.

$("#form").kendoForm({
            validatable: { validationSummary: true },
            orientation: "horizontal",
            formData: {
                ID: "@Model.ID",
                IssueNumber: "@Model.ISSUE_NUM",
                Title: "@Model.TITLE",
                Environment: "@Model.ENVIRONMENT",
                Application: "@Model.APPLICATION",
                Module: "@Model.MODULE",
                Priority: "@Model.PRIORITY",
                Status: "@Model.STATUS",
                FID: "@Model.FID",
                Jobname: "@Model.JOBNAME",
                Username: "@Model.USERNAME",
                MantisNumber: "@Model.MANTIS_NO",
                ModifiedBy: "@ViewBag.User_Name",
                Upload: "",
                ModifiedDate: "@Model.MODIFIED_DATE",
                Description: "@Model.DESCRIPTION",
                IssueType: "@Model.ISSUE_TYPE",
                IssueCategory: "@Model.ISSUE_CATEGORY",
                IssueResolution: "@Model.ISSUE_RESOLUTION",
                Remarks: "@Model.REMARKS",
                AssignedTo: "@Model.ASSIGNED_TO",
                CreatedBy: "@ViewBag.User_Name"
            },
            items: [{
                type: "group",
                label: "Edit Issue Details",
                items: [
                    ...,
                   ...,
                    ...,
                    ...,
                    ...,
                   ...,
                    ...,
                    ...,
                    ...,
                    ...,
                    ...,
                    {
                        field: "Upload",
                        label: "Upload File:",
                        editor: function (container, options) {
                            $("<input name='files' id='files' type='file' aria-label='files' />").appendTo(container).kendoUpload({
                                async: {
                                    saveUrl: '@Url.Action("UploadFiles", "Issue")',
                                    removeUrl: '@Url.Action("RemoveFiles", "Issue")',
                                    autoUpload: true
                                },
                                files: uploads
                            });
                        }
                    },
                    ...,
                    ...,
                    ...,
                    ...,
                    ...,
                    ...,
                    ...,
                    ...,
                ]
                }],
                submit: function (ev)...
            });

this is the code I use to try to download the file attachment in the same view but it isnt working I guess

$(".k-file").click(function (e) {
                var filename = $(this).find(".k-file-name").html();

                $.ajax({
                    type: "POST",
                    data: { "name": filename },
                    url: "/Issue/DownloadFile",
                    success: function (res) {
                        if (res.Success) {
                            console.log(res.DownloadUrl);
                            window.open(res.DownloadUrl, '_blank');
                        }
                    }
                });
            });
this is the controller 
[HttpPost]
        public ActionResult DownloadFile(string name)
        {
            var folderName = Session["IssueNum"] as string;

            string fileDirectory = Path.Combine(System.Web.HttpContext.Current.Request.PhysicalApplicationPath, "App_Data", folderName, name);

            return Json(new
            {
                Success = true,
                DownloadUrl = fileDirectory
            }, JsonRequestBehavior.AllowGet);
        }
Could you suggest me a solution? Thank you
Ianko
Telerik team
 answered on 22 Dec 2021
6 answers
287 views
Hi,

I use a Kendo File upload function in my project, which supports a finite set of languages.
The text on the button was getting set according to the culture we were supporting till recent.

Recently we added Italian to our portal.
What we notice is that the text on the button remains in English as "Select files ..."

<script src="@Url.Content("http://cdn.kendostatic.com/2013.3.1324/js/cultures/kendo.culture." + culture + ".min.js")"></script>
<script>
    kendo.culture("@culture");
</script>
 
@Html.Kendo().Upload().Name("attachments").Events(events => events.Select("OnUploadSelect"))

How can I get around this issue ?

Also, I notice the same problem in grids where the text in the bottom is like "1-15 of 100 items", instead of the Italian equivalent. Is it a common issue or should I raise another discussion thread under the grids' category ?

Thanks &
Regards

Achilles

Romain
Top achievements
Rank 1
Iron
Iron
 answered on 30 Nov 2021
1 answer
148 views

I am trying to remove the default upload and clear button using mvvm ?

 

<input id="files" name="files"
           type="file"
           data-role="upload"
           data-async="{ saveUrl: '@Url.Page("/FADT")?handler=FileUpload',  autoUpload: false, multiple:false }"
           data-bind="visible: isVisible,
                            enabled: isEnabled,
                            events: { select: onSelect,  cancel: onCancel, complete: onComplete, success: onSuccess, upload: onUpload }">

 

how do I do that ? Can I use a template with MVVM if so how ?

 

Martin
Telerik team
 answered on 23 Nov 2021
1 answer
452 views

I have a kendo upload on one of my forms. This upload button has the following async, multiselect, autoUpload = false, batch = true. The problem I am running into is if the user selects 5 files, but meant to only select 4, they click the remove icon for that row.

I am having issues removing that file from the file portion of the upload control. If I select 5 and then remove them all, the upload is still acting as if all 5 are there. kendoUpload.getFiles() is always showing me every file they selected.

 

Just be clear, I am trying to remove a file from memory before the user fully uploads them. The process is that they select the files, the files populate a grid, and then once the user is ready they click an 'upload' button that will fire off the server call. Prior to them clicking upload everything is client side.

Neli
Telerik team
 answered on 19 Nov 2021
1 answer
103 views

Could you please help me to change the default design of kendo file upload.

I want to display my custom design on the web page for users. Also , I want to give both functionalities like below

 

---------------------------------------------------------

 

Drag and Drop File or Browse File

 

----------------------------------------------------------

Martin
Telerik team
 answered on 27 Oct 2021
1 answer
427 views

How to add upload widget inside form widget.

Like the combobox in the sample of forms. I need to put upload file inside the form.

 

thanks.

Martin
Telerik team
 answered on 14 Sep 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
MIS
Top achievements
Rank 1
Ross
Top achievements
Rank 1
Marcin
Top achievements
Rank 1
Iron
Iron
Sean
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
MIS
Top achievements
Rank 1
Ross
Top achievements
Rank 1
Marcin
Top achievements
Rank 1
Iron
Iron
Sean
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?