Previsualizar imágenes en react.js

Hola amigos de la #nerdytud.

En el día de hoy quiero compartir un ejemplo sencillo realizado en react.js, para previsualizar imágenes antes de ser enviadas al servidor (upload).

Creación de la app

npx create-react-app dummy

cd dummy

Crear componente Upload.js

import { useEffect, useState } from "react";

const Upload = () => {
  const [images, setImages] = useState([]);

  const handleChange = (e) => {
    setImages((images) => [...images, URL.createObjectURL(e.files[0])]);
    return URL.revokeObjectURL(e.files[0])
  }

  const deleteImage = (blob) => {
    setImages(images.filter(x => x !== blob));
  };

  useEffect(() => {
    console.log(images);
  }, [images]);

  return (
    <div>
      <input type="file" onChange={(e) => handleChange(e.target)} />

      {images.map((row, index) =>
        <div key={index}>
          <img src={row} alt={row} />
          <button onClick={() => deleteImage(row)}>borrar</button>
        </div>
      )}
    </div>
  );
};

export default Upload;

Modificar App.js

import Upload from './components/Upload';

function App() {
  return (
    <div className="App">
      <Upload />
    </div>
  );
}

export default App;

Ejecutar aplicación

npm start