How To Style A File Input In React

From Stack Overflow

HTML File Input

<input type='file' name='image' />
const ImageInput = ({ file, setFile }) => {
const onChange = async e => {
if (e.target.files && e.target.files.length > 0) {
setFile(e.target.files[0])
}
}
return <input type='file' name='image' onChange={onChange} />
}

Hiding The Default File Input

import React, { useState, useRef } from 'react'
const fileInput = useRef(null)
<input
type='file'
name='image'
ref={fileInput}
onChange={onChange}
style={{ display: 'none' }}
/>
<button
className='upload-btn'
onClick={() => fileInput.current.click()}
>Choose File</button>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store