Merge branch 'master' into fix/dropdown-items

CHANGELOG.md

@@ -15,6 +15,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Use searches as hooks instead of components - #262 by @dominik-zeglen
 - Add navigator - #267 by @dominik-zeglen
 - Fix voucher limit - #271 by @dominik-zeglen
+- Allow multiple images to be uploaded - #277 by @dominik-zeglen
 - Fix dropdown clickable areas - #281 by @dominik-zeglen
 
 ## 2.0.0

src/categories/components/CategoryBackground/CategoryBackground.tsx

@@ -77,6 +77,7 @@ const CategoryBackground: React.FC<CategoryBackgroundProps> = props => {
               onChange={event => onImageUpload(event.target.files[0])}
               type="file"
               ref={anchor}
+              accept="image/*"
             />
           </>
         }
@@ -90,7 +91,7 @@ const CategoryBackground: React.FC<CategoryBackgroundProps> = props => {
           </div>
         </CardContent>
       ) : image === null ? (
-        <ImageUpload onImageUpload={onImageUpload} />
+        <ImageUpload onImageUpload={files => onImageUpload(files[0])} />
       ) : (
         <CardContent>
           <ImageTile image={image} onImageDelete={onImageDelete} />

src/collections/components/CollectionImage/CollectionImage.tsx

@@ -92,6 +92,7 @@ export const CollectionImage: React.FC<CollectionImageProps> = props => {
               onChange={event => onImageUpload(event.target.files[0])}
               type="file"
               ref={anchor}
+              accept="image/*"
             />
           </>
         }
@@ -105,7 +106,7 @@ export const CollectionImage: React.FC<CollectionImageProps> = props => {
           </div>
         </CardContent>
       ) : image === null ? (
-        <ImageUpload onImageUpload={onImageUpload} />
+        <ImageUpload onImageUpload={files => onImageUpload(files[0])} />
       ) : (
         <CardContent>
           <ImageTile image={image} onImageDelete={onImageDelete} />

src/components/ImageTile/ImageTile.tsx

@@ -1,9 +1,10 @@
-import { makeStyles } from "@material-ui/core/styles";
+import CircularProgress from "@material-ui/core/CircularProgress";
-import React from "react";
-
 import IconButton from "@material-ui/core/IconButton";
+import { makeStyles } from "@material-ui/core/styles";
 import DeleteIcon from "@material-ui/icons/Delete";
 import EditIcon from "@material-ui/icons/Edit";
+import classNames from "classnames";
+import React from "react";
 
 const useStyles = makeStyles(theme => ({
   image: {
@@ -37,6 +38,13 @@ const useStyles = makeStyles(theme => ({
     top: 0,
     width: 148
   },
+  imageOverlayShow: {
+    "&$imageOverlay": {
+      alignItems: "center",
+      display: "flex",
+      justifyContent: "center"
+    }
+  },
   imageOverlayToolbar: {
     display: "flex",
     justifyContent: "flex-end"
@@ -48,30 +56,39 @@ interface ImageTileProps {
     alt?: string;
     url: string;
   };
+  loading?: boolean;
   onImageDelete?: () => void;
   onImageEdit?: (event: React.ChangeEvent<any>) => void;
 }
 
 const ImageTile: React.FC<ImageTileProps> = props => {
-  const { onImageDelete, onImageEdit, image } = props;
+  const { loading, onImageDelete, onImageEdit, image } = props;
 
   const classes = useStyles(props);
 
   return (
     <div className={classes.imageContainer} data-tc="product-image">
-      <div className={classes.imageOverlay}>
+      <div
-        <div className={classes.imageOverlayToolbar}>
+        className={classNames(classes.imageOverlay, {
-          {onImageEdit && (
+          [classes.imageOverlayShow]: loading
-            <IconButton color="primary" onClick={onImageEdit}>
+        })}
-              <EditIcon />
+      >
-            </IconButton>
+        {loading ? (
-          )}
+          <CircularProgress size={32} />
-          {onImageDelete && (
+        ) : (
-            <IconButton color="primary" onClick={onImageDelete}>
+          <div className={classes.imageOverlayToolbar}>
-              <DeleteIcon />
+            {onImageEdit && (
-            </IconButton>
+              <IconButton color="primary" onClick={onImageEdit}>
-          )}
+                <EditIcon />
-        </div>
+              </IconButton>
+            )}
+            {onImageDelete && (
+              <IconButton color="primary" onClick={onImageDelete}>
+                <DeleteIcon />
+              </IconButton>
+            )}
+          </div>
+        )}
       </div>
       <img className={classes.image} src={image.url} alt={image.alt} />
     </div>

src/components/ImageUpload/ImageUpload.tsx

@@ -14,11 +14,11 @@ interface ImageUploadProps {
   isActiveClassName?: string;
   iconContainerClassName?: string;
   iconContainerActiveClassName?: string;
-  onImageUpload: (file: File) => void;
+  onImageUpload: (file: FileList) => void;
 }
 
 const useStyles = makeStyles(theme => ({
-  containerDragActive: {
+  backdrop: {
     background: fade(theme.palette.primary.main, 0.1),
     color: theme.palette.primary.main
   },
@@ -57,41 +57,37 @@ const useStyles = makeStyles(theme => ({
 export const ImageUpload: React.FC<ImageUploadProps> = props => {
   const {
     children,
-
     className,
     disableClick,
-    isActiveClassName,
     iconContainerActiveClassName,
     iconContainerClassName,
+    isActiveClassName,
     onImageUpload
   } = props;
 
   const classes = useStyles(props);
 
   return (
-    <Dropzone
+    <Dropzone disableClick={disableClick} onDrop={onImageUpload}>
-      disableClick={disableClick}
-      onDrop={files => onImageUpload(files[0])}
-    >
       {({ isDragActive, getInputProps, getRootProps }) => (
         <>
           <div
             {...getRootProps()}
-            className={classNames({
+            className={classNames(className, classes.photosIconContainer, {
-              [classes.photosIconContainer]: true,
+              [classes.backdrop]: isDragActive,
-              [classes.containerDragActive]: isDragActive,
+              [isActiveClassName]: isDragActive
-              [className]: !!className,
-              [isActiveClassName]: !!isActiveClassName && isDragActive
             })}
           >
             <div
-              className={classNames({
+              className={classNames(iconContainerClassName, {
-                [iconContainerClassName]: !!iconContainerClassName,
+                [iconContainerActiveClassName]: isDragActive
-                [iconContainerActiveClassName]:
-                  !!iconContainerActiveClassName && isDragActive
               })}
             >
-              <input {...getInputProps()} className={classes.fileField} />
+              <input
+                {...getInputProps()}
+                className={classes.fileField}
+                accept="image/*"
+              />
               <ImageIcon className={classes.photosIcon} />
               <Typography className={classes.uploadText}>
                 <FormattedMessage

src/products/components/ProductImages/ProductImages.tsx

@@ -7,6 +7,7 @@ import ImageTile from "@saleor/components/ImageTile";
 import ImageUpload from "@saleor/components/ImageUpload";
 import { commonMessages } from "@saleor/intl";
 import { ReorderAction } from "@saleor/types";
+import createMultiFileUploadHandler from "@saleor/utils/handlers/multiFileUploadHandler";
 import classNames from "classnames";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -72,6 +73,7 @@ const useStyles = makeStyles(theme => ({
   imageUpload: {
     height: "100%",
     left: 0,
+    outline: 0,
     position: "absolute",
     top: 0,
     width: "100%"
@@ -134,13 +136,14 @@ const SortableImage = SortableElement<SortableImageProps>(
 
 interface ImageListContainerProps {
   className: string;
-  items: any;
+  items: ProductDetails_product_images[];
+  preview: ProductDetails_product_images[];
   onImageDelete: (id: string) => () => void;
   onImageEdit: (id: string) => () => void;
 }
 
 const ImageListContainer = SortableContainer<ImageListContainerProps>(
-  ({ items, onImageDelete, onImageEdit, ...props }) => (
+  ({ items, preview, onImageDelete, onImageEdit, ...props }) => (
     <div {...props}>
       {items.map((image, index) => (
         <SortableImage
@@ -151,6 +154,11 @@ const ImageListContainer = SortableContainer<ImageListContainerProps>(
           onImageDelete={onImageDelete(image.id)}
         />
       ))}
+      {preview
+        .sort((a, b) => (a.sortOrder > b.sortOrder ? 1 : -1))
+        .map(image => (
+          <ImageTile loading={true} image={image} />
+        ))}
     </div>
   )
 );
@@ -169,6 +177,32 @@ const ProductImages: React.FC<ProductImagesProps> = props => {
   const classes = useStyles(props);
   const intl = useIntl();
   const upload = React.useRef(null);
+  const [imagesToUpload, setImagesToUpload] = React.useState<
+    ProductDetails_product_images[]
+  >([]);
+
+  const handleImageUpload = createMultiFileUploadHandler(onImageUpload, {
+    onAfterUpload: () =>
+      setImagesToUpload(prevImagesToUpload => prevImagesToUpload.slice(1)),
+    onStart: files => {
+      Array.from(files).forEach((file, fileIndex) => {
+        const reader = new FileReader();
+        reader.onload = event => {
+          setImagesToUpload(prevImagesToUpload => [
+            ...prevImagesToUpload,
+            {
+              __typename: "ProductImage",
+              alt: "",
+              id: "",
+              sortOrder: fileIndex,
+              url: event.target.result as string
+            }
+          ]);
+        };
+        reader.readAsDataURL(file);
+      });
+    }
+  });
 
   return (
     <Card className={classes.card}>
@@ -191,9 +225,11 @@ const ProductImages: React.FC<ProductImagesProps> = props => {
             <input
               className={classes.fileField}
               id="fileUpload"
-              onChange={event => onImageUpload(event.target.files[0])}
+              onChange={event => handleImageUpload(event.target.files)}
+              multiple
               type="file"
               ref={upload}
+              accept="image/*"
             />
           </>
         }
@@ -215,7 +251,7 @@ const ProductImages: React.FC<ProductImagesProps> = props => {
               disableClick={true}
               iconContainerClassName={classes.imageUploadIcon}
               iconContainerActiveClassName={classes.imageUploadIconActive}
-              onImageUpload={onImageUpload}
+              onImageUpload={handleImageUpload}
             >
               {({ isDragActive }) => (
                 <CardContent>
@@ -224,6 +260,7 @@ const ProductImages: React.FC<ProductImagesProps> = props => {
                     helperClass="dragged"
                     axis="xy"
                     items={images}
+                    preview={imagesToUpload}
                     onSortEnd={onImageReorder}
                     className={classNames({
                       [classes.root]: true,
@@ -237,7 +274,7 @@ const ProductImages: React.FC<ProductImagesProps> = props => {
             </ImageUpload>
           </>
         ) : (
-          <ImageUpload onImageUpload={onImageUpload} />
+          <ImageUpload onImageUpload={handleImageUpload} />
         )}
       </div>
     </Card>

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -16612,6 +16612,7 @@ Ctrl + K"
               </span>
             </button>
             <input
+              accept="image/*"
               class="makeStyles-fileField-id"
               id="fileUpload"
               type="file"
@@ -17389,6 +17390,7 @@ Ctrl + K"
               </span>
             </button>
             <input
+              accept="image/*"
               class="makeStyles-fileField-id"
               id="fileUpload"
               type="file"
@@ -18341,6 +18343,7 @@ Ctrl + K"
               </span>
             </button>
             <input
+              accept="image/*"
               class="makeStyles-fileField-id"
               id="fileUpload"
               type="file"
@@ -18361,6 +18364,7 @@ Ctrl + K"
             class=""
           >
             <input
+              accept="image/*"
               autocomplete="off"
               class="makeStyles-fileField-id"
               multiple=""
@@ -19270,6 +19274,7 @@ Ctrl + K"
               </span>
             </button>
             <input
+              accept="image/*"
               class="makeStyles-fileField-id"
               id="fileUpload"
               type="file"
@@ -20274,6 +20279,7 @@ Ctrl + K"
               </span>
             </button>
             <input
+              accept="image/*"
               class="makeStyles-fileField-id"
               id="fileUpload"
               type="file"
@@ -21249,6 +21255,7 @@ Ctrl + K"
               </span>
             </button>
             <input
+              accept="image/*"
               class="makeStyles-fileField-id"
               id="fileUpload"
               type="file"
@@ -22851,6 +22858,7 @@ Ctrl + K"
                   </span>
                 </button>
                 <input
+                  accept="image/*"
                   class="CollectionImage-fileField-id"
                   id="fileUpload"
                   type="file"
@@ -24134,6 +24142,7 @@ Ctrl + K"
                   </span>
                 </button>
                 <input
+                  accept="image/*"
                   class="CollectionImage-fileField-id"
                   id="fileUpload"
                   type="file"
@@ -25330,6 +25339,7 @@ Ctrl + K"
                   </span>
                 </button>
                 <input
+                  accept="image/*"
                   class="CollectionImage-fileField-id"
                   id="fileUpload"
                   type="file"
@@ -27454,6 +27464,7 @@ Ctrl + K"
                   </span>
                 </button>
                 <input
+                  accept="image/*"
                   class="CollectionImage-fileField-id"
                   id="fileUpload"
                   type="file"
@@ -27474,6 +27485,7 @@ Ctrl + K"
                 class=""
               >
                 <input
+                  accept="image/*"
                   autocomplete="off"
                   class="makeStyles-fileField-id"
                   multiple=""
@@ -28195,6 +28207,7 @@ Ctrl + K"
                   </span>
                 </button>
                 <input
+                  accept="image/*"
                   class="CollectionImage-fileField-id"
                   id="fileUpload"
                   type="file"
@@ -28215,6 +28228,7 @@ Ctrl + K"
                 class=""
               >
                 <input
+                  accept="image/*"
                   autocomplete="off"
                   class="makeStyles-fileField-id"
                   multiple=""
@@ -92988,8 +93002,10 @@ Ctrl + K"
                   </span>
                 </button>
                 <input
+                  accept="image/*"
                   class="makeStyles-fileField-id"
                   id="fileUpload"
+                  multiple=""
                   type="file"
                 />
               </div>
@@ -93004,13 +93020,14 @@ Ctrl + K"
               class="makeStyles-imageGridContainer-id"
             >
               <div
-                class="makeStyles-photosIconContainer-id makeStyles-imageUpload-id"
+                class="makeStyles-imageUpload-id makeStyles-photosIconContainer-id"
                 tabindex="0"
               >
                 <div
                   class="makeStyles-imageUploadIcon-id"
                 >
                   <input
+                    accept="image/*"
                     autocomplete="off"
                     class="makeStyles-fileField-id"
                     multiple=""
@@ -94510,8 +94527,10 @@ Ctrl + K"
                   </span>
                 </button>
                 <input
+                  accept="image/*"
                   class="makeStyles-fileField-id"
                   id="fileUpload"
+                  multiple=""
                   type="file"
                 />
               </div>
@@ -94526,13 +94545,14 @@ Ctrl + K"
               class="makeStyles-imageGridContainer-id"
             >
               <div
-                class="makeStyles-photosIconContainer-id makeStyles-imageUpload-id"
+                class="makeStyles-imageUpload-id makeStyles-photosIconContainer-id"
                 tabindex="0"
               >
                 <div
                   class="makeStyles-imageUploadIcon-id"
                 >
                   <input
+                    accept="image/*"
                     autocomplete="off"
                     class="makeStyles-fileField-id"
                     multiple=""
@@ -96291,8 +96311,10 @@ Ctrl + K"
                   </span>
                 </button>
                 <input
+                  accept="image/*"
                   class="makeStyles-fileField-id"
                   id="fileUpload"
+                  multiple=""
                   type="file"
                 />
               </div>
@@ -96307,13 +96329,14 @@ Ctrl + K"
               class="makeStyles-imageGridContainer-id"
             >
               <div
-                class="makeStyles-photosIconContainer-id makeStyles-imageUpload-id"
+                class="makeStyles-imageUpload-id makeStyles-photosIconContainer-id"
                 tabindex="0"
               >
                 <div
                   class="makeStyles-imageUploadIcon-id"
                 >
                   <input
+                    accept="image/*"
                     autocomplete="off"
                     class="makeStyles-fileField-id"
                     multiple=""
@@ -97874,8 +97897,10 @@ Ctrl + K"
                   </span>
                 </button>
                 <input
+                  accept="image/*"
                   class="makeStyles-fileField-id"
                   id="fileUpload"
+                  multiple=""
                   type="file"
                 />
               </div>
@@ -99164,8 +99189,10 @@ Ctrl + K"
                   </span>
                 </button>
                 <input
+                  accept="image/*"
                   class="makeStyles-fileField-id"
                   id="fileUpload"
+                  multiple=""
                   type="file"
                 />
               </div>
@@ -99187,6 +99214,7 @@ Ctrl + K"
                   class=""
                 >
                   <input
+                    accept="image/*"
                     autocomplete="off"
                     class="makeStyles-fileField-id"
                     multiple=""
@@ -100852,8 +100880,10 @@ Ctrl + K"
                   </span>
                 </button>
                 <input
+                  accept="image/*"
                   class="makeStyles-fileField-id"
                   id="fileUpload"
+                  multiple=""
                   type="file"
                 />
               </div>
@@ -100868,13 +100898,14 @@ Ctrl + K"
               class="makeStyles-imageGridContainer-id"
             >
               <div
-                class="makeStyles-photosIconContainer-id makeStyles-imageUpload-id"
+                class="makeStyles-imageUpload-id makeStyles-photosIconContainer-id"
                 tabindex="0"
               >
                 <div
                   class="makeStyles-imageUploadIcon-id"
                 >
                   <input
+                    accept="image/*"
                     autocomplete="off"
                     class="makeStyles-fileField-id"
                     multiple=""

src/utils/handlers/multiFileUploadHandler.test.ts

@@ -0,0 +1,67 @@
+import createMultiFileUploadHandler from "./multiFileUploadHandler";
+
+const testFiles = Array(5)
+  .fill(0)
+  .map(() => new File([""], "mockFile"));
+
+describe("Multiple file upload handler", () => {
+  it("properly handles success", done => {
+    const cbs = {
+      onAfterUpload: jest.fn(),
+      onBeforeUpload: jest.fn(),
+      onCompleted: jest.fn(files =>
+        expect(files.length).toBe(testFiles.length)
+      ),
+      onError: jest.fn(),
+      onStart: jest.fn()
+    };
+    const handle = createMultiFileUploadHandler(() => {
+      const promise = new Promise(resolve => {
+        expect(cbs.onBeforeUpload).toBeCalledTimes(
+          cbs.onAfterUpload.mock.calls.length + 1
+        );
+        resolve();
+      });
+      return promise;
+    }, cbs);
+
+    handle((testFiles as unknown) as FileList).then(() => {
+      expect(cbs.onAfterUpload).toBeCalledTimes(testFiles.length);
+      expect(cbs.onBeforeUpload).toBeCalledTimes(testFiles.length);
+      expect(cbs.onCompleted).toBeCalledTimes(1);
+      expect(cbs.onError).toBeCalledTimes(0);
+      expect(cbs.onStart).toBeCalledTimes(1);
+      done();
+    });
+  });
+
+  it("properly handles error", done => {
+    const cbs = {
+      onAfterUpload: jest.fn(),
+      onBeforeUpload: jest.fn(),
+      onCompleted: jest.fn(files =>
+        expect(files.length).toBe(testFiles.length)
+      ),
+      onError: jest.fn(),
+      onStart: jest.fn()
+    };
+    const handle = createMultiFileUploadHandler((_, fileIndex) => {
+      const promise = new Promise((resolve, reject) => {
+        if (fileIndex === 2) {
+          reject();
+        } else {
+          resolve();
+        }
+      });
+      return promise;
+    }, cbs);
+
+    handle((testFiles as unknown) as FileList).then(() => {
+      expect(cbs.onAfterUpload).toBeCalledTimes(testFiles.length - 1);
+      expect(cbs.onBeforeUpload).toBeCalledTimes(testFiles.length);
+      expect(cbs.onCompleted).toBeCalledTimes(1);
+      expect(cbs.onError).toBeCalledTimes(1);
+      done();
+    });
+  });
+});

src/utils/handlers/multiFileUploadHandler.ts

@@ -0,0 +1,58 @@
+export type CreateMultiFileUploadHandlerCallbacks = Partial<{
+  onAfterUpload: (index: number, files: File[]) => void;
+  onBeforeUpload: (index: number, files: File[]) => void;
+  onCompleted: (files: File[]) => void;
+  onError: (index: number, files: File[]) => void;
+  onStart: (files: File[]) => void;
+}>;
+
+function createMultiFileUploadHandler<T>(
+  upload: (file: File, fileIndex: number) => Promise<T>,
+  {
+    onAfterUpload,
+    onBeforeUpload,
+    onCompleted,
+    onError,
+    onStart
+  }: CreateMultiFileUploadHandlerCallbacks
+) {
+  async function uploadImage(files: File[], fileIndex: number): Promise<void> {
+    if (files.length > fileIndex) {
+      try {
+        if (onBeforeUpload) {
+          onBeforeUpload(fileIndex, files);
+        }
+
+        await upload(files[fileIndex], fileIndex);
+
+        if (onAfterUpload) {
+          onAfterUpload(fileIndex, files);
+        }
+      } catch (exception) {
+        console.error(
+          `Could not upload file #${fileIndex + 1}. Reason: ${exception}`
+        );
+        if (onError) {
+          onError(fileIndex, files);
+        }
+      } finally {
+        await uploadImage(files, fileIndex + 1);
+      }
+    }
+  }
+  return async (files: FileList): Promise<void> => {
+    const fileArray = Array.from(files);
+
+    if (onStart) {
+      onStart(fileArray);
+    }
+
+    await uploadImage(fileArray, 0);
+
+    if (onCompleted) {
+      onCompleted(fileArray);
+    }
+  };
+}
+
+export default createMultiFileUploadHandler;