@atlaskit/media-picker 65.0.0 → 65.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/media-picker
 
+## 65.1.0
+
+### Minor Changes
+
+- [`4a6a812a4d2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4a6a812a4d2) - [ux] Add a user friendly error message when uploading a file that is over the file size limit
+
+### Patch Changes
+
+- [`1bd483e036d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1bd483e036d) - fix missing fallback IntlProvider for UploadRejectionFlagGroup
+- Updated dependencies
+
+## 65.0.1
+
+### Patch Changes
+
+- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+- Updated dependencies
+
 ## 65.0.0
 
 ### Minor Changes

package/dist/cjs/components/browser/browser.js

@@ -18,6 +18,7 @@ var _mediaCommon = require("@atlaskit/media-common");
 var _uuidValidate = _interopRequireDefault(require("uuid-validate"));
 var _localUploadReact = require("../localUploadReact");
 var _analytics = require("../../util/analytics");
+var _UploadRejectionFlagGroup = _interopRequireDefault(require("../uploadRejectionFlagGroup/UploadRejectionFlagGroup"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var defaultConfig = {
@@ -138,7 +139,10 @@ var BrowserBase = /*#__PURE__*/function (_LocalUploadComponent) {
 
         accept: fileExtensions,
         onChange: this.onFilePicked
-      }), children ? children(this.browse) : null);
+      }), children ? children(this.browse) : null, /*#__PURE__*/_react.default.createElement(_UploadRejectionFlagGroup.default, {
+        flagData: this.state.uploadRejectionFlags,
+        onFlagDismissed: this.dismissUploadRejectionFlag
+      }));
     }
   }]);
   return BrowserBase;

package/dist/cjs/components/clipboard/clipboard.js

@@ -11,12 +11,14 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _mediaCommon = require("@atlaskit/media-common");
 var _localUploadReact = require("../localUploadReact");
 var _types = require("../../service/types");
 var _analytics = require("../../util/analytics");
 var _appendTimestamp = require("../../util/appendTimestamp");
