Filter dynamically added file upload fields for specific file types

Question

I am adding file upload fields using JavaScript.

I need to filter the files so that only PDF files can be uploaded.

Here is what I have so far :

function AddFileUpload() {
    var div = document.createElement('DIV');
    div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +
    '" type="file" />' +
    '<input id="Button' + counter + '" type="button" ' +
    'value="Remove" onclick = "RemoveFileUpload(this)" />';
    document.getElementById("FileUploadContainer").appendChild(div);
    counter++;
}

function RemoveFileUpload(div) {
    document.getElementById("FileUploadContainer").removeChild(div.parentNode);
}

Answer 1

WARNING : Doing this check with Javascript is very, VERY bad. It can be manipulated very easily, and it is definitely not recommended. At all. By anyone. Don't do it.

function AddFileUpload() {
    var div = document.createElement('DIV');
    div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +
        '" type="file" accept="application/pdf"/>' +
        '<input id="Button' + counter + '" type="button" ' +
        'value="Remove" onclick = "RemoveFileUpload(this)" />';
    document.getElementById("FileUploadContainer").appendChild(div);
    counter++;
}

function RemoveFileUpload(div) {
    document.getElementById("FileUploadContainer").removeChild(div.parentNode);
}

To accept a certain type of file, look into MIME file types and the accept attribute. Example site: http://www.w3schools.com/tags/att_input_accept.asp