浏览代码

multiple image upload

viktoriia.kapran 1 年之前
父节点
当前提交
c2aa26828b
共有 1 个文件被更改,包括 6 次插入2 次删除
  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()} />