Image Preview is not visible after uploading the image

Viewed 27

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'}}>&nbsp;&nbsp;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);
        }
    });
}
0 Answers
Related