I want to preview the image as soon as I upload the image but image preview is not visible when I am uploading the image. There is no code for image to preview on screen , if someone who what line of code should I add here so that I can get preview of my image then it will be really helpful. can someone help me with this. here is the code
<label className="input_label_profile">Image</label>
<br/>
<label style={{backgroundColor:'#eeeeee',borderRadius:'0px',border:'1px dashed #999999',height:'8vw',width:'8vw'}} className="add-user-upload-image add-user-upload-image-2">
<Form.Item name="experience_image" style={{height:'0px'}}>
<Input
accept="image/*"
id="raised-button-file"
multiple
type="file"
onChange={(event) => {
this.addImage(event.target.files[0])
}
}
style={{height:'0px'}}
/>
</Form.Item>
<PlusOutlined />
<br/>
<br/>
<br/>
<span style={{cursor: 'pointer',marginTop:'5vw'}}> UPLOAD IMAGE</span>
</label>
And here is addImage function:
addImage = (image) => {
console.log("image name:",image);
const file = image
this.setState({
file: file,
fileNameLocal:image.name,
});
let img_type = file.type
this.setState({
img_type: img_type
})
const uploadParams = {
files: [
{
requestType: 'CandidateProfile',
contentType: img_type,
},
],
};
APIManager.preSignedUrl(uploadParams).then((resp) => {
if (resp.status === 200) {
console.log(resp)
this.setState({
uploadUrl:resp.data[0].url,
fileName:resp.data[0].fileName,
experience_image:resp.data[0].fileName
})
this.uploadOnS3(file);
}
});
}