Hello,
I’ve changed my class-based component to functional.
I will be pleased if you let me know your idea about the code or if anywhere is wrong.
import { Redirect } from "react-router-dom";
import React, { useState } from "react";
export function ImageUpload1() {
const [redirect, setRedirect] = useState(null);
const [selectedFile, setSelectedFile] = useState(null);
const [description, setDescription] = useState(null);
const [uploadResult, setUploadResult] = useState(null);
const [selectedFileName, setSelectedFileName] = useState(null);
const [fileIdList, setFileIdList] = useState([]);
useEffect(
const getList = () => {
fetch('api/Image')
.then(response => response.json())
.then(data => setFileIdList({ fileIdList: data }));
};
);
const onFileChange = event => {
setSelectedFile(event.target.files[0]);
setSelectedFileName(event.target.files[0]);
};
const onDescriptionChange = event => {
setDescription(event.target.value);
};
const onFileUpload = async () => {
const formData = new FormData();
formData.append(
"ImageData.File",
setSelectedFile,
setSelectedFileName
);
fetch('/api/Image', {
method: 'POST',
body: formData
}).then(resposne => resposne.json())
.then(data => {
console.log(data);
setUploadResult: "File" + data.fileName + "successfully uploaded";
getList();
});
}
const onNavToEditor = async () => {
//this.onFileChangeName();
//this.setState({ redirect: "/ImageEditor" });
// this.setState({ selectedFileName: });
setRedirect( "/ImageEditor");
};
**const listItems = () => {**
** const listItems = this.state.fileIdList.map((item) =>**
** <div key={item.imageId.toString()}>**
** <img src={"/api/Image/DownloadImage/" + item.imageId}**
** alt={item.fileName}**
** className="img-thumbnail"**
** height="100" width="100" />**
** </div>**
** );**
return (<div>{listItems}</div>);
};
return (
<div>
<div style={mystyle} onClick={NavToEditor} />
<h1>File Upload Demo</h1>
<div >{uploadResult} onClick={NavToEditor}</div>
<div>
<input type="file" onChange={FileChange} />
<input type="text" **value={this.state.value}** onChange={DescriptionChange} />
<button onClick={FileUpload}>
Upload!
</button>
</div>
<div onClick={NavToEditor}>
{listItems()}
</div>
regards,
Saeed