Best practices for building an image upload component in web and mobile applications.

When no images have been selected, this is the first thing users see. It should be clean and simple, with a clear call to action like "Add Photos" or "Upload Images." This invites users to get started with the process.

Initial state

Once the user clicks the "Add Photos" button, they’ll see an interface to select images from their device. This is usually handled by the native OS interface, but it’s important to make the transition smooth and intuitive for the user.

Image selection

After selecting their images, users should see a preview of the selected files. This gives them a chance to review and confirm what they’re uploading, which adds an extra layer of assurance and control.

Preview images

Forms often contain a variety of input types, from simple text fields to more complex elements like date pickers or file upload buttons. It’s important that each component follows a cohesive style but also adapts to its function. In this example, the "Add Photos" input is a clear call to action that stands out and encourages users to start the upload process.

The initial design of the "Add Photos" button is crucial in guiding user interaction. Let’s break down why it works:

Using familiar icons like a "+" sign or an image placeholder helps users immediately recognize the purpose of the button. Visual cues like these eliminate confusion and make the process intuitive.

Making the "Add Photos" button larger and placing it prominently ensures it’s easily noticed. This way, users won’t mistake it for a regular text input, and it’s clear that this button is for action.

A simple custom implementation of a select image modal

When users click the "Add Photos" button, they expect an image selection interface to appear. This is usually handled by the device’s native OS interface, which provides a familiar experience. While designers and developers don’t have much control over this part, it generally works well enough for most apps.

In more complex apps, such as content management systems, users might upload an image once and reuse it in various parts of the app. This calls for a custom image selection modal that fits the app’s theme but still behaves similarly to the native image picker. Designing this type of interface requires a balance of familiarity and functionality.

Images should be shown in a grid layout, using thumbnails to give users a clear visual of what they’ve selected. Make sure the thumbnails are the right size—not too big, not too small.

Use clear indicators like checkmarks or borders when an image is selected. Allow users to deselect by tapping the image again, keeping the process flexible and user-friendly.

Show how many images have been selected, and if there’s a limit, make that clear. Once users hit the max, disable further selections to avoid confusion.

Once users are happy with their selection, provide a clear confirmation button, like "Use Selected Images." Also, give them the option to cancel in case they change their minds.

For apps with large image libraries, organize the images into folders or categories to help users find what they need quickly.

Adding a search or filter feature can save users time when dealing with many images. This is especially helpful in larger systems where images are frequently reused.

Ensure the modal is accessible to all users, including those using screen readers or keyboard navigation. Proper ARIA labels and visual cues make the experience more inclusive.

After images have been selected, the previews are generated in the original form

Once users have selected their images, you need to display them in a clear, manageable way. The previews should be easy to view at a glance, and it should be obvious how to add or remove images before finalizing the upload.

Thumbnails are a great way to display selected images, allowing users to quickly review their choices. Keep them large enough to see clearly, but small enough to fit multiple on the screen.

Give users an option to remove images they no longer want to upload, such as a small "X" icon. Visual feedback when removing an image, like fading it out, adds to the experience.

Even after selecting images, users should be able to add more if needed. Include an "Add More" button that opens the image selection modal again without starting over.

If users are selecting lots of images, consider using a scrollable area or overflow container to display them neatly without cluttering the page.

Adding visual transitions for actions like adding or removing images (e.g., fade-in/fade-out effects) helps make the component feel responsive and polished.

If there’s a maximum number of images allowed, make sure users are aware when they hit the limit. Disable the "Add More" button or display an error message if they try to add too many.

Ensure that the component is accessible to all users, including those using screen readers or keyboard navigation. Adding ARIA labels and other accessibility features helps make the experience inclusive.

Building an image upload component that is intuitive and easy to use can greatly improve the user experience. By breaking the process into clear stages—initial state, image selection, and preview—you guide the user through the process step by step, giving them control and reassurance along the way.

The key is to keep things simple and familiar, while also making sure the component is flexible enough to handle multiple images, accessible for all users, and visually clear. With these best practices, you can create an image upload experience that feels smooth and effortless.

A screenshot of the image upload component.

Building an Image Upload Component

Summary of how the dashboard of LewisHoy.io was built, how it works and what it looks like

To access the dashboard page, I used Firebase authentication to create a single login account for myself and connected this to a login page containing a username and password field. Upon logging in, I get directed to a dashboard area. Currently, the dashboard is split into 3 main areas; projects, articles (blog posts) and media.

Create, read, update delete operations for my portfolio projects are contained in this tab.

Essentially a folder/file browser for images which I use in articles and for my projects. I can perform CRUD actions for images and folders from this tab.

Currently this contains a single button to upload a JSON file to Firestore, no CMS for articles just yet 😢

The media area of the dashboard is used for managing image content, but that could be extended to videos or other files in the future if required. The general workflow as to how I use this area is better outlined below. Screenshots have been provided afterwards.

I create a new folder, in the background, a new folder is added to my Firestore 'folders' collection.

Create a New Folder

With the new folder selected, I upload an image/images to my Firebase storage bucket alongside metadata containing the folder it was uploaded to.

Add Image to Folder

This generates a document into the Firestore collection with metadata saved from the storage item, it saves this folder ID when it writes the document, linking the image to the folder.

Generate a Firestore Cloud Function

A final cloud function is triggered, invoking the Google Cloud Vision image analysis API, this adds alt text to each image, guaranteeing all images have at least some alt text for screen-reader accessibility – woohoo!

Generate Alt Text Cloud Function

After images have been added, I can go to the projects tab to add the new images to a project

A table displays all of my projects and their status, this tab provides functionality for editing existing or adding new projects

Due to the relatively complex state being managed for the project form, I used a useReducer style method of state management, this was all kept within a context to provide state values freely to other components.

I used two different sections to display images for selection and another to edit the image title, description etc. These sections appeared as modals on top of the form and simplified the more complex logic as I could separate the process more clearly between the sections.

The biggest challenge I faced with the project form was adding gallery images and updating nested values. Each project has a gallery containing an array of images – and each image had a title, a description and a priority. The priority indicating where the image sat on the project page.

After the form is complete, the project is added as a new document to my Firestore 'projects' collection. And will show as a project (if set to live) on my projects feed. 

Having a well structured dashboard makes the process of creating and updating data much more efficent - and enjoyable!. A similiar process could be repeated for creating articles to improve the dashboard further.

If the concepts and solutions I've outlined above resonate with you, or if you're inspired by the idea of having a well-designed, efficient dashboard to manage your projects, I'd love to collaborate. I can help you create a tailored solution that not only meets your needs but also enhances your overall user experience. Let's work together to bring your vision to life.

Articles

UX Design

Building an Image Upload Component

Development • UX Design

Behind the portfolio: Content Management