I recently wrote on how to customize the default upload button but I want to explore more into this topic and try other options.

I designed an interface to upload a user avatar

![final look](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5pkkrv9oeuus32qim47.png)

## How to

We'll start with our HTML

```html
<main>
  <input type="file" name="image" id="image" accept="image/*" />
    <div id="preview-wrapper">
      <div id="preview"></div>
      <button
        id="upload-button"
        aria-label="upload image"
        aria-describedby="image"
      >
        🙂
      </button>
    </div>
</main>
```

## Styling

We give some style for our user avatar.

```css
#avatar {
  background-color: antiquewhite;
  height: 200px;
  width: 200px;
  border: 3px solid #0af;
  border-radius: 50%;
  transition: background ease-out 200ms;
}

#preview {
  position: relative;
}
```

We then hide our input

```css
input[type="file"] {
  display: none;
}
```

Then our custom upload button

```css
button {
  padding: 18px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background-color: #08f;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
                         0px 6px 10px 0px rgba(0, 0, 0, 0.14), 
                         0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  transition: background-color ease-out 120ms;
  position: absolute;
  right: -5%;
  bottom: 0%;
}

button:hover {
  background-color: #45a;
}

```

We've reached our design goal 🙌, but we aren't done yet.

## Some JavaScript

### Our initialization
```js
const UPLOAD_BUTTON = document.getElementById("upload-button");
const FILE_INPUT = document.querySelector("input[type=file]");
const AVATAR = document.getElementById("avatar");
```

When our custom button is clicked, we have to programmatically click the input element
```js
UPLOAD_BUTTON.addEventListener("click", () => FILE_INPUT.click());
```

To render our image

```js
FILE_INPUT.addEventListener("change", event => {
  const file = event.target.files[0];

  const reader = new FileReader();
  reader.readAsDataURL(file);

  reader.onloadend = () => {
    AVATAR.setAttribute("aria-label", file.name);
    AVATAR.style.background = `url(${reader.result}) center center/cover`;
  };
});
```

## **WE ARE DONE!!!** 🥳🥳🥳

Source code available at [codepen.io](https://codepen.io/gameshaker/pen/jOrNqRj) and [github](https://github.com/Dchole/custom-upload-btn-2.git)

I recently wrote on how to customize the default upload button but I want to explore more into this t...

Upload user avatar with a custom upload button

Derek Oware

Customizing the input `type="file"` is a bit annoying because it comes with a button and an unchangeable text.

With the `::file-selector-button` pseudo-selector you can edit the default button. It's still annoying because some CSS properties affect both the button and the text and some affect only the button 😒.

Another caveat is browser support. All major browsers except **Firefox** support the pseudo-selector.

You can read about the [::file-selector-button](https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button) for more details.

## How to customize the default upload button

We have our html input tag:

```html
<input id="upload" type="file" accept="image/*" />
```

Then in our css:

```css
input::-webkit-file-upload-button {
  background-color: peru;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px 1px #454545;
  cursor: pointer;
}
```

**Note** that I used `-webkit-file-upload-button` instead of `file-selector-button`. `-webkit-file-upload-button` is for **Webkit/Blink** browsers like **Chrome** and **Opera**.

It's up to you if you wanna keep the "No file chosen" text. In this case, I don't wanna keep it. I'm not sure if it can be removed completely but adding `position: absolute;` puts the text behind the button.

Yayyy!!! 🎉🎉🎉 Now we have our completely customized upload button.

{% codepen https://codepen.io/gameshaker/pen/rNLBxZQ %}

Check out the [full code on codepen.io](https://codepen.io/gameshaker/pen/rNLBxZQ). or clone the [git repo](https://github.com/Dchole/custom-file-upload-input.git)


Customizing the input type="file" is a bit annoying because it comes with a button and an unchangeabl...

Custom file upload button

There's so much difference between Fetch and Axios but my focus is on error handling because it caught my attention in my previous project.

Error handling is an essential part of every application we build thus needs to be done correctly.

From the fetch documentation on [the difference between Fetch and JQuery](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API#Differences_from_jQuery), it shows how fetch handles errors differently but I don't think everyone knows about that because tutorials don't talk about that.

## The issue

I think there's a good reason to why **Fetch** handles request failures the way it does but most devs including me usually forget to handle the result.
From the [docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API#Differences_from_jQuery) :

_"The Promise returned from `fetch()` won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with `ok` status set to `false`), and it will only reject on network failure or if anything prevented the request from completing."_

But this may be a problem is some case because in forms for instance, when the wrong data is sent to the server, we expect the attempt to fail. We may have a validation function and inside that function, if there's a success response we'd redirect the user or store the data.

## The solution

In **Axios**, if there's request failure, it throws an error and you can easily handle the error with a `try-catch` block and get the error data from `error.response.data`.

In **Fetch**, if we have;

```js
const res = await fetch(api);
const data = await res.json();
```

then, we can handle the result with;

```js
if (!res.ok) {
  error = data;
  return null;
}

return data; // Do something with data if successful
```
## Conclusion

You can check an example code on my [gist](https://gist.github.com/Dchole/1f80d929b8f377fe5b09ee03b4a20108) or on [codepen](https://codepen.io/gameshaker/pen/oNLXOOP) illustrating the error handling in both **Fetch** and **Axios**

<span>Cover Photo by <a href="https://unsplash.com/@markusspiske?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" class="">Markus Spiske</a> on <a href="https://unsplash.com/s/photos/data?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>


There's so much difference between Fetch and Axios but my focus is on error handling because it caugh...

Hey , I'm Derek Oware

Most Popular Articles

Upload user avatar with a custom upload button

Custom file upload button

Error handling in Fetch vs Axios

Code Snippets

useDebounce Hook

Material ButtonLink

Error Handling

Device Detection Hook

Hey 👋, I'm Derek Oware

Most Popular Articles

Upload user avatar with a custom upload button

Custom file upload button

Error handling in Fetch vs Axios

Code Snippets

useDebounce Hook

Material ButtonLink

Error Handling

Device Detection Hook

Hey , I'm Derek Oware