CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapfile-uploadimage-uploading
Marcelo Martins
Marcelo Martins

Reputation: 150

Restrict File Type to Multiple File Uploader

I would like some help in allowing only JPG, PNG, PDF, and DOCX files to be uploaded with the solution found at this JSFIDDLE Demo

The javascript that performs the file uploading is as follows:

function makeFileList() {
    var input = 
document.getElementById("filesToUpload");
    var ul = 
document.getElementById("fileList");
    while (ul.hasChildNodes()) {
      ul.removeChild(ul.firstChild);
    }
    for (var i = 0; i < input.files.length; i++) {
      var li = document.createElement("li");
      li.innerHTML = input.files[i].name;
      ul.appendChild(li);
    }
    if (!ul.hasChildNodes()) {
      var li = document.createElement("li");
      li.innerHTML = 'No Files Selected';
      ul.appendChild(li);
    }
  }

I do not need a warning to be displayed if a user attempts uploaded a file type that is not whitelisted. So the outcome is to only show the allowed files on the screen.

Thank for your any help!

Upvotes: 0

Views: 85

Answers (1)

Narendra
Narendra

Reputation: 4574

Add the accept=".jpg,.png,.pdf,.docx" in input.

<input type="file" name="filesToUpload" id="filesToUpload" multiple="" accept=".jpg,.png,.pdf,.docx" onchange="makeFileList();">
</div>

Upvotes: 1

Related Questions