admin管理员组文章数量:1330564
I have a custom input for files but the choosen file is not displayed and I don't know how to display it.
My code
<input
type="file"
name="file"
id="file-upload"
onChange={this.handleselectedFile}
style={{ display: "none" }}
/>
<label className={classes.uploadButton} htmlFor="file-upload">
<Button
variant="contained"
color="primary"
ponent="span"
endIcon={<GetAppIcon />}
>
Importer STL*
</Button>
</label>
handleselectedFile function :
handleselectedFile = event => {
this.setState({
selectedFile: event.target.files[0]
});
};
I want to display the choosen file just after the upload button without using CSS file if possible. I think I can do it using only javascript/react but I don't know how.
EDIT for multiple files
handleselectedFile function :
handleselectedFile = event => {
this.setState({
selectedFile: event.target.files,
selectedFileName: event.target.files.name
});
};
Seletected files button
<input
type="file"
name="file"
id="file-upload"
onChange={this.handleselectedFile}
style={{ display: "none" }}
multiple
/>
<label className={classes.uploadButton} htmlFor="file-upload">
<Button
variant="contained"
color="primary"
ponent="span"
endIcon={<GetAppIcon />}
>
Importer STL*
</Button>
</label>
<span className={classes.selectedFileName}>
{this.state.selectedFileName}
</span>
How can I display the files name or display the number of files selected as the original input ?
I have a custom input for files but the choosen file is not displayed and I don't know how to display it.
My code
<input
type="file"
name="file"
id="file-upload"
onChange={this.handleselectedFile}
style={{ display: "none" }}
/>
<label className={classes.uploadButton} htmlFor="file-upload">
<Button
variant="contained"
color="primary"
ponent="span"
endIcon={<GetAppIcon />}
>
Importer STL*
</Button>
</label>
handleselectedFile function :
handleselectedFile = event => {
this.setState({
selectedFile: event.target.files[0]
});
};
I want to display the choosen file just after the upload button without using CSS file if possible. I think I can do it using only javascript/react but I don't know how.
EDIT for multiple files
handleselectedFile function :
handleselectedFile = event => {
this.setState({
selectedFile: event.target.files,
selectedFileName: event.target.files.name
});
};
Seletected files button
<input
type="file"
name="file"
id="file-upload"
onChange={this.handleselectedFile}
style={{ display: "none" }}
multiple
/>
<label className={classes.uploadButton} htmlFor="file-upload">
<Button
variant="contained"
color="primary"
ponent="span"
endIcon={<GetAppIcon />}
>
Importer STL*
</Button>
</label>
<span className={classes.selectedFileName}>
{this.state.selectedFileName}
</span>
How can I display the files name or display the number of files selected as the original input ?
Share Improve this question edited Feb 12, 2020 at 8:56 leyh asked Feb 10, 2020 at 13:33 leyhleyh 2612 gold badges4 silver badges13 bronze badges 2- Are you looking to display the selected file name? – Shmili Breuer Commented Feb 10, 2020 at 14:32
-
1
Yes, if I remove the
style={{display: "none"}}
I can display it but if I do that my custom button is useless – leyh Commented Feb 10, 2020 at 14:37
2 Answers
Reset to default 3You can save the file name in the handleselectedFile
event like this:
handleselectedFile = event => {
this.setState({
selectedFile: event.target.files[0]
//**** added line below ****//
selectedFileName: event.target.files[0].name
});
};
And use it in your JSX like this:
<input
type="file"
name="file"
id="file-upload"
onChange={this.handleselectedFile}
style={{ display: "none" }}
/>
<label className={classes.uploadButton} htmlFor="file-upload">
<Button
variant="contained"
color="primary"
ponent="span"
endIcon={<GetAppIcon />}
>Importer STL*
</Button>
</label>
//**** added line below ****//
<p>{this.state.selectedFileName}</p>
To get multiple files' names and the length you just need to convert input result event.target.files
to an array; then show it using map()
function. MDN doc about map()
In the following snippet you can see I do the convert by Array.from()
.
MDN doc about Array.from()
I didn't use custom label and button for the snippet to be simple; you just add it for yourself.
TIP: To hide input tag you can simply use hidden
attribute instead of style={{ display: "none" }}
.
class FileInput extends React.Component {
state = {selectedFiles: []};
handleSelectedFile = (event) => {
//***Convert file input result to an array, then store it in state.
this.setState({ selectedFiles: Array.from(event.target.files) })
}
render() {
return (
<div>
<input
type="file"
name="file"
id="file-upload"
multiple
onChange={this.handleSelectedFile}
/>
{/****Show names of selected files and number of them.*/}
<p><b>{this.state.selectedFiles.length} file(s) selected</b></p>
{this.state.selectedFiles.map((file) => (
<p key={file.name}>
{file.name}
</p>
))}
</div>
)
}
}
ReactDOM.render(<FileInput />, document.body)
<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
本文标签: javascriptDisplay file name for custom input file using ReactjsStack Overflow
版权声明:本文标题:javascript - Display file name for custom input file using Reactjs - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742234107a2437757.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论