Input File

Substitui o input=file por qualquer botão

<form method="POST" action="" enctype="multipart/form-data">
    <div class="upload">
        <input id="inputfile_btn" type="file" accept=".*" name="" />
        <label for="inputfile_btn" class="btn progress lg">Escolher Arquivo</label>
    </div>
</form>

Substitui o input=file por qualquer botão e exibe o nome do arquivo

<form method="POST" action="" enctype="multipart/form-data">
    <div id="upload_filename" class="upload">
        <input id="inputfilename" type="file" accept=".*" name="" />
        <label for="inputfilename" class="btn outline success lg">Escolher Arquivo</label>
    </div>
</form>

Exibir arquivo de imagem no upload

Envio e exibição de uma imagem

<form method="POST" action="" enctype="multipart/form-data">
    <div id="singleimage" class="upload readers">
        <input id="singlefile" class="files_reader" type="file" 
            accept=".gif, .jpg, .jpeg, .png, .webp" name="" />
        <label for="singlefile" class="btn flash lg upper">Escolher Imagem</label>
    </div>
</form>

Envio e exibição de multiplas imagens

<form method="POST" action="" enctype="multipart/form-data">
    <div id="multimages" class="upload readers">
        <input id="multfiles" class="files_reader" type="file" accept="gif, .jpg, .jpeg, .png, .webp" multiple name="" />
        <label for="multfiles" class="moon new lg"><span>Escolher Imagens</span></label>
    </div>
</form>

.upload input[type=file] {
    display: none !important;
}
/**-----------------------------------
 * Altera todo o padrao por um botao e exibe caminho com nome do arquivo
 *                                   									*/
.filename {
    font-size: 1.05rem;
    color: var(--color);
    font-family: var(--fontMono);
}

/**....................................
 * 
 * FileReader image:
 *....................................*/
.output {
    margin-top: 15px;
}

/* multiple */
.output [class^=cn_] div {
    position: relative;
    height: 75vw;
    margin: 0.225rem;
    background-color: rgba(255, 255, 255, 0.10);
    border: 2px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
}
@media(min-width: 768px) {
    .output.flexbox.pack {
        margin-right: -0.225rem;
        margin-left: -0.225rem;
    }
    .output [class^=cn_] {
        padding: 0 0;
    }
    .output [class^=cn_] div {
        height: 15vw;
    }
}
.output [class^=cn_] div img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100%;
    margin: auto;
    transform: translate(-50%, -50%);
}

/* single */
.output .cn_100 {
    padding: 0.225rem;
}

let upload = {
    upload: document.querySelectorAll(".upload"),
    inputfile: function() {
        this.upload.forEach(element => {

            var label = element.querySelector("label");
            label.addEventListener('click', function() {
                this.classList.add("focus");
                setTimeout( function() {
                    label.classList.remove("focus");
                }, 60000);
            });
            var input = element.querySelector("input[type=file]");
            input.addEventListener('change', function() {
                label.classList.remove("focus");
            });


            if(element.hasAttribute("id")) {
                var self = document.getElementById(element.id);
                var input = self.querySelector("input[type=file]");
                var filename = document.createElement("span");
                filename.classList.add("filename");
                self.append(filename);
                input.addEventListener('change', function() {
                    filename.textContent = this.value.replace(/C:\\fakepath\\/i, "");
                });

                if(self.classList.contains("readers")) {
                    self.removeChild(self.querySelector(".filename"));
                    var output = document.createElement("div");
                    output.className = "output flexbox pack";
                    self.append(output);
                    var output = self.querySelector(".output");
                    input.addEventListener('change', function(event) {
                        var files = event.target.files;
                        for(var i = 0; i < files.length; i++) {
                            var file = files[i];
                            if(!file.type.match('image')) 
                                continue;
                            var reader = new FileReader();
                            reader.onload = event => {
                                var fileName = file.name.replace(/\.[^/.]+$/, "");
                                if(this.hasAttribute("multiple")) {
                                    var col = document.createElement("div");
                                    col.classList.add("cn_25");
                                    output.prepend(col);
                                    var innerCol = document.createElement("div");
                                    col.prepend(innerCol);
                                    var image = document.createElement("img");
                                    image.src = event.target.result;
                                    image.title = file.name;
                                    image.alt = fileName;
                                    innerCol.prepend(image);
                                } 
                                else {
                                    output.innerHTML = `
                                    <div class="cn_100">
                                        <img 
                                            src="`+event.target.result+`" 
                                            title="`+file.name+`" 
                                            alt="`+fileName+`" />
                                    </div>`;
                                }
                            }
                            reader.readAsDataURL(file);
                        }
                    });
                }
            }
        });
    },
}.inputfile();