Prevent selecting files with same filename

5 posts, 1 answers
  1. BigzampanoXXl
    BigzampanoXXl avatar
    60 posts
    Member since:
    Jan 2007

    Posted 11 Mar 2014 Link to this post

    Hello,

    I have an async fileupload in use. What I need is, that a file with the same name can only be selected once.

    e.g.:
    User selects: a.pdf, b.pdf, c.pdf
    > All 3 files are shown in the file list

    User selects: c.pdf, d.pdf
    > Only d.pdf should be added to the file list, because c.pdf has already been added.

    User uploads files
    > a.pdf, b.pdf, c.pdf, d.pdf get uploaded...

    I don't care if its exactly the same file - just a comparison to the filename is enough. What I tried is to manipulate the select-event:
    OnSelect: function (e)
    {
        var selectedFiles = $(".k-upload-files li #fileName");
     
        e.files = $.grep(e.files, function (value)
        {
            for (var i = 0; i < selectedFiles.length; i++)
            {
                if (selectedFiles[i].innerHTML == value.name)
                    return false;
            }
     
            return true;
        });
    }

    Well, that doesn't work so far. The list of files gets minimized correctly but the files are still added to the FileList. Hope someone can help me.

    Thank you!
  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 12 Mar 2014 Link to this post

    Hello Dietmar,


    This could be achieved, but with one limitation - when the user selects multiple files and the select event gets prevented, none of them will be added to the list. In your example - when the user selects c.pdf and d.pdf, none of them will get selected.
    Regarding the exact implementation, it may depend, but here is a sample one.
    E.g.
    function select(e) {
        var selected = e.files;
        var filesInList = $(".k-upload-files .k-filename");
     
        for (var i = 0; i < selected.length; i++) {
            var filename = selected[i].name;
     
            filesInList.each(function () {
                if ($(this).text() === filename) {
                    e.preventDefault();
                }
            });
        }
    }


    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. BigzampanoXXl
    BigzampanoXXl avatar
    60 posts
    Member since:
    Jan 2007

    Posted 12 Mar 2014 in reply to Dimiter Madjarov Link to this post

    Hello Dimiter,

    thank you for your answer but exactly that limitation is the problem. When the user selects multiple files, only the existing files should be prevented to be added to the filelist. Is there somehow a workaround for that? I tried to manipulate the files of the control manually but it seems that i don't have access to them (e.g. like a grids DataSource)

    Thank you!
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 12 Mar 2014 Link to this post

    Hello Dietmar,


    You are correct, that the files collection could not be manipulated inside the event handler and there is no workaround for this. Please excuse us for the inconvenience caused.

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

    Posted 12 Mar 2014 in reply to Dimiter Madjarov Link to this post

    Hello Dimiter,

    thank you for your answer. I will do it your way, preventing the whole event and throwing an alert.
    Hopefully this feature will be available / possible to implement in the future.

    Best Regards,
    Dietmar
Back to Top
Kendo UI is VS 2017 Ready