Media Uploader
While designing various products, I’ve run into features that allow users to upload images or videos or retrieve images or videos from a url. Some examples of this are uploading multiple products for sale on an e-commerce website or uploading multiple images a post on social media.
Through my research, I’ve found that core functionality is:
Displaying uploaded media assets (having an empty state and filled state upon upload)
The ability to take action on one or many of the uploaded media assets (edit, delete, etc.)
The user should have an understanding of which media asset will be displayed first or featured
Media section with no assets uploaded (Empty State)
Media section with assets uploaded (Filled State)
Here are some examples of how this is done on Instagram, Shopify, Squarespace, and Youtube:
If you’re interested in this component, it has been added as an organism in the Core Design System.
Check it out here: