image previews

js21 react/my-react-app/src/components/ImageUploader.js

@@ -1,6 +1,8 @@
-import React, {useCallback, useMemo} from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useUploadImageMutation } from '../store/api';
-import {useDropzone} from 'react-dropzone';
+import { useDropzone } from 'react-dropzone';
+import { Image } from './Image/Image';
+import { Box } from '@mui/material';
 
 const baseStyle = {
   flex: 1,
@@ -31,12 +33,15 @@ const rejectStyle = {
 };
 
 function ImageUploader() {
+  const [images, setImages] = useState([]);
   const [uploadImage, result] = useUploadImageMutation();
 
   const onDrop = useCallback(acceptedFiles => {
-    filesUpload(acceptedFiles);
+    filesUpload(acceptedFiles).then(imagesResponse => {
+      setImages(images.concat(imagesResponse));
+    });
   }, [])
-  const {getRootProps, getInputProps, isDragActive, isFocused, isDragAccept, isDragReject} = useDropzone({accept: {'image/*': []}, onDrop});
+  const { getRootProps, getInputProps, isDragActive, isFocused, isDragAccept, isDragReject } = useDropzone({ accept: { 'image/*': [] }, onDrop });
 
   const style = useMemo(() => ({
     ...baseStyle,
@@ -49,11 +54,11 @@ function ImageUploader() {
     isDragReject
   ]);
 
- const fileUpload = (file) => {
-    const formData = new FormData()
-    formData.append('photo', file)
+  const fileUpload = (file) => {
+    const formData = new FormData();
+    formData.append('photo', file);
     return uploadImage(formData).then(response => {
-
+      return Promise.resolve(response.data);
     });
   }
 
@@ -62,14 +67,23 @@ function ImageUploader() {
   }
 
   return (
-    <div {...getRootProps({style})}>
-      <input {...getInputProps()} />
-      {
-        isDragActive ?
-          <p>Drop the files here ...</p> :
-          <p>Drag 'n' drop some files here, or click to select files</p>
-      }
-    </div>
+    <>
+      <div {...getRootProps({ style })}>
+        <input {...getInputProps()} />
+        {
+          isDragActive ?
+            <p>Drop the files here ...</p> :
+            <p>Drag 'n' drop some files here, or click to select files</p>
+        }
+      </div>
+      <Box sx={{display: 'flex'}}>
+        {images && images.map(image =>
+          <Box sx={{ width: '60px' }}>
+            <Image key={image?._id} url={image?.url} />
+          </Box>
+        )}
+      </Box>
+    </>
   )
 }