I'm in the process of creating a field for users to select and upload their files.
So far, I've developed a basic code snippet for file selection:
export const UploadFile = () => {
return (
<input type="file" id="fileUpload" onChange={uploadFile} />
};
Before selection: https://i.sstatic.net/eNajs.png
After selection: https://i.sstatic.net/TZxg4.png
However, I want to enhance the appearance of this component by adding some styling. The challenge lies in using an input.
Currently, my design code looks like this:
<div className="justify-between">
<span>
C:\example\Users\user\someVideo\
</span>
<button type="button">
choose file
</button>
</div>
https://i.sstatic.net/82CLa.png
My question is how can I merge the initial code snippet with the design code above?