Questions on Kendo UI for jQuery Forum

0 answers

52 views

let uploadedFiles = new kendo.data.ObservableArray([]);
$("#fileInput").kendoUpload({
async: {
autoUpload: false
},
validation: {
allowedExtensions: [".jpg", ".jpeg", ".png", ".xlsx"]
},
multiple: true,
batch: true,
showFileList: true,
select: onSelect,
remove: onRemove
});

function onSelect(e) {
const files = e.files;
const previewContainer = $("#imagePreviewContainer");

// Loop through selected files and add them to the uploadedFiles array
files.forEach(file => {
uploadedFiles.push(file);

};

i am using this but when i selected multiple files like images then all selected files are come into bulk in one array i want that in seperately one by one

Upload

asked on 28 Nov 2024

1 answer

51 views

Chunk Upload Resume Capability

I am trying to implement a way for resuming a chunk file upload based on the last successfully uploaded index (assuming that the .remove() functionality was not used to delete the previous attempt from the server). ChatGPT seems to think this is possible by setting chunkIndex property of e.data in the upload function, but that doesn't seem to affect the starting index based on the ChunkIndex passed in the MetaData property of the subsequent API call. Is there a way to set the starting index of a chunk upload?

Upload

answered on 15 Nov 2024

1 answer

138 views

How to hide/remove the upload/delete button in

After selecting a file in kendoUpload two buttons show up: Upload and Clear:

Is it possible to hide those two buttons? I want to do the upload process programmatically.

I already found out that the two buttons are not accessible after initialization of the kendoUpload widget but also not right away after the SELECT event triggers (on selecting a file to be uploaded). I have found a solution waiting some milliseconds in the SELECT event to hide the two buttons:

setTimeout(function() {
    $('k-actions').css('display', 'none');
}, 10);

Is there a more proper way to hide those buttons?

I'm working with KendoUI for JQuery, very latest official version.

Regards

Button

Upload

answered on 02 Oct 2024

0 answers

63 views

Form and Upload validation

Hi,

We've using a Form component with an Upload component in it. The validation within the Upload works fine but we'd like to check whether a file has been uploaded and / or selected. The "required" part of the Form validation doesn't seem to trigger when no file is selected. Code provided is an item in the Form.

                    {
                        field: "mailingList",
                        label: "Mailing List",
                        colSpan: 2,
                        editor: function (container, options) {
                            $('<input type="file" name="' + options.field + '" id="' + options.field + '"/>').appendTo(container)
                                .kendoUpload({
                                    async: {
                                        saveUrl: "/rates-notices-campaign/save-attach/" + id,
                                        removeUrl: "/rates-notices-campaign/remove-attach/" + id,
                                        autoUpload: true
                                    },
                                    validation: {
                                        allowedExtensions: [".csv", ".xlsx"]
                                    }
                                });
                        },
                        validation: {
                            required: {
                                message: "Mailing List is required"
                            }
                        }
                    }

Thanks

Form

Upload

Validation

asked on 16 Sep 2024

1 answer

102 views

Compress pictures before upload using the upload widget

I use the upload widget in a long-running web app to allow picture upload.

Over the years, the number and size of pictures have increased.

I compress property in the upload widget would be great, however, short of this, has anyone played around with compressing images in the browser in connection with using the upload widget?

/Morten

Upload

answered on 11 Sep 2024

1 answer

114 views

JQuery Upload cimponent to upload files directly to S3 from the browser

Hello,

is there a way to implement an upload directly from browser to S3 bucket using Kendo JQuery component?
It's possible with JS, but the idea is to use fancy Upload component with drag-n-drop and progress bar.

Thanks in advance.

Upload

answered on 09 Jul 2024

1 answer

214 views

FileManager Upload Files OR Folders

Is there any way to make a FileManager widget that will allow for the uploading of both files and folders? I see that the 'directory' option of the Upload prevents the selection of files - https://docs.telerik.com/kendo-ui/api/javascript/ui/upload/configuration/directory - but I can't understand the logic here. Why would this be the case? In any event, if this must be the case, then is there a way to replace the upload widget inside of the FileManager widget on the fly, via a custom toolbar option? Even that would suffice. Or possibly have two upload widgets associated with the FileManager? One for files, and one for directories? If I have to, I'll implement a complete destruction and rebuild of the FileManager in order to facilitate this, but that's obviously far from ideal, especially if users are wanting to upload several different things in a single sitting.

Drag and Drop

FileManager

Upload

answered on 27 Mar 2024

1 answer

81 views

Want to costomized validation

I want to costomised validation, but right now it is showing incorrect validation , I am providing the screen sort and working code. pls provide the correct code so I can costomised the validation.

our working code is:
$("#EnterpriseNote-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("ListEnterpriseNoteData", "Enterprise", new { Id = ViewBag.EnterpriseID }))",
type: "POST",
dataType: "json",
// data: additionalData
}, create: {

url: "@Html.Raw(Url.Action("AddEntrpriseNoteData", "Enterprise", new { newdata = "", Id = ViewBag.EnterpriseID }))",
type: "GET",
dataType: "json",
// data: addAntiForgeryToken
},update: {
url: "@Html.Raw(Url.Action("EditEnterpriseNote", "Enterprise"))",
type: "POST",
dataType: "json",
// data: addAntiForgeryToken
},
destroy: {
url: "@Html.Raw(Url.Action("DeleteEnterpriseNote", "Enterprise"))",
type: "POST",
dataType: "json",
// data: addAntiForgeryToken
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
strNoteText: {
editable: true, type: "string",

validation: {
required: {
message: 'Note Text is required'
},
}
},
strNextReminderDate : { editable: true, type: "date" },
strFirstname: { editable: false, type: "string" },
strAssignedTo: {
editable: true, type: "string",
validation: {
required: {
message: 'PhoneNumber is required'
},
Assignedvalidation: function (input) {
var trimmedValue = input.val().trim();
debugger
if (input.val() == "") {
var acv = $(".k-tooltip-validation[data-for='strAssignedTo']");
acv.text("PhoneNumber is required");

}
return true;
},
}, },
bitClosedYN: { type: "boolean", editable: true, }
}
},
sort: [{ field: "id", dir: "desc" }]
},
requestEnd: function (e) {
if (e.type == "create" || e.type == "update") {
this.read();
}
},
error: function (e) {
//display_kendoui_grid_error(e);
// Cancel the changes

$('#divError').html('<div class="alert alert-danger alert-dismissable">'
+ '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Note cannot be deleted because it is being used.'
+ '</div>');
this.cancelChanges();
},
pageSize: 4,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [10, 15, 20, 50, 100]

},
toolbar: [{ name: "create", text: "Add New" }],
editable: {
confirmation: "Are you sure you want to delete this item?",
mode: "inline",
//mode: "incell"
},
scrollable: false,
///////////////////////////code by puja verma//////////////////////
dataBound: function (e) {

var dataItems = this.dataSource.view();
var isFieldPending = false;
var validationErrors = [];
for (var i = 0; i < dataItems.length; i++) {
if (dataItems[i].strNoteText === "") {
isFieldPending = true;
validationErrors.push("Please Save the new record before clicking Next");
break;

}
}

@*////////////////////code by puja verma///////////////////*@
var nextButton = $("#nexttocomplete");
var validationMessage = $("#validationMessageEnterprisenotes1,#validationMessageEnterprisenotes");
if (isFieldPending || validationErrors.length > 0) {
nextButton.prop("disabled", true);
validationMessage.text(validationErrors.join('\n'));

}

else {
nextButton.prop("disabled", false);
validationMessage.text("");
}
},
///////////////////////////code by puja verma//////////////////////
// dataBound: onDataBound,
columns: [

{
title: "Action",
command: [
{
name: "edit",
text: {
edit: '<i style="color:#B60202;" class="fa fa-edit fa-lg"></i>',
update: '<i style="color:#B60202;" class="fa fa-floppy-o" aria- hidden="true"></i>',
cancel: '<i style="color:#B60202;" class="fa fa-close fa-lg"></i>'
}
},

{
name: "destroy",
text: '<i style="color:#B60202;" class="fa fa-trash fa-lg"></i>'
}
],
width: 130
},

{
field: "strNoteText",
title: "Enterprise Note",
width: 300
},
{
field: "strAssignedTo",
title: "Assigned to",
width: 300,
template: '#=strFirstname#',
editor: function (container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataSource: noteList,
dataTextField: "strFirstname",
dataValueField: "strAssignedTo",
valuePrimitive: true,
autoBind: false,
optionLabel: "Select site admin",
height: 500
})
},
},
{
field: "strNextReminderDate",
title: "Reminder Date",
format: "{0:dd/MM/yyyy}",
width: 300
},
{
field: "bitClosedYN",
title: "Status",
width: 100,
//template: "<input type='checkbox' name='bitClosedYN' checked='checked' disabled='disabled' />",
template: "#= (bitClosedYN == true ) ? 'Yes' : 'No' #",
attributes: { class: "ob-fld-boolean" },
}

]
});

