This is a migrated thread and some comments may be shown as answers.

Get file list in onComplete event?

1 Answer 87 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 11 Mar 2021, 07:31 PM

Several of the examples use a getFileInfo(e) routine to pull out the file list in the upload control.  This works well in events like onSelect().

Is it possible to retrieve the filename or list of files in the client side onComplete(e) event?

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 16 Mar 2021, 04:09 PM

Hello Joe,

You can get the file list in the "Complete" event's handler, but you should use a slightly different approach.

Instead of the getFileInfo function used by some events (e.g., "Select") in the demo, create another function:

function getFileInfoFromComplete(e) {
  return $.map(e.getFiles(), function(file) {
    var info = file.name;

    // File size is not available in all browsers
    if (file.size > 0) {
      info  += " (" + Math.ceil(file.size / 1024) + " KB)";
    }
    return info;
  }).join(", ");
}

Note that it uses the getFiles() API method of the Upload.

When you call this function, instead of passing the event data (e), you will pass a reference to the Upload (e.sender), as demonstrated below:

function onComplete(e) {
    console.log("Complete :: " + getFileInfoFromComplete(e.sender));
}

This will allow you to use the getFiles method mentioned above.

Give this a try and let us know the results.

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Joe
Top achievements
Rank 1
commented on 18 Feb 2022, 04:26 PM

This isn't working for me.  getFileInfo() always returns an empty string.  I'm not sure what I'm doing wrong, this seems like it should work.  The goal is to send the filename to the method so a background import routine can be launched to process the specified filename.   

 

The upload control looks like:

                    @(Html.Kendo().Upload()
                          .Name("files")
                          .Async(a => a
                              .Save("Async_Save", "UpsBilling")
                              .AutoUpload(true)
                          )
                          .Validation(validation => validation.AllowedExtensions(new string[] { ".csv" }))
                          .Messages(m => m.Select("Select Billing file"))
                          .Multiple(false)
                          .Events( events => events
                              .Complete("onComplete")
                          )
                          )

 


    function onComplete(e) {
        console.log("Upload Complete");

        $.ajax({
            url: '/Admin/UpsBilling/ProcessFiles',
            type: "POST",
            data: { filename : getFileInfo(e.sender) },
            success: function (data) {
                if (data.status == 'Success') {
                    StartProgress();
                    $("#pnlStatus").show();
                    toastr.success(data.message, "Success");
                    
                } else {
                    toastr.error(data.message, "Error");
                }
            },
            error: function (data) {
                console.log("Failure " + data);
            }
        });

    }

And my getFIleInfo is:


    function getFileInfo(e) {
        var fileData = $.map(e.files, function (file) {
            var info = file.name;

            // File size is not available in all browsers
            if (file.size > 0) {
                info += " (" + Math.ceil(file.size / 1024) + " KB)";
            }
            return info;
        }).join(", ");

        return fileData;
    }

Yanislav
Telerik team
commented on 23 Feb 2022, 11:47 AM

Hello Joe, 

I've prepared a sample project that demonstrates the approach suggested above and everything seems to be working as expected. I hope it will help you to resolve the issue. Otherwise, could you try to replicate the issue in a sample project and send it to me, so I can review it and come up with a possible solution?

Tags
Upload
Asked by
Joe
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or