bene : studio is a global consultancy, helping startups, enterprises and HealthTech companies to have better product
Custom File Upload Button With Pure CSS
Our workshops are restarting!
Join the FREE ONLINE React Native workshop on August 11, and learn how to connect native modules to build an awesome Music Creator.
Join the workshop and invite your peers as well! For full details and registration visit the event page:
Browsers don’t want us to customize file inputs but we do. There is simple trick to do this with pure CSS without any library or framework.
The default file input
Despite the simplicity and purity there are a lot of inconvenience when using a file input:
- It uses the language of the browser not the language we want
- It is impossible to make it look like we want
- Its look depends on the user’s OS and browser
Rendered in the browser:
Customize with pure CSS and some hack
There is a hacky way to implement a customized file input. It breaks down into the followings:
- create a wrapper with relative positioning and hidden overflows
- create a button with any design
- create a large floating file input with zero opacity to capture clicks
It’s quite a minimalist solution to a simple problem. It works in any browser. However if we target older IE versions, we should use a filter to achieve zero opacity.
We can enhance user experience with some really simple and nice attributes: multiple, required, accept.
When the requirements get more complex like uploading multiple files or a folder, showing previews etc. it is encouraged to use some more sophisticated solutions. They usually use flash fallbacks for the file dialog and XHR2 so they can support rich features even in ancient browsers.
What do you think?
Did you like this post? Share it with your colleagues! Want to ask some questions? Share them with us via e-mail to email@example.com and we can set up a talk with our engineers.
Read moreSee all software engineering
Build your own Christmas chat tree
Or should we say Chat-mas tree?😜 Create a working chat application in 2 hours using React, SSE (Server-Sent Events) and OneSignal on Heroku.
5 Ways to Connect Redux Actions
This article provides 5 ways of defining mapDispatchToProps with explanations. Great introduction to our Redux Saga Workshop!
Bene Studio Serverless Workshop - Calorie Counter App
Kickstart your React Native app with Firebase – Cloud Firestore (Tutorial #2)
In this series we will create an iOS and Android application — called Fakestagram — with React Native, using some of Firebase services....
Redux-Saga To The Rescue
In this blog post, we are checking back to our 25. September Redux Saga Workshop. On 19. October we are trying out a new JS Framework for cross-platform...