@webiny/ui 0.0.0-ee-vpcs.549378cf03

package/ImageUpload/MultiImageUpload.js

@@ -0,0 +1,419 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiImageUpload = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactButterfiles = _interopRequireDefault(require("react-butterfiles"));
+
+var _emotion = require("emotion");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _FormElementMessage = require("../FormElementMessage");
+
+var _Image = _interopRequireDefault(require("./Image"));
+
+var _ImageEditorDialog = _interopRequireDefault(require("./ImageEditorDialog"));
+
+var imagesStyle = /*#__PURE__*/(0, _emotion.css)({
+  ".disabled": {
+    opacity: 0.75,
+    pointerEvents: "none"
+  },
+  "ul.images": {
+    listStyle: "none",
+    li: {
+      verticalAlign: "top",
+      margin: 2,
+      display: "inline-block",
+      width: 150,
+      height: 150,
+      "&:last-child": {
+        border: "1px solid lightgray",
+        cursor: "pointer",
+        textAlign: "center"
+      }
+    }
+  }
+}, "label:imagesStyle;"); // Do not apply editping for following image types.
+// const noImageEditorTypes = ["image/svg+xml", "image/gif"];
+
+var MultiImageUpload = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(MultiImageUpload, _React$Component);
+
+  var _super = (0, _createSuper2.default)(MultiImageUpload);
+
+  function MultiImageUpload() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, MultiImageUpload);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      errors: undefined,
+      selectedImages: {},
+      loading: false,
+      imageEditor: {
+        open: false,
+        image: null,
+        index: undefined
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(value) {
+        var _this$props, onChange, validate;
+
+        return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _this$props = _this.props, onChange = _this$props.onChange, validate = _this$props.validate;
+                _context.t0 = onChange;
+
+                if (!_context.t0) {
+                  _context.next = 5;
+                  break;
+                }
+
+                _context.next = 5;
+                return onChange(value);
+
+              case 5:
+                _context.t1 = validate;
+
+                if (!_context.t1) {
+                  _context.next = 9;
+                  break;
+                }
+
+                _context.next = 9;
+                return validate();
+
+              case 9:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectedImages", /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee4(images) {
+        var selectedIndex,
+            _args4 = arguments;
+        return (0, _regeneratorRuntime2.default)().wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                selectedIndex = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : 0;
+
+                _this.setState({
+                  errors: undefined,
+                  loading: true
+                }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3() {
+                  var selectedImages, i, image;
+                  return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
+                    while (1) {
+                      switch (_context3.prev = _context3.next) {
+                        case 0:
+                          selectedImages = {};
+
+                          for (i = 0; i < images.length; i++) {
+                            image = images[i];
+                            selectedImages[selectedIndex + i] = (0, _objectSpread2.default)({}, image);
+                          }
+
+                          _this.setState({
+                            selectedImages: selectedImages
+                          }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
+                            var newValue, convertedImages, _i, _image;
+
+                            return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+                              while (1) {
+                                switch (_context2.prev = _context2.next) {
+                                  case 0:
+                                    newValue = Array.isArray(_this.props.value) ? (0, _toConsumableArray2.default)(_this.props.value) : [];
+                                    convertedImages = [];
+
+                                    for (_i = 0; _i < images.length; _i++) {
+                                      _image = images[_i];
+                                      convertedImages.push({
+                                        src: _image.src.base64,
+                                        name: _image.name,
+                                        size: _image.size,
+                                        type: _image.type
+                                      });
+                                    }
+
+                                    newValue.splice.apply(newValue, [selectedIndex, 0].concat(convertedImages));
+                                    _context2.next = 6;
+                                    return _this.onChange(newValue);
+
+                                  case 6:
+                                    _this.setState({
+                                      loading: false
+                                    });
+
+                                  case 7:
+                                  case "end":
+                                    return _context2.stop();
+                                }
+                              }
+                            }, _callee2);
+                          })));
+
+                        case 3:
+                        case "end":
+                          return _context3.stop();
+                      }
+                    }
+                  }, _callee3);
+                })));
+
+              case 2:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }));
+
+      return function (_x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleErrors", function (errors) {
+      _this.setState({
+        errors: errors
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "removeImage", function (image) {
+      var _this$props2 = _this.props,
+          value = _this$props2.value,
+          onChange = _this$props2.onChange;
+
+      if (!onChange) {
+        return;
+      }
+
+      var images = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
+      images.splice(images.indexOf(image), 1);
+      onChange(images);
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(MultiImageUpload, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props3 = this.props,
+          value = _this$props3.value,
+          validation = _this$props3.validation,
+          label = _this$props3.label,
+          description = _this$props3.description,
+          disabled = _this$props3.disabled,
+          imageEditor = _this$props3.imageEditor,
+          accept = _this$props3.accept,
+          maxSize = _this$props3.maxSize,
+          className = _this$props3.className;
+      /**
+       * TODO: figure out the correct type
+       */
+
+      var imageEditorImageSrc = "";
+
+      if (this.state.imageEditor.image) {
+        // @ts-ignore
+        imageEditorImageSrc = this.state.imageEditor.image.src;
+        console.warn("Figure out correct type if this.state.imageEditor.image.src");
+        console.log(this.state.imageEditor.image.src);
+      }
+
+      var _ref5 = validation || {},
+          validationIsValid = _ref5.isValid,
+          validationMessage = _ref5.message;
+      /**
+       * accept can safely be cast because we have default value
+       */
+
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(imagesStyle, className)
+      }, label && /*#__PURE__*/_react.default.createElement("div", {
+        className: "mdc-floating-label mdc-floating-label--float-above"
+      }, label), /*#__PURE__*/_react.default.createElement(_ImageEditorDialog.default, {
+        options: imageEditor,
+        open: this.state.imageEditor.open,
+        src: imageEditorImageSrc,
+        onClose: function onClose() {
+          _this2.setState(function (state) {
+            state.imageEditor.open = false;
+            return state;
+          });
+        },
+        onAccept: function onAccept(src) {
+          // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.
+          setTimeout(function () {
+            _this2.setState({
+              loading: true
+            }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee5() {
+              var newValue, imageEditorImageIndex;
+              return (0, _regeneratorRuntime2.default)().wrap(function _callee5$(_context5) {
+                while (1) {
+                  switch (_context5.prev = _context5.next) {
+                    case 0:
+                      newValue = Array.isArray(_this2.props.value) ? (0, _toConsumableArray2.default)(_this2.props.value) : [];
+                      imageEditorImageIndex = _this2.state.imageEditor.index;
+                      newValue[imageEditorImageIndex].src = src;
+                      _context5.next = 5;
+                      return _this2.onChange(newValue);
+
+                    case 5:
+                      _this2.setState({
+                        loading: false,
+                        imageEditor: {
+                          image: null,
+                          open: false,
+                          index: undefined
+                        }
+                      });
+
+                    case 6:
+                    case "end":
+                      return _context5.stop();
+                  }
+                }
+              }, _callee5);
+            })));
+          });
+        }
+      }), /*#__PURE__*/_react.default.createElement(_reactButterfiles.default, {
+        accept: accept,
+        maxSize: maxSize,
+        multiple: true,
+        convertToBase64: true,
+        onSuccess: function onSuccess(files) {
+          _this2.handleSelectedImages(files, Array.isArray(value) ? value.length : 0);
+        },
+        onError: function onError(errors) {
+          return _this2.handleErrors(errors);
+        }
+      }, function (_ref7) {
+        var browseFiles = _ref7.browseFiles,
+            getDropZoneProps = _ref7.getDropZoneProps;
+        var images = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
+        return /*#__PURE__*/_react.default.createElement("div", getDropZoneProps({
+          className: (0, _classnames.default)({
+            disabled: disabled
+          })
+        }), /*#__PURE__*/_react.default.createElement("ul", {
+          className: "images"
+        }, images.map(function (image, index) {
+          return /*#__PURE__*/_react.default.createElement("li", {
+            key: index
+          }, /*#__PURE__*/_react.default.createElement(_Image.default, {
+            loading: _this2.state.selectedImages[index] && _this2.state.loading,
+            value: image.file || image,
+            removeImage: function removeImage() {
+              return _this2.removeImage(image.file || image);
+            },
+            editImage: _this2.state.selectedImages[index] && function () {
+              _this2.setState({
+                imageEditor: {
+                  index: index,
+                  open: true,
+                  image: _this2.state.selectedImages[index]
+                }
+              });
+            },
+            uploadImage: function uploadImage() {
+              browseFiles({
+                onSuccess: function onSuccess(files) {
+                  _this2.handleSelectedImages(files, index + 1);
+                },
+                onError: function onError(errors) {
+                  return _this2.handleErrors(errors);
+                }
+              });
+            }
+          }));
+        }), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Image.default, {
+          disabled: _this2.state.loading,
+          uploadImage: function uploadImage() {
+            browseFiles({
+              onSuccess: function onSuccess(files) {
+                _this2.handleSelectedImages(files, Array.isArray(value) ? value.length : 0);
+              },
+              onError: function onError(errors) {
+                return _this2.handleErrors(errors);
+              }
+            });
+          }
+        }))));
+      }), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+        error: true
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description), Array.isArray(this.state.errors) && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+        error: true
+      }, "Your selection of images failed because of the following images:", /*#__PURE__*/_react.default.createElement("ul", null, this.state.errors.map(function (error, index) {
+        /**
+         * We need to cast as existing keys in errorMessages, otherwise TS throws an error
+         */
+        var errorType = error.type;
+        var message = _this2.props.errorMessages[errorType];
+        var errorFileName = error.file ? error.file.name : "";
+        return /*#__PURE__*/_react.default.createElement("li", {
+          key: errorFileName + index
+        }, index + 1, ". ", /*#__PURE__*/_react.default.createElement("strong", null, errorFileName), " -\xA0", message || _this2.props.errorMessages.default);
+      }))));
+    }
+  }]);
+  return MultiImageUpload;
+}(_react.default.Component);
+
+exports.MultiImageUpload = MultiImageUpload;
+(0, _defineProperty2.default)(MultiImageUpload, "defaultProps", {
+  accept: ["image/jpeg", "image/png", "image/gif", "image/svg+xml"],
+  maxSize: "5mb",
+  imageEditor: {},
+  errorMessages: {
+    maxSizeExceeded: "Max size exceeded.",
+    unsupportedFileType: "Unsupported file type.",
+    default: "An error occurred."
+  }
+});

