locked
how to delete specific file from multiple file chooser RRS feed

  • Question

  • User-1634604574 posted

    how to delete specific file from multiple file chooser?

    Wednesday, January 30, 2019 5:28 AM

All replies

  • User839733648 posted

    Hi zhyanadil.it@gmail.com,

    how to delete specific file from multiple file chooser?

    What does the specific file mean? Do you mean that when choosing the files the specific file be deleted automatically?

    My think is that when you select the multiple files, you can see the list and remove the one you want by yourself.

    I've made a sample and hope may be helpful to you.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    
        <script>
            $(document).ready(function (readyEvent) {
                $(document).on('click', '.close', function (closeEvent) {
                    $(this).parents('span').remove();
                    var fileInput = $('#uploadFile')[0];
                })
    
                $('#uploadFile').on('change', function (changeEvent) {
    
                    var filename = this.value;
                    var lastIndex = filename.lastIndexOf("\\");
                    if (lastIndex >= 0) {
                        filename = filename.substring(lastIndex + 1);
                    }
                    var files = changeEvent.target.files;
                    for (var i = 0; i < files.length; i++) {
                        $("#upload_prev").append('<span>' + '<div class="filenameupload" id="file_' + i + '">' + files[i].name + '</div>' + '<p class="close" >X</p></span>');
                    }
                });
            });
        </script>
        <style>
            .filenameupload {
                width: 98%;
            }
    
            #upload_prev {
                border: thin solid #000;
                width: 30%;
                padding: 0.5em 1em 1.5em 1em;
            }
    
                #upload_prev span {
                    display: flex;
                    padding: 0 5px;
                    font-size: 12px;
                }
        </style>
    </head>
    <body>
        <input type="file" id="uploadFile" name="FileUpload" multiple="multiple" />
        <div id="upload_prev"></div>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    Thursday, January 31, 2019 6:46 AM
  • User-1634604574 posted

    but i want to remove also from choose file

    Monday, February 4, 2019 10:01 AM
  • User-474980206 posted

    no can do. the best (if the browser supports) is filter on mime type. see: accept attribute.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

    Monday, February 4, 2019 5:41 PM