@atlaskit/media-picker 66.3.2 → 66.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-picker
 
+## 66.4.1
+
+### Patch Changes
+
+- [#88717](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88717) [`d92770eae702`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d92770eae702) - Adding internal eslint opt outs for a new rule `@atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop`.
+
+## 66.4.0
+
+### Minor Changes
+
+- [#83551](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83551) [`332beba24a19`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/332beba24a19) - [ux] Displays an error message when an empty file is uploaded
+
 ## 66.3.2
 
 ### Patch Changes

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

@@ -18,7 +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"));
+var _ErrorFlagGroup = _interopRequireDefault(require("../errorFlagGroup/ErrorFlagGroup"));
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var defaultConfig = {
@@ -137,9 +137,9 @@ var BrowserBase = exports.BrowserBase = /*#__PURE__*/function (_LocalUploadCompo
         multiple: replaceFileId ? false : multiple /* if the consumer passes the fileId we must work in single selection mode */,
         accept: fileExtensions,
         onChange: this.onFilePicked
-      }), children ? children(this.browse) : null, /*#__PURE__*/_react.default.createElement(_UploadRejectionFlagGroup.default, {
-        flagData: this.state.uploadRejectionFlags,
-        onFlagDismissed: this.dismissUploadRejectionFlag
+      }), children ? children(this.browse) : null, /*#__PURE__*/_react.default.createElement(_ErrorFlagGroup.default, {
+        flagData: this.state.errorFlags,
+        onFlagDismissed: this.dismissErrorFlag
       }));
     }
   }]);

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

@@ -18,7 +18,7 @@ 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"));
+var _ErrorFlagGroup = _interopRequireDefault(require("../errorFlagGroup/ErrorFlagGroup"));
 var _class;
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -214,9 +214,9 @@ var ClipboardBase = exports.ClipboardBase = /*#__PURE__*/function (_LocalUploadC
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_UploadRejectionFlagGroup.default, {
-        flagData: this.state.uploadRejectionFlags,
-        onFlagDismissed: this.dismissUploadRejectionFlag
+      return /*#__PURE__*/_react.default.createElement(_ErrorFlagGroup.default, {
+        flagData: this.state.errorFlags,
+        onFlagDismissed: this.dismissErrorFlag
       });
     }
   }]);

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

@@ -21,7 +21,7 @@ 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"));
+var _ErrorFlagGroup = _interopRequireDefault(require("../errorFlagGroup/ErrorFlagGroup"));
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function dragContainsFiles(event) {
@@ -42,9 +42,12 @@ var DropzoneBase = exports.DropzoneBase = /*#__PURE__*/function (_LocalUploadCom
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "uiActive", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "addContainerListeners", function () {
       var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.getContainer();
+      // TODO: migrate this file to Pragmatic drag and drop
+      /* eslint-disable @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop */
       container.addEventListener('dragover', _this.onDragOver, false);
       container.addEventListener('dragleave', _this.onDragLeave, false);
       container.addEventListener('drop', _this.onFileDropped);
+      /* eslint-enable @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop */
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "removeContainerListeners", function () {
       var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.getContainer();
@@ -317,9 +320,9 @@ var DropzoneBase = exports.DropzoneBase = /*#__PURE__*/function (_LocalUploadCom
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_UploadRejectionFlagGroup.default, {
-        flagData: this.state.uploadRejectionFlags,
-        onFlagDismissed: this.dismissUploadRejectionFlag
+      return /*#__PURE__*/_react.default.createElement(_ErrorFlagGroup.default, {
+        flagData: this.state.errorFlags,
+        onFlagDismissed: this.dismissErrorFlag
       });
     }
   }]);

package/dist/cjs/components/{uploadRejectionFlagGroup/UploadRejectionFlagGroup.js → errorFlagGroup/ErrorFlagGroup.js}

@@ -58,15 +58,17 @@ var FlagGroupContent = function FlagGroupContent(_ref) {
         size: "medium"
       }),
       key: i,
-      title: intl.formatMessage(_messages.uploadRejectionFlagMessages.title),
-      description: intl.formatMessage(_messages.uploadRejectionFlagMessages.description, {
+      title: intl.formatMessage(_messages.errorFlagMessages.errorTitle),
+      description: data.reason === 'fileEmpty' ? intl.formatMessage(_messages.errorFlagMessages.fileEmptyDescription, {
+        fileName: data.fileName
+      }) : intl.formatMessage(_messages.errorFlagMessages.uploadRejectionDescription, {
         fileName: data.fileName,
         limit: formatFileSize(data.limit)
       })
     });
   }));
 };
-var UploadRejectionFlagGroup = function UploadRejectionFlagGroup(_ref2) {
+var ErrorFlagGroup = function ErrorFlagGroup(_ref2) {
   var flagData = _ref2.flagData,
     onFlagDismissed = _ref2.onFlagDismissed,
     intl = _ref2.intl;
@@ -80,6 +82,6 @@ var UploadRejectionFlagGroup = function UploadRejectionFlagGroup(_ref2) {
     onFlagDismissed: onFlagDismissed
   }));
 };
-var _default = exports.default = (0, _reactIntlNext.injectIntl)(UploadRejectionFlagGroup, {
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(ErrorFlagGroup, {
   enforceContext: false
 });

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.errorFlagMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var errorFlagMessages = exports.errorFlagMessages = (0, _reactIntlNext.defineMessages)({
+  errorTitle: {
+    id: 'fabric.media.errorFlagTitle',
+    defaultMessage: 'Your file failed to upload',
+    description: 'a title for a flag that describes that a file failed to upload'
+  },
+  uploadRejectionDescription: {
+    id: 'fabric.media.uploadRejectionFlagDescription',
+    defaultMessage: '{fileName} is too big to upload. Files must be less than {limit}.',
+    description: 'a description for a flag detailing that a file was too large to upload'
+  },
+  fileEmptyDescription: {
+    id: 'fabric.media.fileEmptyFlagDescription',
+    defaultMessage: 'The file you selected was empty. Please select another file and try again.',
+    description: 'a description for a flag detailing that a file was zero bytes'
+  }
+});

package/dist/cjs/components/localUploadReact.js

@@ -34,16 +34,16 @@ var LocalUploadComponentReact = exports.LocalUploadComponentReact = /*#__PURE__*
     _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: []
+      errorFlags: []
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "addUploadRejectionFlag", function (rejectionData) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "addErrorFlag", function (flagData) {
       _this.setState({
-        uploadRejectionFlags: [].concat((0, _toConsumableArray2.default)(_this.state.uploadRejectionFlags), [rejectionData])
+        errorFlags: [].concat((0, _toConsumableArray2.default)(_this.state.errorFlags), [flagData])
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "dismissUploadRejectionFlag", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "dismissErrorFlag", function () {
       _this.setState({
-        uploadRejectionFlags: _this.state.uploadRejectionFlags.slice(1)
+        errorFlags: _this.state.errorFlags.slice(1)
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireCommencedEvent", function (payload) {
@@ -213,16 +213,17 @@ var LocalUploadComponentReact = exports.LocalUploadComponentReact = /*#__PURE__*
     _this.uploadService.on('file-preview-update', _this.onFilePreviewUpdate);
     _this.uploadService.on('file-converting', _this.onFileConverting);
     _this.uploadService.on('file-upload-error', _this.onUploadError);
+    _this.uploadService.onFileEmpty(_this.addErrorFlag);
     if (tenantUploadParams.onUploadRejection) {
       var onUploadRejection = tenantUploadParams.onUploadRejection;
       _this.uploadService.onFileRejection(function (rejectionData) {
         var shouldOverride = onUploadRejection(rejectionData);
         if (!shouldOverride) {
-          _this.addUploadRejectionFlag(rejectionData);
+          _this.addErrorFlag(rejectionData);
         }
       });
     } else {
-      _this.uploadService.onFileRejection(_this.addUploadRejectionFlag);
+      _this.uploadService.onFileRejection(_this.addErrorFlag);
     }
     return _this;
   }

package/dist/cjs/service/uploadServiceImpl.js

@@ -247,6 +247,17 @@ var UploadServiceImpl = exports.UploadServiceImpl = /*#__PURE__*/function () {
                   }
                   return null;
                 }
+
+                // exclude empty files from being uploaded
+                if (file.size === 0) {
+                  if (_this3.fileEmptyHandler) {
+                    _this3.fileEmptyHandler({
+                      reason: 'fileEmpty',
+                      fileName: file.name
+                    });
+                  }
+                  return null;
+                }
                 var touchedFile = (_touchedFiles2 = touchedFiles) === null || _touchedFiles2 === void 0 ? void 0 : _touchedFiles2.created.find(function (touchedFile) {
                   return touchedFile.fileId === id;
                 });
@@ -389,6 +400,11 @@ var UploadServiceImpl = exports.UploadServiceImpl = /*#__PURE__*/function () {
     value: function releaseCancellableFile(mediaFile) {
       delete this.cancellableFilesUploads[mediaFile.id];
     }
+  }, {
+    key: "onFileEmpty",
+    value: function onFileEmpty(handler) {
+      this.fileEmptyHandler = handler;
+    }
   }, {
     key: "onFileRejection",
     value: function onFileRejection(handler) {

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 = "66.3.2";
+var packageVersion = "66.4.1";
 function getPackageAttributes(componentName) {
   return {
     packageName: packageName,

package/dist/cjs/util/ufoExperiences.js

@@ -12,7 +12,7 @@ var _mediaClient = require("@atlaskit/media-client");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-picker";
-var packageVersion = "66.3.2";
+var packageVersion = "66.4.1";
 var ufoExperience;
 var initExperience = function initExperience(id, componentName) {
   if (!ufoExperience) {

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

@@ -5,7 +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';
+import ErrorFlagGroup from '../errorFlagGroup/ErrorFlagGroup';
 const defaultConfig = {
   uploadParams: {}
 };
@@ -127,9 +127,9 @@ export class BrowserBase extends LocalUploadComponentReact {
       multiple: replaceFileId ? false : multiple /* if the consumer passes the fileId we must work in single selection mode */,
       accept: fileExtensions,
       onChange: this.onFilePicked
-    }), children ? children(this.browse) : null, /*#__PURE__*/React.createElement(UploadRejectionFlagGroup, {
-      flagData: this.state.uploadRejectionFlags,
-      onFlagDismissed: this.dismissUploadRejectionFlag
+    }), children ? children(this.browse) : null, /*#__PURE__*/React.createElement(ErrorFlagGroup, {
+      flagData: this.state.errorFlags,
+      onFlagDismissed: this.dismissErrorFlag
     }));
   }
 }

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

@@ -7,7 +7,7 @@ import { LocalUploadComponentReact } from '../localUploadReact';
 import { LocalFileSource } from '../../service/types';
 import { getPackageAttributes } from '../../util/analytics';
 import { appendTimestamp } from '../../util/appendTimestamp';
-import UploadRejectionFlagGroup from '../uploadRejectionFlagGroup/UploadRejectionFlagGroup';
+import ErrorFlagGroup from '../errorFlagGroup/ErrorFlagGroup';
 export const getFilesFromClipboard = files => {
   return Array.from(files).map(file => {
     if (file.type.indexOf('image/') === 0) {
@@ -173,9 +173,9 @@ export class ClipboardBase extends LocalUploadComponentReact {
     this.clipboard.deactivate();
   }
   render() {
-    return /*#__PURE__*/React.createElement(UploadRejectionFlagGroup, {
-      flagData: this.state.uploadRejectionFlags,
-      onFlagDismissed: this.dismissUploadRejectionFlag
+    return /*#__PURE__*/React.createElement(ErrorFlagGroup, {
+      flagData: this.state.errorFlags,
+      onFlagDismissed: this.dismissErrorFlag
     });
   }
 }

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

@@ -6,7 +6,7 @@ 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';
+import ErrorFlagGroup from '../errorFlagGroup/ErrorFlagGroup';
 function dragContainsFiles(event) {
   if (!event.dataTransfer) {
     return false;
@@ -22,9 +22,12 @@ export class DropzoneBase extends LocalUploadComponentReact {
     super(props, COMPONENT_NAME);
     _defineProperty(this, "uiActive", false);
     _defineProperty(this, "addContainerListeners", (container = this.getContainer()) => {
+      // TODO: migrate this file to Pragmatic drag and drop
+      /* eslint-disable @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop */
       container.addEventListener('dragover', this.onDragOver, false);
       container.addEventListener('dragleave', this.onDragLeave, false);
       container.addEventListener('drop', this.onFileDropped);
+      /* eslint-enable @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop */
     });
     _defineProperty(this, "removeContainerListeners", (container = this.getContainer()) => {
       container.removeEventListener('dragover', this.onDragOver, false);
@@ -254,9 +257,9 @@ export class DropzoneBase extends LocalUploadComponentReact {
     }
   }
   render() {
-    return /*#__PURE__*/React.createElement(UploadRejectionFlagGroup, {
-      flagData: this.state.uploadRejectionFlags,
-      onFlagDismissed: this.dismissUploadRejectionFlag
+    return /*#__PURE__*/React.createElement(ErrorFlagGroup, {
+      flagData: this.state.errorFlags,
+      onFlagDismissed: this.dismissErrorFlag
     });
   }
 }

package/dist/es2019/components/{uploadRejectionFlagGroup/UploadRejectionFlagGroup.js → errorFlagGroup/ErrorFlagGroup.js}

@@ -2,7 +2,7 @@ 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 { errorFlagMessages } from './messages';
 import { injectIntl, IntlProvider, useIntl } from 'react-intl-next';
 const defaultOptions = {
   style: 'unit',
@@ -51,14 +51,16 @@ const FlagGroupContent = ({
       size: "medium"
     }),
     key: i,
-    title: intl.formatMessage(uploadRejectionFlagMessages.title),
-    description: intl.formatMessage(uploadRejectionFlagMessages.description, {
+    title: intl.formatMessage(errorFlagMessages.errorTitle),
+    description: data.reason === 'fileEmpty' ? intl.formatMessage(errorFlagMessages.fileEmptyDescription, {
+      fileName: data.fileName
+    }) : intl.formatMessage(errorFlagMessages.uploadRejectionDescription, {
       fileName: data.fileName,
       limit: formatFileSize(data.limit)
     })
   })));
 };
-const UploadRejectionFlagGroup = ({
+const ErrorFlagGroup = ({
   flagData,
   onFlagDismissed,
   intl
@@ -73,6 +75,6 @@ const UploadRejectionFlagGroup = ({
     onFlagDismissed: onFlagDismissed
   }));
 };
-export default injectIntl(UploadRejectionFlagGroup, {
+export default injectIntl(ErrorFlagGroup, {
   enforceContext: false
 });

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

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl-next';
+export const errorFlagMessages = defineMessages({
+  errorTitle: {
+    id: 'fabric.media.errorFlagTitle',
+    defaultMessage: 'Your file failed to upload',
+    description: 'a title for a flag that describes that a file failed to upload'
+  },
+  uploadRejectionDescription: {
+    id: 'fabric.media.uploadRejectionFlagDescription',
+    defaultMessage: '{fileName} is too big to upload. Files must be less than {limit}.',
+    description: 'a description for a flag detailing that a file was too large to upload'
+  },
+  fileEmptyDescription: {
+    id: 'fabric.media.fileEmptyFlagDescription',
+    defaultMessage: 'The file you selected was empty. Please select another file and try again.',
+    description: 'a description for a flag detailing that a file was zero bytes'
+  }
+});

package/dist/es2019/components/localUploadReact.js

@@ -12,16 +12,16 @@ export class LocalUploadComponentReact extends Component {
     super(props);
     _defineProperty(this, "uploadComponent", new UploadComponent());
     _defineProperty(this, "state", {
-      uploadRejectionFlags: []
+      errorFlags: []
     });
-    _defineProperty(this, "addUploadRejectionFlag", rejectionData => {
+    _defineProperty(this, "addErrorFlag", flagData => {
       this.setState({
-        uploadRejectionFlags: [...this.state.uploadRejectionFlags, rejectionData]
+        errorFlags: [...this.state.errorFlags, flagData]
       });
     });
-    _defineProperty(this, "dismissUploadRejectionFlag", () => {
+    _defineProperty(this, "dismissErrorFlag", () => {
       this.setState({
-        uploadRejectionFlags: this.state.uploadRejectionFlags.slice(1)
+        errorFlags: this.state.errorFlags.slice(1)
       });
     });
     _defineProperty(this, "fireCommencedEvent", payload => {
@@ -200,6 +200,7 @@ 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);
+    this.uploadService.onFileEmpty(this.addErrorFlag);
     if (tenantUploadParams.onUploadRejection) {
       const {
         onUploadRejection
@@ -207,11 +208,11 @@ export class LocalUploadComponentReact extends Component {
       this.uploadService.onFileRejection(rejectionData => {
         const shouldOverride = onUploadRejection(rejectionData);
         if (!shouldOverride) {
-          this.addUploadRejectionFlag(rejectionData);
+          this.addErrorFlag(rejectionData);
         }
       });
     } else {
-      this.uploadService.onFileRejection(this.addUploadRejectionFlag);
+      this.uploadService.onFileRejection(this.addErrorFlag);
     }
   }
   setUploadParams(uploadParams) {

package/dist/es2019/service/uploadServiceImpl.js

@@ -171,6 +171,17 @@ export class UploadServiceImpl {
         }
         return null;
       }
+
+      // exclude empty files from being uploaded
+      if (file.size === 0) {
+        if (this.fileEmptyHandler) {
+          this.fileEmptyHandler({
+            reason: 'fileEmpty',
+            fileName: file.name
+          });
+        }
+        return null;
+      }
       const touchedFile = (_touchedFiles2 = touchedFiles) === null || _touchedFiles2 === void 0 ? void 0 : _touchedFiles2.created.find(touchedFile => touchedFile.fileId === id);
       let deferredUploadId;
       const isIdConflictError = caughtError instanceof RequestError && ((_caughtError$metadata = caughtError.metadata) === null || _caughtError$metadata === void 0 ? void 0 : _caughtError$metadata.statusCode) === 409;
@@ -297,6 +308,9 @@ export class UploadServiceImpl {
   releaseCancellableFile(mediaFile) {
     delete this.cancellableFilesUploads[mediaFile.id];
   }
+  onFileEmpty(handler) {
+    this.fileEmptyHandler = handler;
+  }
   onFileRejection(handler) {
     this.fileRejectionHandler = handler;
   }

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 = "66.3.2";
+const packageVersion = "66.4.1";
 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 = "66.3.2";
+const packageVersion = "66.4.1";
 let ufoExperience;
 const initExperience = (id, componentName) => {
   if (!ufoExperience) {

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

@@ -13,7 +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';
+import ErrorFlagGroup from '../errorFlagGroup/ErrorFlagGroup';
 var defaultConfig = {
   uploadParams: {}
 };
@@ -130,9 +130,9 @@ export var BrowserBase = /*#__PURE__*/function (_LocalUploadComponent) {
         multiple: replaceFileId ? false : multiple /* if the consumer passes the fileId we must work in single selection mode */,
         accept: fileExtensions,
         onChange: this.onFilePicked
-      }), children ? children(this.browse) : null, /*#__PURE__*/React.createElement(UploadRejectionFlagGroup, {
-        flagData: this.state.uploadRejectionFlags,
-        onFlagDismissed: this.dismissUploadRejectionFlag
+      }), children ? children(this.browse) : null, /*#__PURE__*/React.createElement(ErrorFlagGroup, {
+        flagData: this.state.errorFlags,
+        onFlagDismissed: this.dismissErrorFlag
       }));
     }
   }]);

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

@@ -14,7 +14,7 @@ import { LocalUploadComponentReact } from '../localUploadReact';
 import { LocalFileSource } from '../../service/types';
 import { getPackageAttributes } from '../../util/analytics';
 import { appendTimestamp } from '../../util/appendTimestamp';
-import UploadRejectionFlagGroup from '../uploadRejectionFlagGroup/UploadRejectionFlagGroup';
+import ErrorFlagGroup from '../errorFlagGroup/ErrorFlagGroup';
 export var getFilesFromClipboard = function getFilesFromClipboard(files) {
   return Array.from(files).map(function (file) {
     if (file.type.indexOf('image/') === 0) {
@@ -207,9 +207,9 @@ export var ClipboardBase = /*#__PURE__*/function (_LocalUploadComponent) {
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(UploadRejectionFlagGroup, {
-        flagData: this.state.uploadRejectionFlags,
-        onFlagDismissed: this.dismissUploadRejectionFlag
+      return /*#__PURE__*/React.createElement(ErrorFlagGroup, {
+        flagData: this.state.errorFlags,
+        onFlagDismissed: this.dismissErrorFlag
       });
     }
   }]);

package/dist/esm/components/dropzone/dropzone.js

@@ -16,7 +16,7 @@ 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';
+import ErrorFlagGroup from '../errorFlagGroup/ErrorFlagGroup';
 function dragContainsFiles(event) {
   if (!event.dataTransfer) {
     return false;
@@ -35,9 +35,12 @@ export var DropzoneBase = /*#__PURE__*/function (_LocalUploadComponent) {
     _defineProperty(_assertThisInitialized(_this), "uiActive", false);
     _defineProperty(_assertThisInitialized(_this), "addContainerListeners", function () {
       var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.getContainer();
+      // TODO: migrate this file to Pragmatic drag and drop
+      /* eslint-disable @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop */
       container.addEventListener('dragover', _this.onDragOver, false);
       container.addEventListener('dragleave', _this.onDragLeave, false);
       container.addEventListener('drop', _this.onFileDropped);
+      /* eslint-enable @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop */
     });
     _defineProperty(_assertThisInitialized(_this), "removeContainerListeners", function () {
       var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.getContainer();
@@ -310,9 +313,9 @@ export var DropzoneBase = /*#__PURE__*/function (_LocalUploadComponent) {
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(UploadRejectionFlagGroup, {
-        flagData: this.state.uploadRejectionFlags,
-        onFlagDismissed: this.dismissUploadRejectionFlag
+      return /*#__PURE__*/React.createElement(ErrorFlagGroup, {
+        flagData: this.state.errorFlags,
+        onFlagDismissed: this.dismissErrorFlag
       });
     }
   }]);

package/dist/esm/components/{uploadRejectionFlagGroup/UploadRejectionFlagGroup.js → errorFlagGroup/ErrorFlagGroup.js}

@@ -5,7 +5,7 @@ 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 { errorFlagMessages } from './messages';
 import { injectIntl, IntlProvider, useIntl } from 'react-intl-next';
 var defaultOptions = {
   style: 'unit',
@@ -51,15 +51,17 @@ var FlagGroupContent = function FlagGroupContent(_ref) {
         size: "medium"
       }),
       key: i,
-      title: intl.formatMessage(uploadRejectionFlagMessages.title),
-      description: intl.formatMessage(uploadRejectionFlagMessages.description, {
+      title: intl.formatMessage(errorFlagMessages.errorTitle),
+      description: data.reason === 'fileEmpty' ? intl.formatMessage(errorFlagMessages.fileEmptyDescription, {
+        fileName: data.fileName
+      }) : intl.formatMessage(errorFlagMessages.uploadRejectionDescription, {
         fileName: data.fileName,
         limit: formatFileSize(data.limit)
       })
     });
   }));
 };
-var UploadRejectionFlagGroup = function UploadRejectionFlagGroup(_ref2) {
+var ErrorFlagGroup = function ErrorFlagGroup(_ref2) {
   var flagData = _ref2.flagData,
     onFlagDismissed = _ref2.onFlagDismissed,
     intl = _ref2.intl;
@@ -73,6 +75,6 @@ var UploadRejectionFlagGroup = function UploadRejectionFlagGroup(_ref2) {
     onFlagDismissed: onFlagDismissed
   }));
 };
-export default injectIntl(UploadRejectionFlagGroup, {
+export default injectIntl(ErrorFlagGroup, {
   enforceContext: false
 });

package/dist/esm/components/errorFlagGroup/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl-next';
+export var errorFlagMessages = defineMessages({
+  errorTitle: {
+    id: 'fabric.media.errorFlagTitle',
+    defaultMessage: 'Your file failed to upload',
+    description: 'a title for a flag that describes that a file failed to upload'
+  },
+  uploadRejectionDescription: {
+    id: 'fabric.media.uploadRejectionFlagDescription',
+    defaultMessage: '{fileName} is too big to upload. Files must be less than {limit}.',
+    description: 'a description for a flag detailing that a file was too large to upload'
+  },
+  fileEmptyDescription: {
+    id: 'fabric.media.fileEmptyFlagDescription',
+    defaultMessage: 'The file you selected was empty. Please select another file and try again.',
+    description: 'a description for a flag detailing that a file was zero bytes'
+  }
+});

package/dist/esm/components/localUploadReact.js

@@ -27,16 +27,16 @@ export var LocalUploadComponentReact = /*#__PURE__*/function (_Component) {
     _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "uploadComponent", new UploadComponent());
     _defineProperty(_assertThisInitialized(_this), "state", {
-      uploadRejectionFlags: []
+      errorFlags: []
     });
-    _defineProperty(_assertThisInitialized(_this), "addUploadRejectionFlag", function (rejectionData) {
+    _defineProperty(_assertThisInitialized(_this), "addErrorFlag", function (flagData) {
       _this.setState({
-        uploadRejectionFlags: [].concat(_toConsumableArray(_this.state.uploadRejectionFlags), [rejectionData])
+        errorFlags: [].concat(_toConsumableArray(_this.state.errorFlags), [flagData])
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "dismissUploadRejectionFlag", function () {
+    _defineProperty(_assertThisInitialized(_this), "dismissErrorFlag", function () {
       _this.setState({
-        uploadRejectionFlags: _this.state.uploadRejectionFlags.slice(1)
+        errorFlags: _this.state.errorFlags.slice(1)
       });
     });
     _defineProperty(_assertThisInitialized(_this), "fireCommencedEvent", function (payload) {
@@ -206,16 +206,17 @@ export 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);
+    _this.uploadService.onFileEmpty(_this.addErrorFlag);
     if (tenantUploadParams.onUploadRejection) {
       var onUploadRejection = tenantUploadParams.onUploadRejection;
       _this.uploadService.onFileRejection(function (rejectionData) {
         var shouldOverride = onUploadRejection(rejectionData);
         if (!shouldOverride) {
-          _this.addUploadRejectionFlag(rejectionData);
+          _this.addErrorFlag(rejectionData);
         }
       });
     } else {
-      _this.uploadService.onFileRejection(_this.addUploadRejectionFlag);
+      _this.uploadService.onFileRejection(_this.addErrorFlag);
     }
     return _this;
   }

package/dist/esm/service/uploadServiceImpl.js

@@ -240,6 +240,17 @@ export var UploadServiceImpl = /*#__PURE__*/function () {
                   }
                   return null;
                 }
+
+                // exclude empty files from being uploaded
+                if (file.size === 0) {
+                  if (_this3.fileEmptyHandler) {
+                    _this3.fileEmptyHandler({
+                      reason: 'fileEmpty',
+                      fileName: file.name
+                    });
+                  }
+                  return null;
+                }
                 var touchedFile = (_touchedFiles2 = touchedFiles) === null || _touchedFiles2 === void 0 ? void 0 : _touchedFiles2.created.find(function (touchedFile) {
                   return touchedFile.fileId === id;
                 });
@@ -382,6 +393,11 @@ export var UploadServiceImpl = /*#__PURE__*/function () {
     value: function releaseCancellableFile(mediaFile) {
       delete this.cancellableFilesUploads[mediaFile.id];
     }
+  }, {
+    key: "onFileEmpty",
+    value: function onFileEmpty(handler) {
+      this.fileEmptyHandler = handler;
+    }
   }, {
     key: "onFileRejection",
     value: function onFileRejection(handler) {

package/dist/esm/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
 
 var packageName = "@atlaskit/media-picker";
-var packageVersion = "66.3.2";
+var packageVersion = "66.4.1";
 export function getPackageAttributes(componentName) {
   return {
     packageName: packageName,

package/dist/esm/util/ufoExperiences.js

@@ -5,7 +5,7 @@ import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } fro
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-picker";
-var packageVersion = "66.3.2";
+var packageVersion = "66.4.1";
 var ufoExperience;
 var initExperience = function initExperience(id, componentName) {
   if (!ufoExperience) {

package/dist/types/components/errorFlagGroup/ErrorFlagGroup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { FlagData } from '../../types';
+import { WrappedComponentProps } from 'react-intl-next';
+export interface ErrorFlagGroupProps {
+    readonly flagData: FlagData[];
+    onFlagDismissed: () => void;
+}
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<ErrorFlagGroupProps & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<ErrorFlagGroupProps & WrappedComponentProps>;
+};
+export default _default;

package/dist/types/components/errorFlagGroup/messages.d.ts

@@ -0,0 +1,17 @@
+export declare const errorFlagMessages: {
+    errorTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    uploadRejectionDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    fileEmptyDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/components/localUploadReact.d.ts

@@ -2,11 +2,11 @@ import { Component } from 'react';
 import { MediaClient } from '@atlaskit/media-client';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
 import { UploadService } from '../service/types';
-import { UploadEndEventPayload, UploadErrorEventPayload, UploadPreviewUpdateEventPayload, UploadsStartEventPayload, UploadParams } from '../types';
+import { UploadEndEventPayload, UploadErrorEventPayload, UploadPreviewUpdateEventPayload, UploadsStartEventPayload, UploadParams, FlagData } from '../types';
 import { UploadComponent } from './component';
 import { LocalUploadConfig } from './types';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { AnalyticsEventPayload, UploadRejectionData } from '../types';
+import { AnalyticsEventPayload } from '../types';
 import { ComponentName } from '../util/analytics';
 export type LocalUploadComponentBaseProps = {
     mediaClient: MediaClient;
@@ -18,7 +18,7 @@ export type LocalUploadComponentBaseProps = {
     featureFlags?: MediaFeatureFlags;
 } & WithAnalyticsEventsProps;
 export type LocalUploadComponentBaseState = {
-    uploadRejectionFlags: UploadRejectionData[];
+    errorFlags: FlagData[];
 };
 export declare class LocalUploadComponentReact<Props extends LocalUploadComponentBaseProps> extends Component<Props, LocalUploadComponentBaseState> {
     protected readonly componentName: ComponentName;
@@ -26,8 +26,8 @@ export declare class LocalUploadComponentReact<Props extends LocalUploadComponen
     protected uploadComponent: UploadComponent<import("../types").UploadEventPayloadMap>;
     state: LocalUploadComponentBaseState;
     constructor(props: Props, componentName: ComponentName);
-    private addUploadRejectionFlag;
-    protected dismissUploadRejectionFlag: () => void;
+    private addErrorFlag;
+    protected dismissErrorFlag: () => void;
     private fireCommencedEvent;
     private fireUploadSucceeded;
     private fireUploadFailed;

package/dist/types/service/types.d.ts

@@ -1,4 +1,4 @@
-import { UploadEndEventPayload, UploadErrorEventPayload, UploadPreviewUpdateEventPayload, UploadsStartEventPayload, UploadParams, UploadRejectionData } from '../types';
+import { UploadEndEventPayload, UploadErrorEventPayload, UploadPreviewUpdateEventPayload, UploadsStartEventPayload, UploadParams, UploadRejectionData, FileEmptyData } from '../types';
 export type UploadServiceEventPayloadTypes = {
     readonly 'files-added': UploadsStartEventPayload;
     readonly 'file-preview-update': UploadPreviewUpdateEventPayload;
@@ -16,6 +16,7 @@ export interface UploadService {
     cancel(id?: string): void;
     on<E extends keyof UploadServiceEventPayloadTypes>(event: E, listener: UploadServiceEventListener<E>): void;
     off<E extends keyof UploadServiceEventPayloadTypes>(event: E, listener: UploadServiceEventListener<E>): void;
+    onFileEmpty(handler: (fileEmptyData: FileEmptyData) => void): void;
     onFileRejection(handler: (rejectionData: UploadRejectionData) => void): void;
 }
 export declare enum LocalFileSource {

package/dist/types/service/uploadServiceImpl.d.ts

@@ -1,5 +1,5 @@
 import { MediaClient } from '@atlaskit/media-client';
-import { MediaFile, UploadParams } from '../types';
+import { FileEmptyData, MediaFile, UploadParams } from '../types';
 import { UploadRejectionData } from '../types';
 import { UploadService, UploadServiceEventListener, UploadServiceEventPayloadTypes } from './types';
 import { LocalFileSource, LocalFileWithSource } from '../service/types';
@@ -19,6 +19,7 @@ export declare class UploadServiceImpl implements UploadService {
     private readonly emitter;
     private cancellableFilesUploads;
     private fileRejectionHandler?;
+    private fileEmptyHandler?;
     constructor(tenantMediaClient: MediaClient, tenantUploadParams: UploadParams, shouldCopyFileToRecents: boolean, maxUploadBatchSize?: number);
     setUploadParams(uploadParams: UploadParams): void;
     private createUploadController;
@@ -36,5 +37,6 @@ export declare class UploadServiceImpl implements UploadService {
     private releaseCancellableFile;
     private readonly onFileSuccess;
     private readonly onFileError;
+    onFileEmpty(handler: (fileEmptyData: FileEmptyData) => void): void;
     onFileRejection(handler: (rejectionData: UploadRejectionData) => void): void;
 }

package/dist/types/types.d.ts

@@ -57,6 +57,11 @@ export type UploadRejectionData = {
     fileName: string;
     limit: number;
 };
+export type FileEmptyData = {
+    reason: 'fileEmpty';
+    fileName: string;
+};
+export type FlagData = UploadRejectionData | FileEmptyData;
 export interface BrowserConfig extends LocalUploadConfig {
     readonly multiple?: boolean;
     readonly fileExtensions?: Array<string>;

package/dist/types-ts4.5/components/errorFlagGroup/ErrorFlagGroup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { FlagData } from '../../types';
+import { WrappedComponentProps } from 'react-intl-next';
+export interface ErrorFlagGroupProps {
+    readonly flagData: FlagData[];
+    onFlagDismissed: () => void;
+}
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<ErrorFlagGroupProps & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<ErrorFlagGroupProps & WrappedComponentProps>;
+};
+export default _default;

package/dist/types-ts4.5/components/errorFlagGroup/messages.d.ts

@@ -0,0 +1,17 @@
+export declare const errorFlagMessages: {
+    errorTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    uploadRejectionDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    fileEmptyDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types-ts4.5/components/localUploadReact.d.ts

@@ -2,11 +2,11 @@ import { Component } from 'react';
 import { MediaClient } from '@atlaskit/media-client';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
 import { UploadService } from '../service/types';
-import { UploadEndEventPayload, UploadErrorEventPayload, UploadPreviewUpdateEventPayload, UploadsStartEventPayload, UploadParams } from '../types';
+import { UploadEndEventPayload, UploadErrorEventPayload, UploadPreviewUpdateEventPayload, UploadsStartEventPayload, UploadParams, FlagData } from '../types';
 import { UploadComponent } from './component';
 import { LocalUploadConfig } from './types';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { AnalyticsEventPayload, UploadRejectionData } from '../types';
+import { AnalyticsEventPayload } from '../types';
 import { ComponentName } from '../util/analytics';
 export type LocalUploadComponentBaseProps = {
     mediaClient: MediaClient;
@@ -18,7 +18,7 @@ export type LocalUploadComponentBaseProps = {
     featureFlags?: MediaFeatureFlags;
 } & WithAnalyticsEventsProps;
 export type LocalUploadComponentBaseState = {
-    uploadRejectionFlags: UploadRejectionData[];
+    errorFlags: FlagData[];
 };
 export declare class LocalUploadComponentReact<Props extends LocalUploadComponentBaseProps> extends Component<Props, LocalUploadComponentBaseState> {
     protected readonly componentName: ComponentName;
@@ -26,8 +26,8 @@ export declare class LocalUploadComponentReact<Props extends LocalUploadComponen
     protected uploadComponent: UploadComponent<import("../types").UploadEventPayloadMap>;
     state: LocalUploadComponentBaseState;
     constructor(props: Props, componentName: ComponentName);
-    private addUploadRejectionFlag;
-    protected dismissUploadRejectionFlag: () => void;
+    private addErrorFlag;
+    protected dismissErrorFlag: () => void;
     private fireCommencedEvent;
     private fireUploadSucceeded;
     private fireUploadFailed;

package/dist/types-ts4.5/service/types.d.ts

@@ -1,4 +1,4 @@
-import { UploadEndEventPayload, UploadErrorEventPayload, UploadPreviewUpdateEventPayload, UploadsStartEventPayload, UploadParams, UploadRejectionData } from '../types';
+import { UploadEndEventPayload, UploadErrorEventPayload, UploadPreviewUpdateEventPayload, UploadsStartEventPayload, UploadParams, UploadRejectionData, FileEmptyData } from '../types';
 export type UploadServiceEventPayloadTypes = {
     readonly 'files-added': UploadsStartEventPayload;
     readonly 'file-preview-update': UploadPreviewUpdateEventPayload;
@@ -16,6 +16,7 @@ export interface UploadService {
     cancel(id?: string): void;
     on<E extends keyof UploadServiceEventPayloadTypes>(event: E, listener: UploadServiceEventListener<E>): void;
     off<E extends keyof UploadServiceEventPayloadTypes>(event: E, listener: UploadServiceEventListener<E>): void;
+    onFileEmpty(handler: (fileEmptyData: FileEmptyData) => void): void;
     onFileRejection(handler: (rejectionData: UploadRejectionData) => void): void;
 }
 export declare enum LocalFileSource {

package/dist/types-ts4.5/service/uploadServiceImpl.d.ts

@@ -1,5 +1,5 @@
 import { MediaClient } from '@atlaskit/media-client';
-import { MediaFile, UploadParams } from '../types';
+import { FileEmptyData, MediaFile, UploadParams } from '../types';
 import { UploadRejectionData } from '../types';
 import { UploadService, UploadServiceEventListener, UploadServiceEventPayloadTypes } from './types';
 import { LocalFileSource, LocalFileWithSource } from '../service/types';
@@ -19,6 +19,7 @@ export declare class UploadServiceImpl implements UploadService {
     private readonly emitter;
     private cancellableFilesUploads;
     private fileRejectionHandler?;
+    private fileEmptyHandler?;
     constructor(tenantMediaClient: MediaClient, tenantUploadParams: UploadParams, shouldCopyFileToRecents: boolean, maxUploadBatchSize?: number);
     setUploadParams(uploadParams: UploadParams): void;
     private createUploadController;
@@ -36,5 +37,6 @@ export declare class UploadServiceImpl implements UploadService {
     private releaseCancellableFile;
     private readonly onFileSuccess;
     private readonly onFileError;
+    onFileEmpty(handler: (fileEmptyData: FileEmptyData) => void): void;
     onFileRejection(handler: (rejectionData: UploadRejectionData) => void): void;
 }

package/dist/types-ts4.5/types.d.ts

@@ -57,6 +57,11 @@ export type UploadRejectionData = {
     fileName: string;
     limit: number;
 };
+export type FileEmptyData = {
+    reason: 'fileEmpty';
+    fileName: string;
+};
+export type FlagData = UploadRejectionData | FileEmptyData;
 export interface BrowserConfig extends LocalUploadConfig {
     readonly multiple?: boolean;
     readonly fileExtensions?: Array<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-picker",
-  "version": "66.3.2",
+  "version": "66.4.1",
   "description": "Library for handling file uploads",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,14 +35,14 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/flag": "^15.1.0",
+    "@atlaskit/flag": "^15.3.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/media-client": "^26.2.0",
+    "@atlaskit/media-client": "^26.3.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.1.0",
-    "@atlaskit/media-ui": "^25.4.0",
-    "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.42.0",
+    "@atlaskit/media-ui": "^25.6.0",
+    "@atlaskit/theme": "^12.7.0",
+    "@atlaskit/tokens": "^1.43.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
     "eventemitter2": "^4.1.0",
@@ -61,7 +61,7 @@
   "devDependencies": {
     "@atlaskit/analytics-listeners": "^8.9.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
-    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/button": "^17.11.0",
     "@atlaskit/media-core": "^34.2.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
     "@atlaskit/ssr": "*",

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

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.uploadRejectionFlagMessages = void 0;
-var _reactIntlNext = require("react-intl-next");
-var uploadRejectionFlagMessages = exports.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'
-  }
-});

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

@@ -1,13 +0,0 @@
-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/esm/components/uploadRejectionFlagGroup/messages.js

@@ -1,13 +0,0 @@
-import { defineMessages } from 'react-intl-next';
-export var 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/types/components/uploadRejectionFlagGroup/UploadRejectionFlagGroup.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { UploadRejectionData } from '../../types';
-import { WrappedComponentProps } from 'react-intl-next';
-export interface UploadRejectionFlagGroupProps {
-    readonly flagData: UploadRejectionData[];
-    onFlagDismissed: () => void;
-}
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<UploadRejectionFlagGroupProps & WrappedComponentProps>> & {
-    WrappedComponent: React.ComponentType<UploadRejectionFlagGroupProps & WrappedComponentProps>;
-};
-export default _default;

package/dist/types/components/uploadRejectionFlagGroup/messages.d.ts

@@ -1,12 +0,0 @@
-export declare const uploadRejectionFlagMessages: {
-    title: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    description: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-};

package/dist/types-ts4.5/components/uploadRejectionFlagGroup/UploadRejectionFlagGroup.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { UploadRejectionData } from '../../types';
-import { WrappedComponentProps } from 'react-intl-next';
-export interface UploadRejectionFlagGroupProps {
-    readonly flagData: UploadRejectionData[];
-    onFlagDismissed: () => void;
-}
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<UploadRejectionFlagGroupProps & WrappedComponentProps>> & {
-    WrappedComponent: React.ComponentType<UploadRejectionFlagGroupProps & WrappedComponentProps>;
-};
-export default _default;

package/dist/types-ts4.5/components/uploadRejectionFlagGroup/messages.d.ts

@@ -1,12 +0,0 @@
-export declare const uploadRejectionFlagMessages: {
-    title: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    description: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-};