I want to display the image sent by react axios - reactjs

Question

I want to send an image with react axios and return a character string, but I have a question here.
The backend is an API that puts an image and returns a character string.
I want to ask a question.
How can I display the image to be sent on the screen?
How can I display the string returned after sending the image?
import React from 'react'
import axios from 'axios';
class FileUpload extends React.Component{
constructor(){
super();
this.state = {
selectedFile:'',
}
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
this.setState({
selectedFile: event.target.files[0],
})
}
submit(){
const data = new FormData()
data.append('file', this.state.selectedFile)
console.warn(this.state.selectedFile);
let url = "http://localhost:8000/upload.php";
axios.post(url, data, { // receive two parameter endpoint url ,form data
})
.then(res => { // then print response status
console.log(res.data)
})
}
render(){
return(
<div>
<div className="row">
<div className="col-md-6 offset-md-3">
<br /><br />
<h3 className="text-white">React File Upload Example - Tutsmake.com</h3>
<br />
<div className="form-row">
<div className="form-group col-md-6">
<label className="text-white">Select File :</label>
<input type="file" className="form-control" name="upload_file" onChange={this.handleInputChange} />
</div>
</div>
<div className="form-row">
<div className="col-md-6">
<button type="submit" className="btn btn-dark" onClick={()=>this.submit()}>名前確認</button>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default FileUpload;

Answer 1

If I understood
this is how to get a preview of selected image
const [file] = e.target.files;
setImgPrev(URL.createObjectURL(file));
// imgPrev state will be the src of your preview image
and to get the string that returned after sending the html request you have to listen to the response that will come from axios
axios.post(url, data)
.then(res => setRes(res))
.catch(err => return err)

Answer 2

I've made image uploader and preview the uploaded image before sent to the BE with API. I also use normal html input with type file. May be my code can be used in yours.
const handleImageChange = (value) => {
let reader = new FileReader();
const image = value.target.files[0];
setSavedFile(image);
reader.onload = () => {
setMainImage({
img: reader.result,
});
};
reader.readAsDataURL(image);
}
...
...
<input
onChange={(e) => handleImageChange(e)
/>
the image that will rendered saved with setMainImage(), the image source is in reader.result. For the setSavedFile is used to save the file uploaded.
For the question number 2, you can normally save the response from the API to state and show the state in the html element