Grid

Upload

answered on 21 Feb 2024

1 answer

243 views

KendoUpload is not a function

I've been trying to update from an older version 2019.3.1114 to a newer version, but from 2020.1.114, which is the next on the list that's not internal https://www.npmjs.com/package/@progress/kendo-ui?activeTab=versions, an onwards, I get the same error

kendoUpload is not a function.
RIght now I'm just trying to upgrade to the newest version but regardless I still get the same error. It sets some other kendo stuff on
$('files') as you can see from the screenshot, (kendoAddClass, kendoAnimate etc.) but not kendoUpload

On
https://docs.telerik.com/kendo-ui/controls/upload/get-started
It says I should make the "files" input which I have
and it says I should call kendoUpload on files which I'm trying to but it doesn't exist
I thought it was a timing issue so I put it into a setTimeout, but it's still not there

Looking at
https://docs.telerik.com/kendo-ui/backwards-compatibility/2020-backward-compatibility
There's nothing that suggests that kendoUpload should break or act different from 2019 to 2020 versions as far as I can see.

Is there something else I'm missing? Do I need to activate it somehow? I'm loading both kendo.all.js and kendo.upload.js, I tried with just all.js first.

Upload

answered on 25 Jan 2024

1 answer

143 views

Parameters uploadUrl kendoFileManager

Hi,

I need to send some dynamic parameters, (path and others), when uploading files from js.
I've tried several ways, without success. Can anyone help me?

FileManager

Upload

answered on 07 Dec 2023