Building a Modern(ish) Profile Photo Uploader

People upload a lot of photos on the internet.

A styled HTML form that lets users select files is no longer an acceptable UX in 2018. Instagram lets us crop photos, apply filters, and preview our photos before uploading them. People expect that from all their apps now.

We were building a profile page feature on our app at work, and decided to give the users a simple file uploading experience. Simple — just a dropzone file field which shows the user’s current photo, or a preview if she chooses a new one. Our standard of simple is slightly different these days.

So we built it with React. A profile page which changes all texts into forms when the edit button is clicked. And a profile photo uploader, much like this one here.

React is a popular library and DropzoneJS is also pretty popular, so we were glad to find that someone has built a package that links the two. Our job now is to:

1. create a preview area,
2. initiate it with the user’s current photo, and
3. handle new file select and preview it.

This is how we built our form component.

Creating the preview was pretty straight forward. We wanted it to be a background with a camera watermark, so the inline styling on line 28 took care of the dynamic change.

To show the user’s original photo, we instantiated the component with an initial url state taken from the current user. Once this is in the state, we can change the value based on new selections.

And to handle the file select, we used JavaScript’s FileReader to read the form content. The file object is stored in state together with the result of the reader — which re-renders our preview with the new image.

We never thought much about how seriously we, as users, took photo uploading feature these days. What needed photoshop back in those days could simply be done in a light browser these days.

Hope you’ve found this useful, and do let me know if there is a simpler solution out there!