I have a kendo upload on my page where users can upload multiple files. It is NOT set to batch mode, so each file is uploaded individually. I need to use the same upload and the same set of files on two different endpoints. For the first endpoint, I need to upload only the first file. For the second endpoint, I need to upload every file (including the first one). I have two separate buttons that will trigger these. There is also some custom data that I need to include from other controls on the page (like a name, address, etc). How would I accomplish this? 

Button 1: Upload the first file to Endpoint A with extra data Y

Button 2. Upload all of the files to Endpoint B with extra data Z

 

This is the actual flow

1. Select all files

2. Analyze First File (upload only the first file to the server)

3. Server responds with some info about the file ({ type: "text", "author: "John Smith", creditor: "Wells Fargo", etc }

4. This data is placed in some inputs on the page where the user can change it, for example, the system says the author is John Smith but it is really Jane Doe. In my scenario, all files must use the same data regardless of what files 2 through X may contain, so even if Jack Jackson's name appears in File 2, we are using Jane Doe. This whole process is really just to make it easier when the user fills out the data form so that they just update the stuff that is wrong.

5. After the user approves the data in the inputs, they click a submit button. At this time, all of the files are uploaded along with the edited input data object {type: "text", author: "Jane Doe", creditor: "Wells Fargo", etc }

Example:

Upload:
[ Select Files...]

[ Test First File ]

Fill out the form:
Type:       _________
Author:   _________
Creditor: _________

Click the button below to upload all files using the data entered in the form.

[ Upload Files ]

 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 

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?

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

 

 

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.

 

Thanks

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

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.

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.

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">&times;</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" },
                                                }

                                                    ]
                                                });

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.