Get the selected index when clicking Remove button

[PK1402]

Hi,

I am using Kendo UI async upload for uploading files to our storage.

I am retrieving the Modified file name after each upload and return to the UI. (for unique  identification)

Since I am having multiple upload I need a facility to delete any row after uploading it. (which will delete from the storage using the controller method)

but when I try to delete the second row onwards I am getting the concatenated file names in the controller instead of the selected file name.

So I tried different things. but no luck. (including the onComplete(e) function given below)

So all I need is find the index of the Remove button clicked. Then I can find the actual <li> element and set its value as the corresponding file name.

Please help.. Please let me know if you need any more information. Thanks.

This is my code :

View

<section>
<script>
    function onSuccess(e) {
        if (e.operation == 'upload') {
            if (e.response.data != '') {
                $('.k-upload-files.k-reset').each(function () {
                    $(this).find('span.k-filename').each(function (index) {
                        var current = $(this);
                        if (current.children().size() > 0) {
                            var fileName = e.response.data[0].FileName;
                            if (current.children().size() == 1 && index == 0) {
                                $(this).text('');
                                $(this).text(fileName);
                            }
                            else if (current.children().size() <= index) {
                                $(this).text('');
                                $(this).text(fileName);
                            }
                        }
                    });
                });
            }
        }
    }

    function onComplete(e) {
        $('.k-upload-files.k-reset').each(function () {
            $(this).find('span.k-filename').each(function (index) {
                var current = $(this);
                var fileName = current.text();
                if (fileName != '') {
                    if (e.files != undefined) {
                        if (e.files[index] != undefined) {
                            e.files[index].name = fileName;
                        }
                    }
                }
            });
        });
    }

    function onFileRemove(e) {
        // Here I need to find the index of the Remove button clicked <li>.
        var fileName = $("span.k-filename").text();
        if (fileName != '') {
            e.files[0].name = fileName;
        }
    }
</script>

<div>
        @(Html.Kendo().Upload()
        .Name("files")
        .Messages(msg => msg
            .DropFilesHere("Please drop the files here to upload..")
            .Select("Please select the file to upload by clicking the Select File button..<br /><br />")
            .StatusUploaded("File Successfully Uploaded to Azure Storage..      File Name : ")
            .StatusFailed("File Uploading Failed..")
            .StatusUploading("Uploading the file now....."))
        .ShowFileList(true)
        .Multiple(true)
        .Async(a => a
            .Save("Save", "Upload")
            .AutoUpload(true)
            .Remove("Remove", "Upload"))
                .Events(events => events
                     .Success("onSuccess")
                     .Complete("onComplete")
                     .Remove("onFileRemove")
                 )
        )
    </div>
</section>

Controller

=======

public ActionResult Save(IEnumerable<HttpPostedFileBase> files)
        {
            // getting the filename after uploading and send back to the client.
            return Json(
               new
               {
                   status = 1,
                   data = new[] {
                        new { FileName = fileName }
                    }
               }, "text/plain");
        }

        public ActionResult Remove(string[] fileNames)
        {
            var errors = new List<string>();
            if (fileNames != null)
            {
                foreach (var fileName in fileNames)
                {
                    errors = DeleteFroStorage(filename); //here I am getting myfile4V_6.txtmyfile4V_7.txt” when I upload 2 txt files instead of the selected file name
                }
            }

            return Json(
              new
              {
                  status = 1,
                  data = new[] {
                        new { Error = errors }
                    }
              }, "text/plain");
        }

My rendered html looks like this.

  <div class="k-widget k-upload">
    <div class="k-dropzone">
      <div class="k-button k-upload-button">
        <input id="files" name="files" type="file" data-role="upload" multiple="multiple" autocomplete="off" />          
      </div>
      <em>Please drop the files here to upload..</em>
    </div>
    <ul class="k-upload-files k-reset">
      <li class="k-file">
        <span class="k-icon k-success">File Successfully Uploaded to Azure Storage..      File Name : </span>
        <span class="k-filename" title="myfile4.txt">myfile4V_6.txt</span>
        <button type="button" class="k-button k-button-icontext k-upload-action">
          <span class="k-icon k-delete"></span>Remove
        </button>
      </li>
      <li class="k-file">
        <span class="k-icon k-success">File Successfully Uploaded to Azure Storage..      File Name : </span>
        <span class="k-filename" title="myfile4.txt">myfile4V_7.txt</span>
        <button type="button" class="k-button k-button-icontext k-upload-action">
          <span class="k-icon k-delete"></span>Remove
        </button>
      </li>
    </ul>
  </div>

[Dimiter Madjarov]

Hi Liju,

To achieve this, you should also change the name of the file in the file collection in the success event handler. This way, when the remove button is clicked, the correct file name will be send to the Action.
E.g.

function onSuccess(e) {
      ...

    e.files[0].name = fileName;

}

 

Kind regards,
Dimiter Madjarov
the Telerik team

[PK1402]

Hi Dimiter,

Thanks for your reply. That's what I want.

one more thing..is there any easy way to change the text showing in each row after uploading.. I am doing the following code to do that.
I am not happy with this way.
Please advise,

function onSuccess(e) {
            if (e.operation == 'upload') {
                if (e.response.data != '') {
                    //This is to set the filename to the generated one which can be used for delete operations
                    e.files[0].name = e.response.data[0].FileName;

                    //This is to show the filename in the UI
                    $('.k-upload-files.k-reset').each(function () {
                        $(this).find('span.k-filename').each(function (index) {
                            var current = $(this);
                            e.files[0].name = e.response.data[0].FileName;
                            if (current.children().size() > 0) {
                                var fileName = e.response.data[0].FileName;
                                if (current.children().size() == 1 && index == 0) {
                                    $(this).text('');
                                    $(this).text(fileName);
                                }
                                else if (current.children().size() <= index) {
                                    $(this).text('');
                                    $(this).text(fileName);
                                }
                            }
                        });
                    });
                }
            }
        }

Thanks in advance,
PK

[Dimiter Madjarov]

Hi Liju,

You could use the file name in the jQuery selector, since the title of the span is equal to the name of the uploaded file. Please note that when using this approach, you should first change the name in the UI and then in the files array.
E.g.

function success(e) {
    if (e.operation == 'upload') {
        var fileName = e.response.data[0].FileName;
        var current = $("span.k-filename[title='" + e.files[0].name + "']");
        var progress = current.find(".k-progress");
        current.text(fileName);
        current.append(progress);
        e.files[0].name = fileName;
    }
}

I hope this approach will be more suitable in the current scenario.

 

All the best,
Dimiter Madjarov
the Telerik team

[PK1402]

Thansk Dimiter.
This really helped to fine tune my client code.
Since I am using the multiple upload it is giving a problem to my text. if I am uploading three files then all the three records span text is changing to the third file name. but the filenames array has got the exact file name..only the display text is keep on changing.

so I have updated the title of the current element to the new file name after each upload operation.
Its all working now. Thanks a lot for your prompt help.
I am sharing my code for anyone in the future.

function onSuccess(e) {
            if (e.operation == 'upload') {
                var fileName = e.response.data[0].FileName;
                var current = $("span.k-filename[title='" + e.files[0].name + "']");
                var progress = current.find(".k-progress");
                current.text(fileName);
                current.append(progress);
                e.files[0].name = fileName;
                current.attr("title",fileName);
            }
        }

Thanks,
Liju