Hello,
I have converted my class-based component to functional,
but when I run the project I encounter this error:
Failed to compile
./src/App.jsModule not found: Can't resolve './components/ImageUpload2' in 'H:\react_Image_Editor_TRY\imageEditor19 - Copy (2)\ClientApp\src'
But the component ImageUpload2 exists!
Do you think where is the problem?
Here come my code:
import { Redirect } from "react-router-dom";
import React, { useState } from "react";
export function ImageUpload2() {
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 => {
//selectedFile: event.target.setSelectedFile[0],
// selectedFileName: event.target.setSelectedFileName[0],
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);
//this.setState({ uploadResult: "File " + data.fileName + " successfully uploaded." });
setUploadResult: "File" + data.fileName + "successfully uploaded";
getList();
});
}
const onNavToEditor = async () => {
setRedirect( "/ImageEditor");
};
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={description} onChange={DescriptionChange} />
<button onClick={FileUpload}>
Upload!
</button>
</div>
<div onClick={NavToEditor}>
{listItems()}
</div>
</div>
);
};
best regards,
Saeed