@bigbinary/neeto-image-uploader-frontend 1.4.11 → 1.4.13

package/app/javascript/src/translations/en.json

@@ -47,7 +47,7 @@
       "genericError": "Something went wrong!.",
       "fileSizeError": "File size is too large",
       "fileTypeError": "File type is not supported",
-      "maxAllowedSize": " Maximum allowed size is {{size}} MB",
+      "allowedConfig": " Only {{fileTypes}} files are supported. Maximum allowed size {{size}} MB.",
       "uploadedImage": "Uploaded Image"
     }
   }

package/dist/index.cjs.js

@@ -2664,8 +2664,8 @@ var directUploadsApi = {
 };
 
 var QUERY_KEYS = {
-  ASSETS_LSIT: "assets-list",
-  UNSPLASH_LIST: "unsplash-list"
+  ASSETS_LIST: "neeto-image-uploader-assets-list",
+  UNSPLASH_LIST: "neeto-image-uploader-unsplash-list"
 };
 var ASSETS_STALE_TIME = 900000; // 15 mins
 
@@ -4957,12 +4957,11 @@ var assetsApi = {
   fetch: fetch
 };
 
-var ASSETS_LIST = QUERY_KEYS.ASSETS_LIST;
 var useFetchAssets = function useFetchAssets(_ref) {
   var search = _ref.search,
     url = _ref.url;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return reactQuery.useQuery([ASSETS_LIST, search], function () {
+  return reactQuery.useQuery([QUERY_KEYS.ASSETS_LIST, search], function () {
     return assetsApi.fetch({
       search: search,
       url: url
@@ -6193,6 +6192,10 @@ var Modal = function Modal(_ref) {
   })), /*#__PURE__*/React__default["default"].createElement("input", getInputProps()));
 };
 
+var getAllowedTypes = function getAllowedTypes(uploadConfig) {
+  return ramda.pipe(ramda.values, ramda.flatten, ramda.join(", "))(uploadConfig.allowedImageTypes);
+};
+
 var ImageUpload = function ImageUpload(_ref) {
   var getRootProps = _ref.getRootProps,
     getInputProps = _ref.getInputProps,
@@ -6212,7 +6215,8 @@ var ImageUpload = function ImageUpload(_ref) {
     i18nKey: "neetoImageUploader.imageUpload.dragAndDropOrBrowseFile",
     components: {
       span: /*#__PURE__*/React__default["default"].createElement("span", {
-        className: "neeto-ui-text-primary-500"
+        className: "neeto-ui-text-primary-500",
+        "data-cy": "upload-button"
       })
     }
   })), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
@@ -6229,13 +6233,16 @@ var ImageUpload = function ImageUpload(_ref) {
         className: "neeto-ui-text-primary-500"
       })
     }
-  })), /*#__PURE__*/React__default["default"].createElement("input", getInputProps()), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  })), /*#__PURE__*/React__default["default"].createElement("input", _extends$1({}, getInputProps(), {
+    "data-cy": "image-upload-input"
+  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     className: "text-center leading-4",
     style: "body3"
   }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-    i18nKey: "neetoImageUploader.imageUpload.maxAllowedSize",
+    i18nKey: "neetoImageUploader.imageUpload.allowedConfig",
     values: {
-      size: uploadConfig === null || uploadConfig === void 0 ? void 0 : uploadConfig.maxImageSize
+      size: uploadConfig === null || uploadConfig === void 0 ? void 0 : uploadConfig.maxImageSize,
+      fileTypes: getAllowedTypes(uploadConfig)
     }
   }))));
 };
@@ -6371,8 +6378,7 @@ var ImageUploader = function ImageUploader(_ref) {
     }),
     getRootProps = _useDropzoneWithValid.getRootProps,
     getInputProps = _useDropzoneWithValid.getInputProps,
-    uploadProgress = _useDropzoneWithValid.uploadProgress,
-    inputRef = _useDropzoneWithValid.inputRef;
+    uploadProgress = _useDropzoneWithValid.uploadProgress;
   if (isUploading) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: className
@@ -6397,15 +6403,6 @@ var ImageUploader = function ImageUploader(_ref) {
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-stretch justify-center gap-2"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    label: t("neetoImageUploader.imageUpload.change"),
-    style: "link",
-    onClick: function onClick() {
-      var _inputRef$current;
-      return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
-    }
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-bg-gray-300 w-px"
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
     label: t("neetoImageUploader.imageUpload.assets"),
     style: "link",
     onClick: setIsAssetLibraryOpen
@@ -6413,6 +6410,7 @@ var ImageUploader = function ImageUploader(_ref) {
     className: "neeto-ui-bg-gray-300 w-px"
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
     className: "bg-transparent p-0",
+    "data-cy": "attachment-remove-button",
     label: t("neetoImageUploader.imageUpload.delete"),
     style: "danger-text",
     onClick: handleDelete