Preview of uploaded image in React js using React hooks

Question

Using React hooks how can I preview the image under previewProfilePic > img area after uploading the image via choose file input.

import React, { useState } from "react";

  const Register = () => {
  const [picture, setPicture] = useState(null);

  const onChangePicture = e => {
    console.log('picture: ', picture);
    setPicture(e.target.files[0]);
};
  return (
    
      
        
          
            
              Sign Up
              
              
                 
              
              
                
              
            
            
              
                
                
              
            
            
              
            
          
        
      
    
  );
}

export default Register;

user_5928186 · Answer

In order to see a preview you need to read the image and set the state with base64 format data that you receive and render that as source of image tag.

To read files data you can make use of FileReader

export default () => {
  const [picture, setPicture] = useState(null);
  const [imgData, setImgData] = useState(null);
  const onChangePicture = e => {
    if (e.target.files[0]) {
      console.log("picture: ", e.target.files);
      setPicture(e.target.files[0]);
      const reader = new FileReader();
      reader.addEventListener("load", () => {
        setImgData(reader.result);
      });
      reader.readAsDataURL(e.target.files[0]);
    }
  };
  return (
    
      
        
          
            
              Sign Up
              
              

                
              
              
                
              
            
            
              
                
                
              
            
            
              
            
          
        
      
    
  );
};

Working Demo

user_10454516 · Answer

I have not test this yet, but, what you have to do is convert the file to URL by doing this => URL.createObjectURL(event.target.files[0]).

import React, { useState } from "react";

const Register = () => {
  const [picture, setPicture] = useState('');

  const onChangePicture = e => {
    console.log('picture: ', picture);
    setPicture(URL.createObjectURL(e.target.files[0]));
  };

  return (
    
      
        
          
            
              Sign Up
              
              
                 
              
              
                
              
            
            
              
                
                
              
            
            
              
            
          
        
      
    
  );
}

export default Register;

user_9042365 · Answer

URL.createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter. The URL lifetime is tied to the document in the window on which it was created. The new object URL represents the specified File object or Blob object.

import React, { useState } from "react";

  const Register = () => {
  const [picture, setPicture] = useState(null);

  const onChangePicture = e => {
    setPicture(URL.createObjectURL(e.target.files[0]) );
};
  return (
    
      
        
          
            
              Sign Up
              
              
                 
              
              
                
              
            
            
              
                
                
              
            
            
              
            
          
        
      
    
  );
}

export default Register;

user_107976 · Answer

react-uploady makes this very simple. A lot less code for you to write:

a very simple example can be this:

import React from "react";
import Uploady from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";
import UploadPreview from "@rpldy/upload-preview";

export const App = () => (
          
        
        
    
);

there's more samples in the upload-preview readme.

user_10999843 · Answer

You can use this example below is your UploadImages.js

import React, {useState } from "react";
import PropTypes from "prop-types";
import FileUploadService from "./Services/FileUploadService";

export const UploadImages = (props) => {
  const [currentFile, setCurrentFile] = useState("");
  const [previewImage, setPreviewImage] = useState("");
  const [progress, setProgress] = useState("");
  const [message, setMessage] = useState("");
  const [imageInfos, setImageInfos] = useState("");

  const componentDidMount = () => {
    FileUploadService.getFiles().then((response) => {
      setImageInfos(response.data);
    });
  };

  const selectFile = (event) => {
    setCurrentFile(event.target.files[0]);
    setPreviewImage(event.target.files[0]);
    setProgress(0);
    setMessage("");
  };

  const upload = () => {
    setProgress(0);

    FileUploadService.upload(currentFile, (event) => {
      setProgress(Math.round((100 * event.loaded) / event.total));
    })
      .then((response) => {
        setMessage(response.data.message);
        return FileUploadService.getFiles();
      })
      .then((files) => {
        setImageInfos(files.data);
      })
      .catch((err) => {
        setProgress(0);
        setMessage("Could not upload the image!");
        setCurrentFile("undefined");
      });
  };

  return (
    
      
        
          
            
          
        

        
          
        
      

      {currentFile && (
        
          
            {progress}%
          
        
      )}

      {previewImage && (
        
          
        
      )}

      {message && (
        
          {message}
        
      )}

      
        List of Files
        
          {imageInfos &&
            imageInfos.map((img, index) => (
              
                {img.name}
              
            ))}
        
      
    
  );
};

UploadImages.propTypes = {};

Here goes Your FileUpload.js file:

import http from "../Controllers/API/image-http";

class FileUploadService {
    upload(file, onUploadProgress) {
      let formData = new FormData();
  
      formData.append("file", file);
  
      return http.post("/upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        onUploadProgress,
      });
    }
  
    getFiles() {
      return http.get("/files");
    }
  }
  
  export default new FileUploadService();

Preview of uploaded image in React js using React hooks

5 Answers