0
118
ViewsReact js customizing the input of type file using CSS
I have an input of type file that needs to be customized. I need to add an icon in the input button, change the button's name and finally hide the selected file's name. I tried different methods like using a <div> or <a> but the problem is that I need to transfer the selected file to json format. So invoking the browsing action via JavaScript is causing an error in conversion. I need to use a customizable input of type file
<input type="file"/>How I need it to look
2 answers
Answer question0
You can achieve this with label and hiding the input.You need to of course style it properly and write a handleFile function.
<div>
<label onChange={handleFile} htmlFor="formId">
<input name="" type="file" id="formId" hidden />
<Icon>
</label>
</div>
0
Using the HTML label tag and htmlFor property is the best solution for this.
Step 1: Create a generic component to provide you with the functionality of file input.
// UploadControl.js
const UploadControl = ({ children, value, onChange, disabled, accept }) => {
return (
<label htmlFor="contained-button-file" className="m-0 w-100">
<input
value={value}
accept={accept}
disabled={disabled}
style={{ display: 'none' }}
id="contained-button-file"
multiple
type="file"
onChange={disabled ? () => {} : onChange}
/>
{children}
</label>
);
};
Step 2: Use this component by wrapping your custom-styled UI.
<button className="btn-styles">
<UploadControl onChange={handleAddBanner} accept="image/*">
Add New Banner
</UploadControl>
</button>
Step 3: Implement a handler to get your file.
const handleAddBanner = ({ target: { files } }) => {
const loadedImage = files[0];
// loadedImage will be a image file.
};