package/ImageUpload/MultiImageUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["imagesStyle","css","opacity","pointerEvents","listStyle","li","verticalAlign","margin","display","width","height","border","cursor","textAlign","MultiImageUpload","errors","undefined","selectedImages","loading","imageEditor","open","image","index","value","props","onChange","validate","images","selectedIndex","setState","i","length","newValue","Array","isArray","convertedImages","push","src","base64","name","size","type","splice","indexOf","validation","label","description","disabled","accept","maxSize","className","imageEditorImageSrc","state","console","warn","log","validationIsValid","isValid","validationMessage","message","classNames","setTimeout","imageEditorImageIndex","files","handleSelectedImages","handleErrors","browseFiles","getDropZoneProps","map","file","removeImage","onSuccess","onError","error","errorType","errorMessages","errorFileName","default","React","Component","maxSizeExceeded","unsupportedFileType"],"sources":["MultiImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport BrowseFiles, { SelectedFile, FileError } from \"react-butterfiles\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { FormElementMessage } from \"../FormElementMessage\";\nimport Image from \"./Image\";\nimport ImageEditorDialog from \"./ImageEditorDialog\";\nimport { FormComponentProps } from \"../types\";\n\nconst imagesStyle = css({\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \"ul.images\": {\n        listStyle: \"none\",\n        li: {\n            verticalAlign: \"top\",\n            margin: 2,\n            display: \"inline-block\",\n            width: 150,\n            height: 150,\n            \"&:last-child\": {\n                border: \"1px solid lightgray\",\n                cursor: \"pointer\",\n                textAlign: \"center\"\n            }\n        }\n    }\n});\n\n// Do not apply editping for following image types.\n// const noImageEditorTypes = [\"image/svg+xml\", \"image/gif\"];\n\ninterface MultiImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: Array<string>;\n\n    // Define file's max allowed size (default is \"5mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: Object;\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n    };\n\n    // Cropper options\n    cropper?: { [key: string]: any };\n}\n\ninterface State {\n    errors?: FileError[];\n    selectedImages: Record<string, any>;\n    loading: boolean;\n    imageEditor: {\n        image: SelectedFile | null;\n        open: boolean;\n        index?: number;\n    };\n}\n\nclass MultiImageUpload extends React.Component<MultiImageUploadProps, State> {\n    static defaultProps: Partial<MultiImageUploadProps> = {\n        accept: [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/svg+xml\"],\n        maxSize: \"5mb\",\n        imageEditor: {},\n        errorMessages: {\n            maxSizeExceeded: \"Max size exceeded.\",\n            unsupportedFileType: \"Unsupported file type.\",\n            default: \"An error occurred.\"\n        }\n    };\n\n    public override state: State = {\n        errors: undefined,\n        selectedImages: {},\n        loading: false,\n        imageEditor: {\n            open: false,\n            image: null,\n            index: undefined\n        }\n    };\n\n    onChange = async (value: any) => {\n        const { onChange, validate } = this.props;\n        onChange && (await onChange(value));\n        validate && (await validate());\n    };\n\n    handleSelectedImages = async (images: Array<SelectedFile>, selectedIndex = 0) => {\n        this.setState(\n            {\n                errors: undefined,\n                loading: true\n            },\n            async () => {\n                const selectedImages: Record<number, any> = {};\n                for (let i = 0; i < images.length; i++) {\n                    const image = images[i];\n                    selectedImages[selectedIndex + i] = { ...image };\n                }\n\n                this.setState({ selectedImages }, async () => {\n                    const newValue = Array.isArray(this.props.value) ? [...this.props.value] : [];\n\n                    const convertedImages = [];\n                    for (let i = 0; i < images.length; i++) {\n                        const image = images[i];\n                        convertedImages.push({\n                            src: image.src.base64,\n                            name: image.name,\n                            size: image.size,\n                            type: image.type\n                        });\n                    }\n\n                    newValue.splice(selectedIndex, 0, ...convertedImages);\n                    await this.onChange(newValue);\n                    this.setState({ loading: false });\n                });\n            }\n        );\n    };\n\n    handleErrors = (errors: Array<FileError>) => {\n        this.setState({ errors });\n    };\n\n    removeImage = (image: SelectedFile) => {\n        const { value, onChange } = this.props;\n        if (!onChange) {\n            return;\n        }\n\n        const images = Array.isArray(value) ? [...value] : [];\n        images.splice(images.indexOf(image), 1);\n        onChange(images);\n    };\n\n    public override render() {\n        const {\n            value,\n            validation,\n            label,\n            description,\n            disabled,\n            imageEditor,\n            accept,\n            maxSize,\n            className\n        } = this.props;\n        /**\n         * TODO: figure out the correct type\n         */\n        let imageEditorImageSrc = \"\";\n        if (this.state.imageEditor.image) {\n            // @ts-ignore\n            imageEditorImageSrc = this.state.imageEditor.image.src;\n            console.warn(\"Figure out correct type if this.state.imageEditor.image.src\");\n            console.log(this.state.imageEditor.image.src);\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n        /**\n         * accept can safely be cast because we have default value\n         */\n        return (\n            <div className={classNames(imagesStyle, className)}>\n                {label && (\n                    <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                        {label}\n                    </div>\n                )}\n\n                <ImageEditorDialog\n                    options={imageEditor}\n                    open={this.state.imageEditor.open}\n                    src={imageEditorImageSrc}\n                    onClose={() => {\n                        this.setState(state => {\n                            state.imageEditor.open = false;\n                            return state;\n                        });\n                    }}\n                    onAccept={src => {\n                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.\n                        setTimeout(() => {\n                            this.setState({ loading: true }, async () => {\n                                const newValue = Array.isArray(this.props.value)\n                                    ? [...this.props.value]\n                                    : [];\n\n                                const imageEditorImageIndex = this.state.imageEditor\n                                    .index as number;\n                                newValue[imageEditorImageIndex].src = src;\n\n                                await this.onChange(newValue);\n                                this.setState({\n                                    loading: false,\n                                    imageEditor: {\n                                        image: null,\n                                        open: false,\n                                        index: undefined\n                                    }\n                                });\n                            });\n                        });\n                    }}\n                />\n\n                <BrowseFiles\n                    accept={accept as string[]}\n                    maxSize={maxSize}\n                    multiple\n                    convertToBase64\n                    onSuccess={files => {\n                        this.handleSelectedImages(files, Array.isArray(value) ? value.length : 0);\n                    }}\n                    onError={errors => this.handleErrors(errors)}\n                >\n                    {({ browseFiles, getDropZoneProps }) => {\n                        const images = Array.isArray(value) ? [...value] : [];\n\n                        return (\n                            <div {...getDropZoneProps({ className: classNames({ disabled }) })}>\n                                <ul className=\"images\">\n                                    {images.map((image, index) => (\n                                        <li key={index}>\n                                            <Image\n                                                loading={\n                                                    this.state.selectedImages[index] &&\n                                                    this.state.loading\n                                                }\n                                                value={image.file || image}\n                                                removeImage={() =>\n                                                    this.removeImage(image.file || image)\n                                                }\n                                                editImage={\n                                                    this.state.selectedImages[index] &&\n                                                    (() => {\n                                                        this.setState({\n                                                            imageEditor: {\n                                                                index,\n                                                                open: true,\n                                                                image: this.state.selectedImages[\n                                                                    index\n                                                                ]\n                                                            }\n                                                        });\n                                                    })\n                                                }\n                                                uploadImage={() => {\n                                                    browseFiles({\n                                                        onSuccess: files => {\n                                                            this.handleSelectedImages(\n                                                                files,\n                                                                index + 1\n                                                            );\n                                                        },\n                                                        onError: errors => this.handleErrors(errors)\n                                                    });\n                                                }}\n                                            />\n                                        </li>\n                                    ))}\n                                    <li>\n                                        <Image\n                                            disabled={this.state.loading}\n                                            uploadImage={() => {\n                                                browseFiles({\n                                                    onSuccess: files => {\n                                                        this.handleSelectedImages(\n                                                            files,\n                                                            Array.isArray(value) ? value.length : 0\n                                                        );\n                                                    },\n                                                    onError: errors => this.handleErrors(errors)\n                                                });\n                                            }}\n                                        />\n                                    </li>\n                                </ul>\n                            </div>\n                        );\n                    }}\n                </BrowseFiles>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {Array.isArray(this.state.errors) && (\n                    <FormElementMessage error>\n                        Your selection of images failed because of the following images:\n                        <ul>\n                            {this.state.errors.map((error: FileError, index) => {\n                                /**\n                                 * We need to cast as existing keys in errorMessages, otherwise TS throws an error\n                                 */\n                                const errorType = error.type as\n                                    | \"maxSizeExceeded\"\n                                    | \"unsupportedFileType\"\n                                    | \"default\";\n                                const message = this.props.errorMessages[errorType];\n\n                                const errorFileName = error.file ? error.file.name : \"\";\n\n                                return (\n                                    <li key={errorFileName + index}>\n                                        {index + 1}. <strong>{errorFileName}</strong> -&nbsp;\n                                        {message || this.props.errorMessages.default}\n                                    </li>\n                                );\n                            })}\n                        </ul>\n                    </FormElementMessage>\n                )}\n            </div>\n        );\n    }\n}\n\nexport { MultiImageUpload };\n"],"mappings":"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"}

