Issue
I'm trying to make a field so that the user can select and upload their file.
I have already written a simple code to select a file.
export const UploadFile = () => {
return (
<input type="file" id="fileUpload" onChange={uploadFile} />
};
However, I would like to add some styling to this component. And since I'm using input I'm running into difficulties.
At the moment I am using the following code for the design
<div className="justify-between">
<span>
C:\example\Users\user\someVideo\
</span>
<button type="button">
choose file
</button>
</div>
So my question is, tell me how can I integrate the first part of the code with the second
Solution
What i did in a recent project is continued using the input and target the file-selector-button of the input to style the button. heres a quick codesandbox where i style a file input
here's the basic idea in the css i did
#attachment::file-selector-button {
background-color: #48bb78;
border: none;
color: #ffffff;
height: 100%;
border-radius: 0 0.375rem 0.375rem 0;
cursor: pointer;
}
attachment is the id of the file input
Note: i left the styles from my project so change as needed
EDIT: to have the button on the right just change this
#attachment::file-selector-button {
float: right;
background-color: #48bb78;
border: none;
color: #ffffff;
height: 100%;
border-radius: 0 0.375rem 0.375rem 0;
cursor: pointer;
margin-right: 0;
}
adding the float right will move the button and the margin 0 is needed to move it till the end, after doing this you will need to change some of the other styles to match the reversed order
Answered By - Quak_2023
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.