Upload the file with the appropriate icon for the extension of the file

Question

I need the function to get the file extension and add the appropriate icon to extend the file.

var uploaded = '';
$('#dropzone-doc #files-doc').on('change', function() {
       uploaded = $(this).val(),
       ext = uploaded.split('.').pop(),
        if (ext === 'pdf') {
            $('#fileTumb').append("<img src='./images/pdf.svg' alt=''>")
        } else {
            console.log('not support')
        }
});

Answer 1

Based on your example here is a jsfiddle. Basically there were some syntax error (missing semicolon) and wrong multiple-selector syntax.

let uploaded = '';

  $('#dropzone-doc, #files-doc').on('change', function() {

    uploaded = $( this ).val();

    ext = uploaded.split('.').pop();

    if (ext === 'pdf') {

      $('#fileTumb').append("<img src='./images/pdf.svg' alt=''>")
      console.log("yeah");

    } else{
          console.log('not support');
    }
 });

Update It need some work :

jsFiddle

$(function () {

    if (window.File && window.FileList && window.FileReader) {
        $("#files-doc").on('change', function (e) {

            var files = e.target.files,


                filesLength = files.length;

            for (var i = 0; i < filesLength; i++) {

                var f = files[i]

                var fileReader = new FileReader();

                fileReader.onload = (function (e) {

                    var file = e.target;
                    var filename = $('#files-doc').val();
                    var imgicon = getImgIcon(filename);

                    if (imgicon != null) {
                        $("<span class='pip-file'>" +
                            imgicon +
                        "<p class='fileThumb' class='fileTumb'></p>" +
                        "<br/><span class='remove-file'><img src='./images/close.svg' alt=''></span>" +
                        "<br/><span class='rename'><input type='text' placeholder='Rename'></span>" +
                        "</span>").insertBefore("#dropzone-doc");

                        $(".remove-file").click(function () {
                            $(this).parent(".pip-file").remove();
                            $('#files-doc').val("");
                        });

                    } else {
                        alert('pdf required')
                    }
                });
                fileReader.readAsDataURL(f);
            }
        });
    } else {
        alert("Your browser doesn't support to File API")
    }


    var uploaded = '';

    function getImgIcon(filename) {
        ext = filename.split('.').pop();
        if (ext === 'pdf')return "<img width='30px' src='https://ahmed22zxk.000webhostapp.com/logosam/images/pdf.svg' alt=''>";
        return null;
    }

});