Changing file-upload button appearing and destination of uploaded file name

Question

In my website, I want to upload a file but default button and place of the name of the file appears doesn't look appealing. So my question is how to make changes in their appearings and locations?

Answer 1

File uploaded input can be set to display: none in order not to make it visible anymore but still functional. After that, with JQuery or Javascript, another button can be used to trigger the file upload button on click. For redirecting the file name to another place I have used Javascript to get the input[type='file'] element on change and strip file name from it as done below:

<div class="form-group">
            <label>File upload</label>
            <input name="file" type="file" class="file-upload-default">
            <div class="input-group col-xs-12">
                <p id="id_uploaded_file" class="form-control file-upload-info"><span class="text-muted" >Uploaded file's full name</span></p>
                <span class="input-group-append">
                    <input id="id_file" type="file" name="file" class="file-upload-browse btn btn-gradient-primary" style="display: none;" required />
                    <button type="button" id="id_button_upload" class="file-upload-browse btn btn-gradient-primary">Upload</button>
                </span>
            </div>
        </div>
    </div>
</div>

---

<script>
    $(document).ready(function () {
        $('#id_button_upload').click(function () {
            $('#id_file').click();
        });

        (function(){

            // Attach the change event listener to change the label of all input[type=file] elements
            var els = document.querySelectorAll("input[type=file]"),
                i;
            for (i = 0; i < els.length; i++) {
                els[i].addEventListener("change", function() {
                    var label =document.getElementById('id_uploaded_file');
                    label.innerHTML = this.files[0].name;
                });
            }

        })();
    });

</script>

Appearing has been done adjusted with bootstrap 4 .