package/ImageUpload/MultiImageUpload.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/ImageUpload/MultiImageUpload.stories.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _form = require("@webiny/form");
+
+var _MultiImageUpload = require("./MultiImageUpload");
+
+var story = (0, _react2.storiesOf)("Components/ImageUpload", module);
+story.addDecorator(_addonKnobs.withKnobs);
+var images = [{
+  id: 1,
+  name: "1st_image.jpg",
+  src: "http://i.pravatar.cc/150?img=49",
+  type: "image/jpeg",
+  size: 901611
+}, {
+  id: 2,
+  name: "2nd_image.jpg",
+  src: "http://i.pravatar.cc/150?img=63",
+  type: "image/jpeg",
+  size: 902612
+}, {
+  id: 3,
+  name: "3rd_image.jpg",
+  src: "http://i.pravatar.cc/150?img=24",
+  type: "image/jpeg",
+  size: 903613
+}, {
+  id: 4,
+  name: "4th_image.jpg",
+  src: "http://i.pravatar.cc/150?img=57",
+  type: "image/jpeg",
+  size: 904614
+}, {
+  id: 5,
+  name: "5th_image.jpg",
+  src: "http://i.pravatar.cc/150?img=31",
+  type: "image/jpeg",
+  size: 905615
+}];
+story.add("Multi Image Upload", function () {
+  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement(_form.Form, {
+    data: {
+      images: images
+    }
+  }, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/_react.default.createElement(Bind, {
+      name: "images"
+    }, /*#__PURE__*/_react.default.createElement(_MultiImageUpload.MultiImageUpload, {
+      label: "Your previously uploaded images:",
+      disabled: disabled,
+      description: "This list will not be shown to other users.",
+      cropper: {
+        aspectRatio: 1
+      }
+    }));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                        <Form data={".concat(JSON.stringify({
+    images: images
+  }), "}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                     <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    "))));
+}, {
+  info: {
+    propTables: [_MultiImageUpload.MultiImageUpload]
+  }
+});

