A custom option for the default "Choose File" button

If you are not a fan of the default “Choose File” upload button then I am happy to announce that now there is a solution. I created a react button using typescript that allows you to style the default file upload button into anything you like. From changing the default text to adding your own component, you now have the flexibility to style the upload button and add your own custom elements.

I introduce react-input-button. It is a lightweight custom component that allows you to add a button that enables you to upload one or multiple files. At the moment, you can change the button style, the file types and the amount of images uploaded.

import { InputBtn } from 'react-input-button'
<InputBtn
multiple={false} //Upload multiple files
onChange={(e) => {}} //Get the event
style={{}} //Overwrite the existing styles
text="Upload" // The text of the button
showText={true} // Add custom component e.g. icon
component={} // if showText = false
/>

One of the major advantages of using a custom component is that it will look consistent across all browser, whereas the default file upload button slightly changes appearances. Another advantage is that instead of showing the file name, you can add any information you’d like after retrieving the file or files.

It’s time to change the default file upload button into something unique that suits our projects. If the world wide web consortium is to busy to make the upload button more customizable, it’s on us to create better options that work for everyone. Looking forward to your feedback. Thanks for taking the time to read through a problem faced by many.