The anatomy of a custom input[type="file"] component

Eduardo Lavaque — Thu, 14 Sep 2017 18:36:43 +0000

I had to develop a custom upload modal. So I bit the bullet, Googled "form upload file" and there it is, there's an <input type="file" />, excellent I thought. I used it and here's what I was greeted with:

"/>

Way off from the provided design.

So, where to start? Well actually I read a blog post, which led me to a demo. With those two sources I was able to connect the dots and figure out the approach.

The basic problem

The basic problem is a simple one, but not straightforward to fix if you don't know how. The problem is that the input has pre-set text, layout and all that shebang. I can't format that stuff to follow the designs, I don't have any selectors to work with. And even if I did I'd have to do black magic to get it to look how I want it.

But thankfully it's not too problematic to solve if you know how to.

The basic solution (CSS)

Simply, hide the <input type="file" />, and render your own version of it from the ground up, with the magic of the <label> tag.

Hide the non-ideal default

So let's start by hiding it, this can be done simply by the following styles:

input[type="file"] {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  // alternative to pointer-events, compatible with all browsers, just make it impossible to find
  width: 1px;
  height: 1px;
}

With those two lines you've made it invisible (not un-existent like you would with display: none;) and given it position: absolute; so it doesn't interfere with the document flow and pointer-events: none; so clicking on other visible elements doesn't trigger this one (because it is technically still there, just not visible).

Being able to click it again

So, if our element is invisible, how can we click it? That's where the magic of label comes in. Such useful things.

Our HTML would now look like so:

<input type="file" id="myuniqueid" />
<label for="myuniqueid">!!Upload file!!</label>

This allows us to click on !!Upload file!! and trigger the upload file dialog from the browser. That is the magic of labels.

So good, then all we need to do is style this label to look like a button or whatever we want. Simple enough.

input[type="file"] + label {
  // your styles here
}

The basic solution (JS)

So now we have the button looking like we want. Now we want it working like we want.

In all of the following steps we'll have the following to handle file changes (JSX syntax is assumed):

<input type="file" id="myuniqueid" onChange={handleChange} />

Where handleChange is our function, which we'll be exploring. onChange is triggered after the user has uploaded one or more files or has cancelled their interaction.

If user cancels upload

We need to be able to handle if the user cancels their upload interaction, this can be done simply:

function handleChange(event) {
  // User cancelled
  if (!event.target.files[0]) {
    return
  }
}

Getting the file's name

To get the file's name one does event.target.files[0].name.

Previewing the file

Maybe we want to preview the file in our file upload element. In this case there are a couple approaches, one is to upload to Amazon S3 and then show the uploaded image, another one (which we'll do now) is to do a local preview, before an upload has taken place.

So here we go, our local previewer:

function generatePreviewImgUrl(file, callback) {
  const reader = new FileReader()
  const url = reader.readAsDataURL(file)
  reader.onloadend = e => callback(reader.result)
}

So now our handleChange function looks like this:

function handleChange(event) {
  const file = event.target.files[0]

  // User cancelled
  if (!file) {
    return
  }

  generatePreviewImgUrl(file, previewImgUrl => {
    // (assuming we use React)
    this.setState({ previewImgUrl })
  })
}

Where later in the React component you do:

<img src={this.state.previewImgUrl} />

In closing

Hope this guide was useful. I tried to put together the core concepts in an easy reference-able guide so that you can re-use it in any environment you need. :)

The concepts are not difficult, you just need to know that one key point:

Using hidden input + styled label for the button

Simple `classnames` and small libraries

Eduardo Lavaque — Wed, 07 Jun 2017 19:42:30 +0000

Thought I'd share my thoughts on small libraries like classnames which are very used helpers, but could often be dropped in exchange for a homegrown alternative.

Here's a tiny classnames implementation with only the most basic features:

export default (...classes) => {
  const result = []
  classes.forEach(a => {
    if (typeof a === 'string') {
      result.push(a);
    } else if (Object.prototype.toString.call(a) === '[object Object]') {
      Object.keys(a).forEach(b => a[b] && result.push(b))
    }
  })
  return result.join(' ')
}

This works. I tested it. (Famous last words.)

Why was I prompted to write this? Just as an exercise. But also because I distinctly remember having a bad impression about how long the code of the library was, even though I check it now and in actuality it's very small.

But writing this put a bit into perspective into how much I'm giving up of the control of my code and its behaviour by giving the simple simple work to an external library, that perhaps could've been written in one minute like the one above.

If something doesn't work I have to check out the source, but first I've to double check which version I'm using and check its source code, not of newer or older versions, and then I've to read it. And it's in my node_modules so to add a console.log to it I've to edit the node_modules file. Or at least that's how I do it.

In comparison I can just go to the utils/classnames.js file and read it, simple enough, put debugger statements or console.logs or whatever. Easy.

BTW, instead of a fancy function like the above, you could actually just follow a pattern similar to the following:

const trimClassName = (class) => class.replace(/\s{2,}/g, ' ');

const Foo = () => (
  <div
    className={trimClassName(`
      xyz
      ${someTruth() ? 'truth' : 'notruth'}
      ${someFalsety() ? 'false' : ''}
    `)}
  >
    Hello world
  </div>
);

So I just completely skipped a complex function and I just ran a search and replace for two-or-more whitespaces replacing them with one whitespace, on a string which uses built-in JS string templating.

Or another approach:

const cx = (...classes) => classes.filter(a => !!a).join(' ')

const Foo = () => (
  <div
    className={cx(
      'xyz',
      someTruth() ? 'truth' : 'notruth',
      someFalsety() && 'false'
    )}
  >
    Hello world
  </div>
);

Now all that said. I realize homegrown options are not always the most performant options, but I prefer to leave the micro optimizations to the engine, and I like to work on macro optimizations.

Let me know your thoughts, often people I talk to prefer to use a library because "somebody already wrote it, no need to write it ourselves", but in some places I disagree with this.

DEV Community: Eduardo Lavaque