Get file list in onComplete event?

[Joe]

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?

[Ivan Danchev]

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

[Joe]

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]

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?