package/ImageUpload/MultiImageUpload.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","images","id","name","src","type","size","add","disabled","boolean","readme","Bind","aspectRatio","JSON","stringify","info","propTables","MultiImageUpload"],"sources":["MultiImageUpload.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { MultiImageUpload } from \"./MultiImageUpload\";\n\nconst story = storiesOf(\"Components/ImageUpload\", module);\nstory.addDecorator(withKnobs);\n\nconst images = [\n    {\n        id: 1,\n        name: \"1st_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=49\",\n        type: \"image/jpeg\",\n        size: 901611\n    },\n    {\n        id: 2,\n        name: \"2nd_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=63\",\n        type: \"image/jpeg\",\n        size: 902612\n    },\n    {\n        id: 3,\n        name: \"3rd_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=24\",\n        type: \"image/jpeg\",\n        size: 903613\n    },\n    {\n        id: 4,\n        name: \"4th_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=57\",\n        type: \"image/jpeg\",\n        size: 904614\n    },\n    {\n        id: 5,\n        name: \"5th_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=31\",\n        type: \"image/jpeg\",\n        size: 905615\n    }\n];\n\nstory.add(\n    \"Multi Image Upload\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Form data={{ images }}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                    <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                        cropper={{\n                                            aspectRatio: 1\n                                        }}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={${JSON.stringify({ images: images })}}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                     <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [MultiImageUpload] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,wBAAV,EAAoCC,MAApC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEA,IAAMC,MAAM,GAAG,CACX;EACIC,EAAE,EAAE,CADR;EAEIC,IAAI,EAAE,eAFV;EAGIC,GAAG,EAAE,iCAHT;EAIIC,IAAI,EAAE,YAJV;EAKIC,IAAI,EAAE;AALV,CADW,EAQX;EACIJ,EAAE,EAAE,CADR;EAEIC,IAAI,EAAE,eAFV;EAGIC,GAAG,EAAE,iCAHT;EAIIC,IAAI,EAAE,YAJV;EAKIC,IAAI,EAAE;AALV,CARW,EAeX;EACIJ,EAAE,EAAE,CADR;EAEIC,IAAI,EAAE,eAFV;EAGIC,GAAG,EAAE,iCAHT;EAIIC,IAAI,EAAE,YAJV;EAKIC,IAAI,EAAE;AALV,CAfW,EAsBX;EACIJ,EAAE,EAAE,CADR;EAEIC,IAAI,EAAE,eAFV;EAGIC,GAAG,EAAE,iCAHT;EAIIC,IAAI,EAAE,YAJV;EAKIC,IAAI,EAAE;AALV,CAtBW,EA6BX;EACIJ,EAAE,EAAE,CADR;EAEIC,IAAI,EAAE,eAFV;EAGIC,GAAG,EAAE,iCAHT;EAIIC,IAAI,EAAE,YAJV;EAKIC,IAAI,EAAE;AALV,CA7BW,CAAf;AAsCAV,KAAK,CAACW,GAAN,CACI,oBADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD,qBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAET,MAAM,EAANA;IAAF;EAAZ,GACK;IAAA,IAAGU,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,kCAAD;MACI,KAAK,EAAC,kCADV;MAEI,QAAQ,EAAEH,QAFd;MAGI,WAAW,EAAC,6CAHhB;MAII,OAAO,EAAE;QACLI,WAAW,EAAE;MADR;IAJb,EADJ,CADH;EAAA,CADL,CADJ,CADJ,eAiBI,6BAAC,uBAAD,wDAEkBC,IAAI,CAACC,SAAL,CAAe;IAAEb,MAAM,EAAEA;EAAV,CAAf,CAFlB,okBAjBJ,CAFJ,CADJ;AAsCH,CA3CL,EA4CI;EAAEc,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,kCAAD;EAAd;AAAR,CA5CJ"}