+var _UploadRejectionFlagGroup = _interopRequireDefault(require("../uploadRejectionFlagGroup/UploadRejectionFlagGroup"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var getFilesFromClipboard = function getFilesFromClipboard(files) {
@@ -173,7 +175,10 @@ var ClipboardBase = /*#__PURE__*/function (_LocalUploadComponent) {
   }, {
     key: "render",
     value: function render() {
-      return null;
+      return /*#__PURE__*/_react.default.createElement(_UploadRejectionFlagGroup.default, {
+        flagData: this.state.uploadRejectionFlags,
+        onFlagDismissed: this.dismissUploadRejectionFlag
+      });
     }
   }]);
   return ClipboardBase;

package/dist/cjs/components/dropzone/dropzone.js

@@ -14,12 +14,14 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _mediaCommon = require("@atlaskit/media-common");
 var _browser = require("@atlaskit/media-ui/browser");
 var _flatFiles = require("flat-files");
 var _localUploadReact = require("../localUploadReact");
 var _analytics = require("../../util/analytics");
+var _UploadRejectionFlagGroup = _interopRequireDefault(require("../uploadRejectionFlagGroup/UploadRejectionFlagGroup"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function dragContainsFiles(event) {
@@ -315,7 +317,10 @@ var DropzoneBase = /*#__PURE__*/function (_LocalUploadComponent) {
   }, {
     key: "render",
     value: function render() {
-      return null;
+      return /*#__PURE__*/_react.default.createElement(_UploadRejectionFlagGroup.default, {
+        flagData: this.state.uploadRejectionFlags,
+        onFlagDismissed: this.dismissUploadRejectionFlag
+      });
     }
   }]);
   return DropzoneBase;

package/dist/cjs/components/localUploadReact.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.LocalUploadComponentReact = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -32,6 +33,19 @@ var LocalUploadComponentReact = /*#__PURE__*/function (_Component) {
     (0, _classCallCheck2.default)(this, LocalUploadComponentReact);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "uploadComponent", new _component.UploadComponent());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      uploadRejectionFlags: []
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "addUploadRejectionFlag", function (rejectionData) {
+      _this.setState({
+        uploadRejectionFlags: [].concat((0, _toConsumableArray2.default)(_this.state.uploadRejectionFlags), [rejectionData])
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "dismissUploadRejectionFlag", function () {
+      _this.setState({
+        uploadRejectionFlags: _this.state.uploadRejectionFlags.slice(1)
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireCommencedEvent", function (payload) {
       var files = payload.files,
         traceContext = payload.traceContext;
@@ -175,7 +189,8 @@ var LocalUploadComponentReact = /*#__PURE__*/function (_Component) {
       onUploadsStart = _this$props.onUploadsStart,
       onPreviewUpdate = _this$props.onPreviewUpdate,
       onEnd = _this$props.onEnd,
-      onError = _this$props.onError;
+      onError = _this$props.onError,
+      onFileRejection = _this$props.onFileRejection;
     var tenantUploadParams = config.uploadParams;
     var _config$shouldCopyFil = config.shouldCopyFileToRecents,
       shouldCopyFileToRecents = _config$shouldCopyFil === void 0 ? true : _config$shouldCopyFil;
@@ -199,6 +214,11 @@ var LocalUploadComponentReact = /*#__PURE__*/function (_Component) {
     _this.uploadService.on('file-preview-update', _this.onFilePreviewUpdate);
     _this.uploadService.on('file-converting', _this.onFileConverting);
     _this.uploadService.on('file-upload-error', _this.onUploadError);
+    if (onFileRejection) {
+      _this.uploadService.onFileRejection(onFileRejection);
+    } else {
+      _this.uploadService.onFileRejection(_this.addUploadRejectionFlag);
+    }
     return _this;
   }
   (0, _createClass2.default)(LocalUploadComponentReact, [{

package/dist/cjs/components/uploadRejectionFlagGroup/UploadRejectionFlagGroup.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _flag = require("@atlaskit/flag");
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
+var _colors = require("@atlaskit/theme/colors");
+var _messages = require("./messages");
+var _reactIntlNext = require("react-intl-next");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var defaultOptions = {
+  style: 'unit',
+  unitDisplay: 'short',
+  minimumFractionDigits: 2
+};
+var fileSizeFormatters = {
+  kilobyte: new Intl.NumberFormat('en', _objectSpread(_objectSpread({}, defaultOptions), {}, {
+    unit: 'kilobyte'
+  })),
+  megabyte: new Intl.NumberFormat('en', _objectSpread(_objectSpread({}, defaultOptions), {}, {
+    unit: 'megabyte'
+  })),
+  gigabyte: new Intl.NumberFormat('en', _objectSpread(_objectSpread({}, defaultOptions), {}, {
+    unit: 'gigabyte'
+  }))
+};
+var formatFileSize = function formatFileSize(size) {
+  var formattedSize;
+  if (size < 1000000) {
+    formattedSize = size / 1000;
+    return fileSizeFormatters.kilobyte.format(formattedSize);
+  } else if (size >= 1000000 && size < 1000000000) {
+    formattedSize = size / 1000000;
+    return fileSizeFormatters.megabyte.format(formattedSize);
+  } else {
+    formattedSize = size / 1000000000;
+    return fileSizeFormatters.gigabyte.format(formattedSize);
+  }
+};
+var FlagGroupContent = function FlagGroupContent(_ref) {
+  var flagData = _ref.flagData,
+    onFlagDismissed = _ref.onFlagDismissed;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return /*#__PURE__*/_react.default.createElement(_flag.FlagGroup, {
+    onDismissed: onFlagDismissed
+  }, flagData.map(function (data, i) {
+    return /*#__PURE__*/_react.default.createElement(_flag.AutoDismissFlag, {
+      id: i,
+      icon: /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
+        primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
+        label: "Fail",
+        size: "medium"
+      }),
+      key: i,
+      title: intl.formatMessage(_messages.uploadRejectionFlagMessages.title),
+      description: intl.formatMessage(_messages.uploadRejectionFlagMessages.description, {
+        fileName: data.fileName,
+        limit: formatFileSize(data.limit)
+      })
+    });
+  }));
+};
+var UploadRejectionFlagGroup = function UploadRejectionFlagGroup(_ref2) {
+  var flagData = _ref2.flagData,
+    onFlagDismissed = _ref2.onFlagDismissed,
+    intl = _ref2.intl;
+  return intl ? /*#__PURE__*/_react.default.createElement(FlagGroupContent, {
+    flagData: flagData,
+    onFlagDismissed: onFlagDismissed
+  }) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+    locale: "en"
+  }, /*#__PURE__*/_react.default.createElement(FlagGroupContent, {
+    flagData: flagData,
+    onFlagDismissed: onFlagDismissed
+  }));
+};
+var _default = (0, _reactIntlNext.injectIntl)(UploadRejectionFlagGroup, {
+  enforceContext: false
+});
+exports.default = _default;

package/dist/cjs/components/uploadRejectionFlagGroup/messages.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uploadRejectionFlagMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var uploadRejectionFlagMessages = (0, _reactIntlNext.defineMessages)({
+  title: {
+    id: 'fabric.media.uploadRejectionFlagTitle',
+    defaultMessage: 'Your file failed to upload',
+    description: 'a title for a flag that describes that a file failed to upload'
+  },
+  description: {
+    id: 'fabric.media.uploadRejectionFlagDescription',
+    defaultMessage: '{fileName} is too big to upload. Files must be less than {limit}.',
+    description: 'a description for a flag that details why a file failed to upload'
+  }
+});
+exports.uploadRejectionFlagMessages = uploadRejectionFlagMessages;

package/dist/cjs/service/uploadServiceImpl.js

@@ -159,7 +159,7 @@ var UploadServiceImpl = /*#__PURE__*/function () {
               caughtError = _context2.t0;
             case 21:
               cancellableFileUploads = files.map(function (_ref2, i) {
-                var _touchedFiles, _touchedFiles2;
+                var _touchedFiles, _touchedFiles2, _caughtError$metadata;
                 var file = _ref2.file,
                   source = _ref2.source;
                 var _touchFileDescriptors = touchFileDescriptors[i],
@@ -175,7 +175,7 @@ var UploadServiceImpl = /*#__PURE__*/function () {
                   if (_this2.fileRejectionHandler) {
                     _this2.fileRejectionHandler({
                       reason: 'fileSizeLimitExceeded',
-                      file: file,
+                      fileName: file.name,
                       limit: rejectedFile.error.limit
                     });
                   }
@@ -185,7 +185,7 @@ var UploadServiceImpl = /*#__PURE__*/function () {
                   return touchedFile.fileId === id;
                 });
                 var deferredUploadId;
-                var isIdConflictError = caughtError && caughtError instanceof _mediaClient.RequestError && caughtError.metadata && caughtError.metadata.statusCode === 409;
+                var isIdConflictError = caughtError instanceof _mediaClient.RequestError && ((_caughtError$metadata = caughtError.metadata) === null || _caughtError$metadata === void 0 ? void 0 : _caughtError$metadata.statusCode) === 409;
                 if (touchedFile) {
                   deferredUploadId = Promise.resolve(touchedFile.uploadId);
                 } else if (isIdConflictError) {

package/dist/cjs/util/analytics.js

@@ -9,7 +9,7 @@ var _mediaClient = require("@atlaskit/media-client");
 // Component name will be prefixed with "media-picker-" in logs. Check ufoExperiences in utils files
 
 var packageName = "@atlaskit/media-picker";
-var packageVersion = "65.0.0";
+var packageVersion = "65.1.0";
 function getPackageAttributes(componentName) {
   return {
     packageName: packageName,

package/dist/cjs/util/ufoExperiences.js

@@ -12,7 +12,7 @@ var _mediaClient = require("@atlaskit/media-client");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var packageName = "@atlaskit/media-picker";
-var packageVersion = "65.0.0";
+var packageVersion = "65.1.0";
 var ufoExperience;
 var initExperience = function initExperience(id, componentName) {
   if (!ufoExperience) {

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/media-picker",
-	"version": "65.0.0"
+	"version": "65.1.0"
 }

package/dist/es2019/components/browser/browser.js

@@ -5,6 +5,7 @@ import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import isValidId from 'uuid-validate';
 import { LocalUploadComponentReact } from '../localUploadReact';
 import { getPackageAttributes } from '../../util/analytics';
+import UploadRejectionFlagGroup from '../uploadRejectionFlagGroup/UploadRejectionFlagGroup';
 const defaultConfig = {
   uploadParams: {}
 };
@@ -130,7 +131,10 @@ export class BrowserBase extends LocalUploadComponentReact {
 
       accept: fileExtensions,
       onChange: this.onFilePicked
-    }), children ? children(this.browse) : null);
+    }), children ? children(this.browse) : null, /*#__PURE__*/React.createElement(UploadRejectionFlagGroup, {
+      flagData: this.state.uploadRejectionFlags,
+      onFlagDismissed: this.dismissUploadRejectionFlag
+    }));
   }
 }
 _defineProperty(BrowserBase, "defaultProps", {

package/dist/es2019/components/clipboard/clipboard.js

@@ -1,10 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ANALYTICS_MEDIA_CHANNEL, withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { LocalUploadComponentReact } from '../localUploadReact';
 import { LocalFileSource } from '../../service/types';
 import { getPackageAttributes } from '../../util/analytics';
 import { appendTimestamp } from '../../util/appendTimestamp';
+import UploadRejectionFlagGroup from '../uploadRejectionFlagGroup/UploadRejectionFlagGroup';
 export const getFilesFromClipboard = files => {
   return Array.from(files).map(file => {
     if (file.type.indexOf('image/') === 0) {
@@ -134,7 +136,10 @@ export class ClipboardBase extends LocalUploadComponentReact {
     this.clipboard.deactivate();
   }
   render() {
-    return null;
+    return /*#__PURE__*/React.createElement(UploadRejectionFlagGroup, {
+      flagData: this.state.uploadRejectionFlags,
+      onFlagDismissed: this.dismissUploadRejectionFlag
+    });
   }
 }
 _defineProperty(ClipboardBase, "defaultProps", {

package/dist/es2019/components/dropzone/dropzone.js

@@ -1,10 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ANALYTICS_MEDIA_CHANNEL, getMediaFeatureFlag, withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { isWebkitSupported } from '@atlaskit/media-ui/browser';
 import { getFilesFromItems, getFilesFromFileSystemEntries } from 'flat-files';
 import { LocalUploadComponentReact } from '../localUploadReact';
 import { getPackageAttributes } from '../../util/analytics';
+import UploadRejectionFlagGroup from '../uploadRejectionFlagGroup/UploadRejectionFlagGroup';
 function dragContainsFiles(event) {
   if (!event.dataTransfer) {
     return false;
@@ -252,7 +254,10 @@ export class DropzoneBase extends LocalUploadComponentReact {
     }
   }
   render() {
-    return null;
+    return /*#__PURE__*/React.createElement(UploadRejectionFlagGroup, {
+      flagData: this.state.uploadRejectionFlags,
+      onFlagDismissed: this.dismissUploadRejectionFlag
+    });
   }
 }
 export default DropzoneBase;

package/dist/es2019/components/localUploadReact.js

@@ -11,6 +11,19 @@ export class LocalUploadComponentReact extends Component {
   constructor(props, componentName) {
     super(props);
     _defineProperty(this, "uploadComponent", new UploadComponent());
+    _defineProperty(this, "state", {
+      uploadRejectionFlags: []
+    });
+    _defineProperty(this, "addUploadRejectionFlag", rejectionData => {
+      this.setState({
+        uploadRejectionFlags: [...this.state.uploadRejectionFlags, rejectionData]
+      });
+    });
+    _defineProperty(this, "dismissUploadRejectionFlag", () => {
+      this.setState({
+        uploadRejectionFlags: this.state.uploadRejectionFlags.slice(1)
+      });
+    });
     _defineProperty(this, "fireCommencedEvent", payload => {
       const {
         files,
@@ -161,7 +174,8 @@ export class LocalUploadComponentReact extends Component {
       onUploadsStart,
       onPreviewUpdate,
       onEnd,
-      onError
+      onError,
+      onFileRejection
     } = this.props;
     const tenantUploadParams = config.uploadParams;
     const {
@@ -187,6 +201,11 @@ export class LocalUploadComponentReact extends Component {
     this.uploadService.on('file-preview-update', this.onFilePreviewUpdate);
     this.uploadService.on('file-converting', this.onFileConverting);
     this.uploadService.on('file-upload-error', this.onUploadError);
+    if (onFileRejection) {
+      this.uploadService.onFileRejection(onFileRejection);
+    } else {
+      this.uploadService.onFileRejection(this.addUploadRejectionFlag);
+    }
   }
   setUploadParams(uploadParams) {
     this.uploadService.setUploadParams(uploadParams);

package/dist/es2019/components/uploadRejectionFlagGroup/UploadRejectionFlagGroup.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { AutoDismissFlag, FlagGroup } from '@atlaskit/flag';
+import FailIcon from '@atlaskit/icon/glyph/cross-circle';
+import { R300 } from '@atlaskit/theme/colors';
+import { uploadRejectionFlagMessages } from './messages';
+import { injectIntl, IntlProvider, useIntl } from 'react-intl-next';
+const defaultOptions = {
+  style: 'unit',
+  unitDisplay: 'short',
+  minimumFractionDigits: 2
+};
+const fileSizeFormatters = {
+  kilobyte: new Intl.NumberFormat('en', {
+    ...defaultOptions,
+    unit: 'kilobyte'
+  }),
+  megabyte: new Intl.NumberFormat('en', {
+    ...defaultOptions,
+    unit: 'megabyte'
+  }),
+  gigabyte: new Intl.NumberFormat('en', {
+    ...defaultOptions,
+    unit: 'gigabyte'
+  })
+};
+const formatFileSize = size => {
+  let formattedSize;
+  if (size < 1_000_000) {
+    formattedSize = size / 1_000;
+    return fileSizeFormatters.kilobyte.format(formattedSize);
+  } else if (size >= 1_000_000 && size < 1_000_000_000) {
+    formattedSize = size / 1_000_000;
+    return fileSizeFormatters.megabyte.format(formattedSize);
+  } else {
+    formattedSize = size / 1_000_000_000;
+    return fileSizeFormatters.gigabyte.format(formattedSize);
+  }
+};
+const FlagGroupContent = ({
+  flagData,
+  onFlagDismissed
+}) => {
+  const intl = useIntl();
+  return /*#__PURE__*/React.createElement(FlagGroup, {
+    onDismissed: onFlagDismissed
+  }, flagData.map((data, i) => /*#__PURE__*/React.createElement(AutoDismissFlag, {
+    id: i,
+    icon: /*#__PURE__*/React.createElement(FailIcon, {
+      primaryColor: `var(--ds-icon-danger, ${R300})`,
+      label: "Fail",
+      size: "medium"
+    }),
+    key: i,
+    title: intl.formatMessage(uploadRejectionFlagMessages.title),
+    description: intl.formatMessage(uploadRejectionFlagMessages.description, {
+      fileName: data.fileName,
+      limit: formatFileSize(data.limit)
+    })
+  })));
+};
+const UploadRejectionFlagGroup = ({
+  flagData,
+  onFlagDismissed,
+  intl
+}) => {
+  return intl ? /*#__PURE__*/React.createElement(FlagGroupContent, {
+    flagData: flagData,
+    onFlagDismissed: onFlagDismissed
+  }) : /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: "en"
+  }, /*#__PURE__*/React.createElement(FlagGroupContent, {
+    flagData: flagData,
+    onFlagDismissed: onFlagDismissed
+  }));
+};
+export default injectIntl(UploadRejectionFlagGroup, {
+  enforceContext: false
+});

package/dist/es2019/components/uploadRejectionFlagGroup/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export const uploadRejectionFlagMessages = defineMessages({
+  title: {
+    id: 'fabric.media.uploadRejectionFlagTitle',
+    defaultMessage: 'Your file failed to upload',
+    description: 'a title for a flag that describes that a file failed to upload'
+  },
+  description: {
+    id: 'fabric.media.uploadRejectionFlagDescription',
+    defaultMessage: '{fileName} is too big to upload. Files must be less than {limit}.',
+    description: 'a description for a flag that details why a file failed to upload'
+  }
+});

package/dist/es2019/service/uploadServiceImpl.js

@@ -118,7 +118,7 @@ export class UploadServiceImpl {
       file,
       source
     }, i) => {
-      var _touchedFiles, _touchedFiles2;
+      var _touchedFiles, _touchedFiles2, _caughtError$metadata;
       const {
         fileId: id,
         occurrenceKey
@@ -132,7 +132,7 @@ export class UploadServiceImpl {
         if (this.fileRejectionHandler) {
           this.fileRejectionHandler({
             reason: 'fileSizeLimitExceeded',
-            file,
+            fileName: file.name,
             limit: rejectedFile.error.limit
           });
         }
@@ -140,7 +140,7 @@ export class UploadServiceImpl {
       }
       const touchedFile = (_touchedFiles2 = touchedFiles) === null || _touchedFiles2 === void 0 ? void 0 : _touchedFiles2.created.find(touchedFile => touchedFile.fileId === id);
       let deferredUploadId;
-      const isIdConflictError = caughtError && caughtError instanceof RequestError && caughtError.metadata && caughtError.metadata.statusCode === 409;
+      const isIdConflictError = caughtError instanceof RequestError && ((_caughtError$metadata = caughtError.metadata) === null || _caughtError$metadata === void 0 ? void 0 : _caughtError$metadata.statusCode) === 409;
       if (touchedFile) {
         deferredUploadId = Promise.resolve(touchedFile.uploadId);
       } else if (isIdConflictError) {

package/dist/es2019/util/analytics.js

@@ -3,7 +3,7 @@ import { isRequestError } from '@atlaskit/media-client';
 // Component name will be prefixed with "media-picker-" in logs. Check ufoExperiences in utils files
 
 const packageName = "@atlaskit/media-picker";
-const packageVersion = "65.0.0";
+const packageVersion = "65.1.0";
 export function getPackageAttributes(componentName) {
   return {
     packageName,

package/dist/es2019/util/ufoExperiences.js

@@ -2,7 +2,7 @@ import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } fro
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-picker";
-const packageVersion = "65.0.0";
+const packageVersion = "65.1.0";
 let ufoExperience;
 const initExperience = (id, componentName) => {
   if (!ufoExperience) {

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/media-picker",
-	"version": "65.0.0"
+	"version": "65.1.0"
 }

package/dist/esm/components/browser/browser.js

@@ -13,6 +13,7 @@ import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import isValidId from 'uuid-validate';
 import { LocalUploadComponentReact } from '../localUploadReact';
 import { getPackageAttributes } from '../../util/analytics';
+import UploadRejectionFlagGroup from '../uploadRejectionFlagGroup/UploadRejectionFlagGroup';
 var defaultConfig = {
   uploadParams: {}
 };
@@ -131,7 +132,10 @@ export var BrowserBase = /*#__PURE__*/function (_LocalUploadComponent) {
 
         accept: fileExtensions,
         onChange: this.onFilePicked
-      }), children ? children(this.browse) : null);
+      }), children ? children(this.browse) : null, /*#__PURE__*/React.createElement(UploadRejectionFlagGroup, {
+        flagData: this.state.uploadRejectionFlags,
+        onFlagDismissed: this.dismissUploadRejectionFlag
+      }));
     }
   }]);
   return BrowserBase;

package/dist/esm/components/clipboard/clipboard.js

@@ -6,12 +6,14 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ANALYTICS_MEDIA_CHANNEL, withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { LocalUploadComponentReact } from '../localUploadReact';
 import { LocalFileSource } from '../../service/types';
 import { getPackageAttributes } from '../../util/analytics';
 import { appendTimestamp } from '../../util/appendTimestamp';
+import UploadRejectionFlagGroup from '../uploadRejectionFlagGroup/UploadRejectionFlagGroup';
 export var getFilesFromClipboard = function getFilesFromClipboard(files) {
   return Array.from(files).map(function (file) {
     if (file.type.indexOf('image/') === 0) {
@@ -165,7 +167,10 @@ export var ClipboardBase = /*#__PURE__*/function (_LocalUploadComponent) {
   }, {
     key: "render",
     value: function render() {
-      return null;
+      return /*#__PURE__*/React.createElement(UploadRejectionFlagGroup, {
+        flagData: this.state.uploadRejectionFlags,
+        onFlagDismissed: this.dismissUploadRejectionFlag
+      });
     }
   }]);
   return ClipboardBase;