Create a Custom Upload Button in JavaScript

For my pixel art app, Pixel V, I want to make it easy to use a reference image layered behind or on top of the user’s drawing. For this tutorial, I’m going to go over how to upload files to a website with HTML and JavaScript, as well as how to style that button with CSS.

In HTML, there’s an <input type=”file”/> which we’ll use for getting our file, but it’s not straightforward to style it. So, we’ll create a label for it and style the label instead, while hiding the input element itself.

HTML

<label for="file-upload" class="custom-file-upload btn">
Upload Background
</label>
<input type="file" id="file-upload"/>

CSS

input[type="file"] {
display: none;
}
.custom-file-upload {
display: inline-block;
margin-left: 24px;
font-size: 20px;
width: 232px;
height: auto;
cursor: pointer;
}

Most of this CSS is totally up to you, but the important part is that input[type="file"] has display: none;.

JS

let uploadBtn = document.querySelector("#file-upload");uploadBtn.addEventListener("change", changeBG);function changeBG() {
let reader;
if (this.files && this.files[0]) {
reader = new FileReader();
reader.onload = (e) => {
bgObject.img.src = e.target.result;
drawCanvas();
};
reader.readAsDataURL(this.files[0]);
}
}

After you select your file, changing the input, this function runs that first confirms there is indeed a file to read, then creates a new FileReader object which you use to read the file, in this case an image file. Because we want the image file as a DataURL, we use .readAsDataURL to read the file. Then in the asynchronous onload function we can set that image as the source for the Image object that we want. In my case, since it’s part of an HTML Canvas set up, I then trigger a re-render of the canvas.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React.js Technical Q&A

How to Improve Data Fetching in React With Suspense?

How to Improve Data Fetching in React With Suspense?

General Javascript questions during an interview.

How to Use SvelteKit with GitHub Pages

@composi/gestures, Cross-browser Gestures for Desktop and Mobile

Diving Into React + Redux

How to Create Powerful Visualizations Easily using Apache Echarts and React

Understand React.createRef in 3 Minutes

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tom Cantwell

Tom Cantwell

More from Medium

Other JS Concepts

On working with Google Maps JavaScript API.

How to connect Strapi v4 to Cloudinary?

Project: Tic-Tac-Toe

game page