package/ImageUpload/README.md

@@ -0,0 +1,11 @@
+# ImageUpload
+
+### Description
+
+`ImageUpload` component lets users select a image (eg. to be uploaded to a server), or multiple images.
+
+### Import
+
+```js
+import { SingleImageUpload, MultiImageUpload } from "@webiny/ui/ImageUpload";
+```

package/ImageUpload/SingleImageUpload.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import { FormComponentProps } from "../types";
+import { SelectedFile, FileError } from "react-butterfiles";
+interface SingleImageUploadProps extends FormComponentProps {
+    label?: string;
+    disabled?: boolean;
+    description?: string;
+    className?: string;
+    accept?: Array<string>;
+    maxSize: string;
+    imageEditor?: Object;
+    renderImagePreview?: () => React.ReactElement<any>;
+    showRemoveImageButton?: boolean;
+    errorMessages: {
+        maxSizeExceeded: string;
+        unsupportedFileType: string;
+        default: string;
+        multipleNotAllowed: string;
+        multipleMaxSizeExceeded: string;
+    };
+}
+interface StateImage {
+    name: string;
+    type: string;
+    size: number;
+    src?: string;
+}
+interface State {
+    loading: boolean;
+    error: FileError | null;
+    imageEditor: {
+        image: StateImage | null;
+        open: boolean;
+    };
+}
+export declare class SingleImageUpload extends React.Component<SingleImageUploadProps, State> {
+    static defaultProps: Partial<SingleImageUploadProps>;
+    state: State;
+    handleFiles: (images: SelectedFile[]) => void;
+    handleErrors: (errors: FileError[]) => void;
+    render(): JSX.Element;
+}
+export {};