Custom File Upload Button | HTML + CSS + JavaScript

custom-file-upload-button-html-css-javascript.markdown

Custom File Upload Button | HTML + CSS + JavaScript

This is code for a basic custom file upload button in HTML, CSS and JavaScript. See the full video tutorial here: https://youtu.be/T3PDgtliezo

A Pen by Dom on CodePen.

License.

index.html

<input type="file" id="real-file" hidden="hidden" />
<button type="button" id="custom-button">CHOOSE A FILE</button>
<span id="custom-text">No file chosen, yet.</span>

script.js

const realFileBtn = document.getElementById("real-file");
const customBtn = document.getElementById("custom-button");
const customTxt = document.getElementById("custom-text");

customBtn.addEventListener("click", function() {
  realFileBtn.click();
});

realFileBtn.addEventListener("change", function() {
  if (realFileBtn.value) {
    customTxt.innerHTML = realFileBtn.value.match(
      /[\/\\]([\w\d\s\.\-\(\)]+)$/
    )[1];
  } else {
    customTxt.innerHTML = "No file chosen, yet.";
  }
});

style.css

#custom-button {
  padding: 10px;
  color: white;
  background-color: #009578;
  border: 1px solid #000;
  border-radius: 5px;
  cursor: pointer;
}

#custom-button:hover {
  background-color: #00b28f;
}

#custom-text {
  margin-left: 10px;
  font-family: sans-serif;
  color: #aaa;
}

Nice, thx, exactly what I was looking for, good tutorial

instead of the file name, I want to display a selected image
so, how am I supposed to do that?