ImageEditor now uses Cropper.Js / CamanJS libs (instead of tui-image-editor)

.gitignore

@@ -11,5 +11,6 @@ coverage
 yarn-error.log
 dist/
 build/
+packages/webiny-ui/.cache/
 packages/demo-api/static/
 .changelog

packages/webiny-app-admin/src/views/Users/AvatarImage.js

@@ -1,10 +1,10 @@
 // @flow
 import * as React from "react";
-import { withFileUpload } from "webiny-app/components";
+import { withImageUpload } from "webiny-app/components";
 import { SingleImageUpload } from "webiny-ui/ImageUpload";
 
 const AvatarImage = props => {
     return <SingleImageUpload {...props} />;
 };
 
-export default withFileUpload()(AvatarImage);
+export default withImageUpload()(AvatarImage);

packages/webiny-app/src/components/index.js

@@ -2,6 +2,7 @@
 export * from "./withRouter";
 export { withDataList } from "./withDataList";
 export { withFileUpload } from "./withFileUpload";
+export { withImageUpload } from "./withImageUpload";
 export { withConfig } from "./withConfig";
 export { withUi } from "./withUi";
 export type { WithDataListProps, SearchParams, WithDataListParams } from "./withDataList";

packages/webiny-app/src/components/withImageUpload.js

@@ -0,0 +1,57 @@
+// @flow
+import * as React from "react";
+import { compose, withProps } from "recompose";
+import { withConfig } from "webiny-app/components";
+import { withFileUpload } from "./withFileUpload";
+
+type WithImageUploadOptions = {
+    multiple?: boolean
+};
+
+const fetchImage = file => {
+    return new Promise(resolve => {
+        const image = new window.Image();
+        image.onload = async () => {
+            resolve();
+        };
+        image.src = file.src;
+    });
+};
+
+export const withImageUpload = (options: WithImageUploadOptions = {}): Function => {
+    return (BaseComponent: typeof React.Component) => {
+        return compose(
+            withConfig(),
+            withProps(props => {
+                return {
+                    ...props,
+                    onChange: async file => {
+                        const { onChange } = props;
+                        if (!onChange) {
+                            return;
+                        }
+
+                        // Multiple images.
+                        if (options.multiple) {
+                            if (Array.isArray(file)) {
+                                for (let index = 0; index < file.length; index++) {
+                                    let current = file[index];
+                                    current.src.startsWith("http") && (await fetchImage(current));
+                                }
+                                await onChange(file);
+                            }
+                            return;
+                        }
+
+                        // Single image.
+                        if (file && file.src.startsWith("http")) {
+                            await fetchImage(file);
+                        }
+                        await onChange(file);
+                    }
+                };
+            }),
+            withFileUpload(options)
+        )(BaseComponent);
+    };
+};

packages/webiny-ui/package.json

@@ -37,12 +37,13 @@
     "@rmwc/typography": "^2.0.0",
     "brace": "^0.11.1",
     "bytes": "^3.0.0",
+    "caman": "^4.1.2",
     "classnames": "^2.2.6",
-    "cropperjs": "^1.4.1",
+    "cropperjs": "^1.4.3",
     "downshift": "^2.1.5",
     "emotion": "^9.2.6",
-    "install": "^0.12.1",
     "keycode": "^2.2.0",
+    "load-script": "^1.0.0",
     "material-components-web": "^0.39.1",
     "nprogress": "^0.2.0",
     "nuka-carousel": "^4.3.9",
@@ -53,7 +54,6 @@
     "react-emotion": "^9.2.6",
     "react-image": "^1.5.1",
     "react-loading-skeleton": "^0.5.0",
-    "tui-image-editor": "^3.2.0",
     "webiny-form": "0.0.0-semantically-released",
     "webiny-storybook-utils": "0.0.0-semantically-released"
   },