How do i restrict the user add duplicates and specific file format

Question

How can I achieve gmail style of file uploading. From the below code i can select multiple file and am displaying selected files with anchor tag. How can i avoid duplicate files and adding and How to restrict the user to select only pdf and doc file? i need to alert if user select duplicate or if user select other than doc or pdf

<div class="container">

    <form id="fileupload" action="#" method="POST" enctype="multipart/form-data">

        <div class="row files" id="files1">
            <h2>Files 1</h2>

                Browse  <input type="file" name="files1" multiple />

            <br />
            <ul class="fileList"></ul>
        </div>
        </form>
</div>

     var filesToUpload = [];
var output = [];
$.fn.fileUploader = function (filesToUpload) {
    this.closest(".files").change(function (evt) {

        for (var i = 0; i < evt.target.files.length; i++) {
        var found = false;
        for(var j = 0; j < filesToUpload.length; j++){
          if(evt.target.files[i].name == filesToUpload[j].name){
              found = true;
              break; 
               }
           }
           if(found == false){
   filesToUpload.push(evt.target.files[i]);
  }
  else{
  alert("duplicate");
  }
        }

        for (var i = 0; i < evt.target.files.length; i++) { 
        var file= evt.target.files[i];      
                var found = false;
        for(var j = 0; j < filesToUpload.length; j++){
          if(evt.target.files[i].name == filesToUpload[j].name){
              found = true;
              break; 
               }
           }   

           if(found == false){   
            var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + i + "\">X</a>";
            output.push("&nbsp&nbsp&nbsp<li><strong>",file.name,"</strong>&nbsp",removeLink,"</li> ");
  }
  else{
  alert("duplicate");
  } 
            }

        $(this).children(".fileList").append(output.join(""));
    });
};



$(document).on("click",".removeFile", function(e){
    e.preventDefault();
    var fileName = $(this).parent().children("strong").text();
     // loop through the files array and check if the name of that file matches FileName
    // and get the index of the match
    for(i = 0; i < filesToUpload.length; ++ i){
        if(filesToUpload[i].name == fileName){
            //console.log("match at: " + i);
            // remove the one element at the index where we get a match
            filesToUpload.splice(i, 1);
        }   
    }
    //console.log(filesToUpload);
    // remove the <li> element of the removed file from the page DOM
    $(this).parent().remove();
});


    $("#files1").fileUploader(filesToUpload);
    $("#files2").fileUploader(filesToUpload);

    $("#uploadBtn").click(function (e) {
        e.preventDefault();
    });

after selecting multiple files what you want to do ? – Darshan Dave Feb 06 '18 at 10:19 — Darshan Dave, Feb 06 '18 at 10:19
do you want to send it in back end method ? – Darshan Dave Feb 06 '18 at 10:24 — Darshan Dave, Feb 06 '18 at 10:24
not getting how to do that.. – mantelinga r Feb 06 '18 at 10:25 — mantelinga r, Feb 06 '18 at 10:25
https://stackoverflow.com/a/5628027/5286817 – Darshan Dave Feb 06 '18 at 10:26 — Darshan Dave, Feb 06 '18 at 10:26
and which back end are you using ? – Darshan Dave Feb 06 '18 at 10:27 — Darshan Dave, Feb 06 '18 at 10:27

srinivas gowda · Accepted Answer · 2018-02-12T18:35:16.880

$.fn.fileUploader = function(filesToUpload) {
    this.closest(".files").change(function(evt) {
                        var index;
                        for (var i = 0; i < evt.target.files.length; i++) {
                            index = filesToUpload.indexOf(evt.target.files[i]);
                            if (index > -1) {
                                filesToUpload.splice(index, 1);
                            }
                        }
                        for (i = 0; i < evt.target.files.length; i++) {
                            var filename = evt.target.files[i].name;
                            var valid_extensions = /(\.pdf|\.doc|\.docx)$/i;                            
                            if (valid_extensions.test(filename)) {
                                for (var i = 0; i < evt.target.files.length; i++) {
                                    filesToUpload.push(evt.target.files[i]);
                                };
                                var output = [];
                                for (var i = 0, f; f = evt.target.files[i]; i++) {
                                    var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\""+ i + "\">Remove</a>";
                                    output.push("<li><strong>", escape(f.name),"</strong> - ", removeLink,"</li> ");
                                }
                                $(this).children(".fileList").append(output.join(""));
                            } else {
                                alert('Invalid File');
                                return false;
                            }
                        }
                    });
};

var filesToUpload = [];
$(document).on("click", ".removeFile", function(e) {
    e.preventDefault();
    var fileName = $(this).parent().children("strong").text();
    // loop through the files array and check if the name of that file matches
    // FileName
    // and get the index of the match
    for (i = 0; i < filesToUpload.length; ++i) {
        if (filesToUpload[i].name == fileName) {
            // console.log("match at: " + i);
            // remove the one element at the index where we get a match
            filesToUpload.splice(i, 1);
        }
    }
    // console.log(filesToUpload);
    // remove the <li> element of the removed file from the page DOM
    $(this).parent().remove();
});

$("#files1").fileUploader(filesToUpload);
$("#files2").fileUploader(filesToUpload);

$("#uploadBtn").click(function(e) {
    e.preventDefault();
});

How do i restrict the user add duplicates and specific file format

1 Answers1