Explorar o código

multiple image upload

viktoriia.kapran hai 1 ano
pai
achega
c2aa26828b
Modificáronse 1 ficheiros con 6 adicións e 2 borrados
  1. 6 2
      js21 react/my-react-app/src/components/ImageUploader.js

+ 6 - 2
js21 react/my-react-app/src/components/ImageUploader.js

@@ -34,7 +34,7 @@ function ImageUploader() {
   const [uploadImage, result] = useUploadImageMutation();
 
   const onDrop = useCallback(acceptedFiles => {
-    fileUpload(acceptedFiles[0]);
+    filesUpload(acceptedFiles);
   }, [])
   const {getRootProps, getInputProps, isDragActive, isFocused, isDragAccept, isDragReject} = useDropzone({accept: {'image/*': []}, onDrop});
 
@@ -49,7 +49,7 @@ function ImageUploader() {
     isDragReject
   ]);
 
-  function fileUpload(file) {
+ const fileUpload = (file) => {
     const formData = new FormData()
     formData.append('photo', file)
     return uploadImage(formData).then(response => {
@@ -57,6 +57,10 @@ function ImageUploader() {
     });
   }
 
+  const filesUpload = (files) => {
+    return Promise.all(files.map(fileUpload));
+  }
+
   return (
     <div {...getRootProps({style})}>
       <input {...getInputProps()} />