Hi,

Is there a way we can add custom images(blob) to Kendo Upload list using jQuery (Before upload to the server)?

Hi All,

I want to add custom button to Kendo Upload, which we can add images to list from clipboard.

Thanks,

Supun

I am using Telerik Kendo File Upload for uploading folder. In Production environment, few users are complaining issue with Folder Upload, during upload few files get errored out, using Developer tool in the console tab it logs "ERR_HTTP2_PROTOCOL_ERROR" error as attached for the failed files.

When i am trying i am not getting this error and all folders are getting uploaded properly. I asked user to share the files for which they are facing error and when i tried it uploaded successfully. When user tried again uploading same files which errored out it got succeeded today which were failing yesterday but sill there are files which is giving the same error.

I went through a post where it say the problem could be due to use of HTTP/2 and when they switched to HTTP /1.1 it worked fine. We are also using HTTP/2 but we don't have option of going back to HTTP/1.1. Link below :

https://www.telerik.com/forums/problems-with-multi-file-upload-and-http-2

Any suggestions ?

I added a custom template for the Upload Widget. The file size (#=size#) prints to a byte value. How can I format the file size (#=size#) to print in KB instead of Bytes - and with two decimals? (like the upload widgets default)

I added the template as a function, as mentioned here.

Thanks for any advice!

Patrick

When using the filemanager's upload button to upload the files, everything works correctly. The files uploaded show on the list and I can see when the file upload is complete.

But if I drag and drop the files into a folder, the files are also uploaded, but I don't see the list of files, if these are large files, I can not tell when the transfer is complete.

How can I make the  filemanager display the show the list of files uploaded when a drag and drop happens?

Hello, I have some problem when use Kendo Upload + Kendo Wizard.

Specifically I'm doing a Kendo Wizard with an .html file.

In the .html file of step 1, I used Kendo Upload to Upload Image.

Then It will show up in the .html file of step 2. But now I can only show in step 1 and I don't know how to show it in step 2

Please help me, thanks!!!

My Kendo Wizard Code:

$("#wizard").kendoWizard({
        loadOnDemand: true,
        reloadOnSelect: false,
        steps: [
            {
                title: "Upload",
                icon: "upload",
                successIcon: "check",
                buttons: ["next"],
                contentUrl: "./step1.html"
            }, {
                title: "Settings",
                icon: "gear",
                successIcon: "check",
                contentUrl: "./step2.html"
            }, {
                title: "Check All",
                icon: "preview",
                successIcon: "check",
                buttons: ["previous", "next"],
                contentUrl: "../content/web/wizard/ajax/ajaxContent4.html"
            }, {
                title: "Save",
                icon: "save",
                successIcon: "check",
                buttons: ["previous", "done"],
                contentUrl: "../content/web/wizard/ajax/ajaxContent4.html"
            },
        ],
        done: function (e) {
            e.preventDefault();
            var form = $("form").getKendoForm();
            var zxy = $("#title").val();

            console.log(zxy);

            if (e.sender.stepper.steps()[1].options.error) {
                e.sender.stepper.steps()[1].setValid(true);
                e.sender.stepper.steps()[2].setValid(true);
            }

            kendo.alert("Thank you for registering!");

        },

        reset: function () {
            var form = $("form").getKendoForm();

            if (form) {
                form.clear();
            }
        }
    });

My step1 is Kendo Upload

<inputname="files"id="files"type="file"/>

$("#files").kendoUpload({
        async: {
            chunkSize: 11000,// bytes
            saveUrl: "https://demos.telerik.com/kendo-ui/upload/chunksave",
            removeUrl: "https://demos.telerik.com/kendo-ui/upload/remove",
            autoUpload: true
        },
        validation: {
            allowedExtensions: [".jpg", ".jpeg", ".png", ".bmp", ".gif"]
        },
        success: onSuccess,
        showFileList: true,
    });
    function onSuccess(e) {
        if (e.operation == "upload") {
            for (var i = 0; i < e.files.length; i++) {
                var file = e.files[i].rawFile;
                if (file) {
                    var reader = new FileReader();
                    reader.onloadend = function () {
                        $("<div class='product'><img src=" + this.result + " /></div>").appendTo($("#products"));
                    };
                    reader.readAsDataURL(file);
                }
            }
        }
    }

My step 2 is form, I want to show the image uploaded in step 1 above the form. And I'm having trouble here

<form>

<div class="wrapper">

 
<div id="products"></div>
</div>

<input type="text" id="title" name="title" class="k-textbox" />
</form>

Demo:

Step 1: Upload (Image step1.png)

Step2: Input Information (Image step2.png)

How to use kendo upload file to send xlsx to api?

service is using closedxml to store data to datatable.

I saved file in server with unique name. so i change the file name while uploading. My issue is, when I upload file, I need to update the k-files to show only changed name. but now, it is displaying original file name.

$("#MediaFiles").kendoUpload({ async: { removeUrl: "/Pepsico/Remove", saveUrl: "/Pepsico/Save", autoUpload: true }, files: $scope.pepsicoNomination.MediaFiles, validation: { allowedExtensions: [".pdf"] }, upload: fileUplaodValidation, success: onMediaSucess, error: onError }); function onMediaSucess(e) { if (e.response.media == "") { $scope.$apply(function () { $rootScope.showFailureMsg("There is an issue while uploading your file. Please contact customer support"); }); var fileStatus = document.getElementsByClassName('k-upload-status-total') $(fileStatus).hide(); } else { $scope.pepsicoNomination.MediaFiles.push({ name: e.response.media }); } }

Here files in kendo upload not update after success.

Is there any way to update files?

Thanks

Is the code below still the only way to set the required AngularJS XSRF token when uploading or removing files? The value of the token needs to be taken from the XSRF-TOKEN cookie.

function onUpload(e) {

var xhr = e.XMLHttpRequest;

if (xhr) { xhr.addEventListener("readystatechange", function (e)

    {if (xhr.readyState == 1 /* OPENED */) {

         xhr.setRequestHeader("X-Foo", "Bar");

    }})}}