Nice file upload interface using Jquery

We all know how to upload a file using html form. But I thought to improve that interface a bit using JQuery (Of course I used CSS but i'm writing about JQuery part).

So here is the usual html file uploading interface

I wanted to show a button to choose file and After choosing display a button to upload that file. Chosen file name also displayed in a nice way. As follows

Here is how I did that using JQuery (CSS part will not be explained)

1.Two buttons (upload, choose) and an input element that is of type file added to my HTML. An extra div element also added to display the chosen file name

<div id="f1" ></div>
        <form action="" method="post" enctype="multipart/form-data">
                    <div class="form-inline">
                        <div class="form-group ">
                            <input type="file" accept=".pdf" name="file" id="1" class="btn btn-primary offset-top-2" onchange="fileAccess('f1', '1'); " />                       
                           <div class="form-group ">   
                         <input type="submit" id="submitForm" class="btn btn-primary offset-top-2" value='Upload' onclick="return validateFileSubmit()" />
</div>
                        <div class="form-group ">
                            <input type="button" id="choosebtn" class="btn btn-primary offset-top-2" value='Choose' onclick="callFileSelectBtn()" />
                        </div>                      
                       
                    </div>
                </form>

2.JavaScript is used to hide the Input element and Upload button to get a view as in above picture

hide();
    hideUploadBtn();
            

    function hideUploadBtn() {
        document.getElementById("submitForm").style.display = 'none';
        document.getElementById("choosebtn").style.display = 'block';
    }

    function hide() {
        document.getElementById("1").style.display = 'none';
    }

3.Another JavaScript method is added to trigger the input element when click on choose button

function callFileSelectBtn() {
        document.getElementById("1").click();
    }

4.Add JavaScript methods to show the chosen file name and remove the file name and file from input element when "remove" is clicked (As in picture above)

function hideAndShow() {
        document.getElementById("choosebtn").style.display = 'none';
        document.getElementById("submitForm").style.display = 'block';
    }
            
    function fileAccess(idOfDiv, idOfFile) {

        var fileName = document.getElementById(idOfFile).value;
        if (fileName.indexOf("\\") > -1) {
            fileName = fileName.split("\\")[fileName.split("\\").length - 1];
        }
                console.log(idOfDiv);
        var txt = "";
        var extention = fileName.split(".")[fileName.split(".").length - 1];

       
        if (extention == "pdf" || extention == "PDF") {
   
            txt = '<i class="fa fa-file-text"></i>&nbsp;';
            txt = txt + "<span class='cc-caseview-text-trim'>" + fileName + "</span>&nbsp;&nbsp;";
            txt = txt + "<a href='#' class='cc-link-min offset-left-2'onclick=removeF('" +idOfDiv + "','" + idOfFile + "');>Remove</a></p>";
            document.getElementById(idOfDiv).style.display = "block";
            document.getElementById(idOfDiv).innerHTML = txt;
            hideAndShow();
        }
        else {           
            document.getElementById(idOfDiv).style.display = "block";
            document.getElementById(idOfDiv).innerHTML = txt;
        }     
        
    }
            
    function removeF(idOfDiv, idOfFile) {
        
        document.getElementById(idOfFile).value = null;
        
            hideUploadBtn();
            document.getElementById("choosebtn").style.display = 'block';
                console.log(idOfDiv);
            document.getElementById(idOfDiv).style.display = 'none';
        
    }

Thats all I have done except adding some CSS and think this is way better than usual file uploading interface. ;)