How to clear selected files on file upload control after a successful upload?

14 posts, 0 answers
  1. Nathan
    Nathan avatar
    6 posts
    Member since:
    Jan 2012

    Posted 08 May 2012 Link to this post

    I am using asynchronous file upload, where the user cannot select multiple files. Once the upload has completed successfully, I want to remove the selected file from the display. How can I do this?

    I tried 
     $(".k-upload-files").remove() 

    it removed the value from the display, but if the user selected another file and tried to upload again, then it would actually post the old file, not the newly selected file.

    I also tried
    $("#attachments").parents(".t-upload").find(".t-upload-files").remove() 

    but it did not work
  2. Brian
    Brian avatar
    2 posts
    Member since:
    Jun 2012

    Posted 25 Jun 2012 Link to this post

    I've been trying to get this to work as well, and would love to know a solution when someone gets it to work.
  3. Kendo UI is VS 2017 Ready
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 28 Jun 2012 Link to this post

    Hello guys,

    To achieve this you could hook up to the success event of the Kendo UI Upload and then remove the all <li> elements. For example: 
    $("#files").kendoUpload({
      //...
      success: function () {
         $(".k-upload-files.k-reset").find("li").remove();
      }
    });

    I hope this helps.
     
    Greetings,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Eric
    Eric avatar
    19 posts
    Member since:
    Mar 2008

    Posted 19 Jul 2012 Link to this post

    Hi Iliana,

    Good idea with the OnSuccess handler, but when I do this with multiple file selection enabled it actually has side effects where only the first selected file gets uploaded, the others do not complete for some reason.  When I remove the provided success handler code the multi-file upload works fine.  Not sure if it's causing the cancel event to get fired or something else.

    What did work for me was something similar:
    1) Handled the "Complete" event instead of the "Success" event.  Complete appears to only be fired once at the end of all uploads.
    2) Used the following slightly different selector to remove the entire UL instead of just the items because just removing the LI tags left an empty border in place.

        function onComplete() {
            $(".k-widget.k-upload").find("ul").remove();
        }   

    This would be a great feature to have built into the control.

    Thanks for the original guidance as it got me in the right direction.
    Eric
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 24 Jul 2012 Link to this post

    Hello Eric,

    The implementation of such functionality is not in our immediate plans, however we may consider it for future releases. If you wish, you can create an entry at our UserVoice page - the community interest in the idea will influence on our decision towards implementing it.
     
    Greetings,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Kris Nobels
    Kris Nobels avatar
    15 posts
    Member since:
    Aug 2009

    Posted 10 Jun 2013 Link to this post

    I use this

    $(".k-upload-files.k-reset").find("li").parent().remove();
  8. Neal
    Neal avatar
    1 posts
    Member since:
    Nov 2013

    Posted 18 Jan 2014 Link to this post

    Hi - This problem has been driving me absolutely crazy, but I have a workaround to the problem of the control posting the previously selected file on subsequent post backs.  What seems to be happening when you clear the previously selected files and the user selects a new file is BOTH are being sent to the server.   To deal with this, I see if there are multiple files in the HttpPostedFileBase, and if so, I just use the last one.

    Obviously, this workaround presents a few problems

    1. . Unnecessary data is being posted to the server
    2.  It will not work if you are looking to take advantage of the multi-image upload functionality. 

    Here is what I did on my  controller.  I hope someone benefits from this.

            public JsonResult UploadImage(string catalogItemId, string action, IEnumerable<HttpPostedFileBase> imageFiles)
            {
                var files = imageFiles.ToList();
                HttpPostedFileBase correctFile;
                if ( files.Count() > 1 )
                {
                    correctFile = files.LastOrDefault();
                }
                else
                {
                    correctFile = files.FirstOrDefault();
                }
      // etc

  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 20 Jan 2014 Link to this post

    Hi Neal,


    I was unable to reproduce the issue with the previous files being send again on my side. Could you please provide additional details about the scenario, in which this is reproducing and the Kendo UI version, being used?

    I am looking forward to hearing from you.

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. MarkS
    MarkS avatar
    3 posts
    Member since:
    Jul 2004

    Posted 02 Jun 2015 in reply to Dimiter Madjarov Link to this post

    I am seeing the same problem that Neal described. The upload control is sending previous files along with the most recent selected one. This happens when I use a form submit for the non-async file upload on a page that has other ajax handled controls. I want to stay on the same page after the file upload - I show and hide the file upload control via a button click.

    I think the issue is related to defining the upload form tag using a target="hiddenIframe". I do this so I can stay on the same page and get a json result from the server after the file is uploaded. 

    I use this code: http://www.telerik.com/forums/reset-upload#wdqTkHeSn0WBvhHftPbwPg  to clear the file control UI after uploading a file, and that is working, but it still uploads previous files on subsequent uploads when using an iframe as the target of the form submit. I'm using kendo version 2015.1.408.

    -Mark 

     

     

  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 03 Jun 2015 Link to this post

    Hello Mark,

    The current topic is related to the async version of the Upload widget. The synchronous one does not preserve files on page reload and basically does not differ from a regular <input type"file" /> element.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. MarkS
    MarkS avatar
    3 posts
    Member since:
    Jul 2004

    Posted 03 Jun 2015 in reply to Dimiter Madjarov Link to this post

    Hi Dimiter,

    I created a simplified snippet that shows the problem here: http://dojo.telerik.com/eTeJE 

    I submit the form using javascript. If you upload a file, then another and so on, you'll get multiple files uploading to the server. There's no page refresh to reset the control, and it is leaving the generated hidden input in the dom after the file upload. So for the next upload, it generates another hidden input and sends two files.

    The fix is to remove the hidden input (as part of the 'reset' code) before doing the next upload:

    $("[data-role='upload']").filter(function() { return $(this).css("display") == "none" }).remove();

     It would be nice to have a reset() method on the upload control that would return it to it's initial state.

    -Mark

     

     

  13. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 04 Jun 2015 Link to this post

    Hello MarkS,

    The current approach for resetting the Upload widget state only refreshes it visually. The actual input elements containing the files are still present in the form. They are inside the k-upload-button div element. You should remove them too in order to no submit the files multiple times.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  14. Larenzo
    Larenzo avatar
    1 posts
    Member since:
    Jan 2013

    Posted 03 Sep 2015 Link to this post

    Close all the elements using the close button with javascript:

     

    $(".k-upload-action.k-button.k-button-bare").trigger("click");​

  15. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 04 Sep 2015 Link to this post

    Hello Larenzo,

    This is correct. Similar approach would be something like:

    $("span.k-delete").each(function(){
       $(this).closest("button").click();
    });

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready