@atlaskit/editor-plugin-media-insert 2.1.2 → 2.3.0

package/dist/es2019/ui/LocalMedia.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/new';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
+import UploadIcon from '@atlaskit/icon/glyph/upload';
+import { Browser } from '@atlaskit/media-picker';
+import { Stack } from '@atlaskit/primitives';
+import SectionMessage from '@atlaskit/section-message';
+import { useAnalyticsEvents } from './useAnalyticsEvents';
+const INITIAL_UPLOAD_STATE = Object.freeze({
+  isOpen: false,
+  error: null
+});
+const uploadReducer = (state, action) => {
+  switch (action.type) {
+    case 'open':
+      return {
+        ...INITIAL_UPLOAD_STATE,
+        isOpen: true
+      };
+    case 'close':
+      // This is the only case where we don't reset state. This is because
+      // onClose gets called for cancel _and_ upload, so we don't want to
+      // reset any loading or error states that may have occured
+      return {
+        ...state,
+        isOpen: false
+      };
+    case 'error':
+      return {
+        ...INITIAL_UPLOAD_STATE,
+        error: action.error
+      };
+    case 'reset':
+      return INITIAL_UPLOAD_STATE;
+  }
+};
+const isImagePreview = preview => {
+  return 'dimensions' in preview;
+};
+export const LocalMedia = ({
+  mediaProvider,
+  onInsert,
+  dispatchAnalyticsEvent
+}) => {
+  const intl = useIntl();
+  const strings = {
+    upload: intl.formatMessage(mediaInsertMessages.upload),
+    networkError: intl.formatMessage(mediaInsertMessages.localFileNetworkErrorMessage),
+    genericError: intl.formatMessage(mediaInsertMessages.localFileErrorMessage)
+  };
+  const {
+    onUploadButtonClickedAnalytics,
+    onUploadCommencedAnalytics,
+    onUploadSuccessAnalytics,
+    onUploadFailureAnalytics
+  } = useAnalyticsEvents(dispatchAnalyticsEvent);
+  const [uploadState, dispatch] = React.useReducer(uploadReducer, INITIAL_UPLOAD_STATE);
+  const onUpload = ({
+    file,
+    preview
+  }) => {
+    var _mediaProvider$upload;
+    onUploadSuccessAnalytics('local');
+    const mediaState = {
+      id: file.id,
+      collection: (_mediaProvider$upload = mediaProvider.uploadParams) === null || _mediaProvider$upload === void 0 ? void 0 : _mediaProvider$upload.collection,
+      fileMimeType: file.type,
+      fileSize: file.size,
+      fileName: file.name,
+      dimensions: undefined
+    };
+    if (isImagePreview(preview)) {
+      mediaState.dimensions = {
+        width: preview.dimensions.width,
+        height: preview.dimensions.height
+      };
+    }
+    onInsert({
+      mediaState,
+      inputMethod: INPUT_METHOD.MEDIA_PICKER
+    });
+
+    // Probably not needed but I guess it _could_ fail to close for some reason
+    dispatch({
+      type: 'reset'
+    });
+  };
+  const {
+    uploadParams,
+    uploadMediaClientConfig
+  } = mediaProvider;
+  return /*#__PURE__*/React.createElement(Stack, {
+    grow: "fill",
+    space: "space.200"
+  }, uploadState.error && /*#__PURE__*/React.createElement(SectionMessage, {
+    appearance: "error"
+  }, uploadState.error === 'upload_fail' ? strings.networkError : strings.genericError), /*#__PURE__*/React.createElement(Button, {
+    iconBefore: UploadIcon,
+    shouldFitContainer: true,
+    isDisabled: !uploadMediaClientConfig || !uploadParams,
+    onClick: () => {
+      onUploadButtonClickedAnalytics();
+      dispatch({
+        type: 'open'
+      });
+    },
+    autoFocus: true
+  }, strings.upload), uploadMediaClientConfig && uploadParams && /*#__PURE__*/React.createElement(Browser, {
+    isOpen: uploadState.isOpen,
+    config: {
+      uploadParams: uploadParams
+    },
+    mediaClientConfig: uploadMediaClientConfig,
+    onUploadsStart: () => {
+      onUploadCommencedAnalytics('local');
+    },
+    onPreviewUpdate: onUpload
+    // NOTE: this will fire for some errors like network failures, but not
+    // for others like empty files. Those have their own feedback toast
+    // owned by media.
+    ,
+    onError: payload => {
+      onUploadFailureAnalytics(payload.error.name, 'local');
+      dispatch({
+        type: 'error',
+        error: payload.error.name
+      });
+    },
+    onClose: () => {
+      dispatch({
+        type: 'close'
+      });
+    }
+  }));
+};

package/dist/es2019/ui/{FromURL.js → MediaFromURL.js}

@@ -63,10 +63,10 @@ const previewStateReducer = (state, action) => {
 };
 export function MediaFromURL({
   mediaProvider,
-  onInsert,
-  onExternalInsert,
   dispatchAnalyticsEvent,
-  closeMediaInsertPicker
+  closeMediaInsertPicker,
+  insertMediaSingle,
+  insertExternalMediaSingle
 }) {
   const intl = useIntl();
   const strings = {
@@ -74,18 +74,20 @@ export function MediaFromURL({
     insert: intl.formatMessage(mediaInsertMessages.insert),
     pasteLinkToUpload: intl.formatMessage(mediaInsertMessages.pasteLinkToUpload),
     cancel: intl.formatMessage(mediaInsertMessages.cancel),
-    errorMessage: intl.formatMessage(mediaInsertMessages.errorMessage),
-    warning: intl.formatMessage(mediaInsertMessages.warning)
+    errorMessage: intl.formatMessage(mediaInsertMessages.fromUrlErrorMessage),
+    warning: intl.formatMessage(mediaInsertMessages.fromUrlWarning)
   };
   const [inputUrl, setUrl] = React.useState('');
   const [previewState, dispatch] = React.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE);
   const pasteFlag = React.useRef(false);
   const {
-    onUploadAnalytics,
+    onUploadButtonClickedAnalytics,
+    onUploadCommencedAnalytics,
     onUploadSuccessAnalytics,
     onUploadFailureAnalytics
   } = useAnalyticsEvents(dispatchAnalyticsEvent);
   const uploadExternalMedia = React.useCallback(async url => {
+    onUploadButtonClickedAnalytics();
     dispatch({
       type: 'loading'
     });
@@ -98,13 +100,14 @@ export function MediaFromURL({
     }
     const mediaClient = getMediaClient(uploadMediaClientConfig);
     const collection = uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.collection;
-    onUploadAnalytics();
+    onUploadCommencedAnalytics('url');
     try {
       const {
         uploadableFileUpfrontIds,
-        dimensions
+        dimensions,
+        mimeType
       } = await mediaClient.file.uploadExternal(url, collection);
-      onUploadSuccessAnalytics();
+      onUploadSuccessAnalytics('url');
       dispatch({
         type: 'success',
         payload: {
@@ -112,7 +115,8 @@ export function MediaFromURL({
           collection,
           height: dimensions.height,
           width: dimensions.width,
-          occurrenceKey: uploadableFileUpfrontIds.occurrenceKey
+          occurrenceKey: uploadableFileUpfrontIds.occurrenceKey,
+          fileMimeType: mimeType
         }
       });
     } catch (e) {
@@ -120,7 +124,7 @@ export function MediaFromURL({
         // TODO: Make sure this gets good unit test coverage with the actual
         // media plugin. This hard coded error message could be changed at any
         // point and we need a unit test to break to stop people changing it.
-        onUploadFailureAnalytics(e);
+        onUploadFailureAnalytics(e, 'url');
         dispatch({
           type: 'warning',
           warning: e,
@@ -128,20 +132,20 @@ export function MediaFromURL({
         });
       } else if (e instanceof Error) {
         const message = 'Image preview fetch failed';
-        onUploadFailureAnalytics(message);
+        onUploadFailureAnalytics(message, 'url');
         dispatch({
           type: 'error',
           error: message
         });
       } else {
-        onUploadFailureAnalytics('Unknown error');
+        onUploadFailureAnalytics('Unknown error', 'url');
         dispatch({
           type: 'error',
           error: 'Unknown error'
         });
       }
     }
-  }, [mediaProvider, onUploadAnalytics, onUploadFailureAnalytics, onUploadSuccessAnalytics, inputUrl]);
+  }, [onUploadButtonClickedAnalytics, mediaProvider, onUploadCommencedAnalytics, onUploadSuccessAnalytics, onUploadFailureAnalytics, inputUrl]);
   const onURLChange = React.useCallback(e => {
     const url = e.target.value;
     setUrl(url);
@@ -164,14 +168,33 @@ export function MediaFromURL({
       pasteFlag.current = true;
     }
   }, [inputUrl]);
+  const onInsert = React.useCallback(() => {
+    if (previewState.previewInfo) {
+      insertMediaSingle({
+        mediaState: previewState.previewInfo,
+        inputMethod: INPUT_METHOD.MEDIA_PICKER
+      });
+    }
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, insertMediaSingle, previewState.previewInfo]);
+  const onExternalInsert = React.useCallback(url => {
+    if (previewState.warning) {
+      insertExternalMediaSingle({
+        url,
+        alt: url,
+        inputMethod: INPUT_METHOD.MEDIA_PICKER
+      });
+    }
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning]);
   const onInsertClick = React.useCallback(() => {
     if (previewState.previewInfo) {
-      return onInsert(previewState.previewInfo);
+      return onInsert();
     }
     if (previewState.warning) {
       return onExternalInsert(inputUrl);
     }
-  }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, inputUrl]);
+  }, [previewState.previewInfo, previewState.warning, onInsert, onExternalInsert, inputUrl]);
   const onInputKeyPress = React.useCallback(event => {
     if (event && event.key === 'Esc') {
       if (dispatchAnalyticsEvent) {

package/dist/es2019/ui/MediaInsertContent.js

@@ -3,22 +3,30 @@ import { useIntl } from 'react-intl-next';
 import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
 import { Box } from '@atlaskit/primitives';
 import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
-import { MediaFromURL } from './FromURL';
+import { LocalMedia } from './LocalMedia';
+import { MediaFromURL } from './MediaFromURL';
 export const MediaInsertContent = ({
   mediaProvider,
   dispatchAnalyticsEvent,
-  closeMediaInsertPicker
+  closeMediaInsertPicker,
+  insertMediaSingle,
+  insertExternalMediaSingle
 }) => {
   const intl = useIntl();
   return /*#__PURE__*/React.createElement(Tabs, {
     id: "media-insert-tab-navigation"
   }, /*#__PURE__*/React.createElement(Box, {
     paddingBlockEnd: "space.150"
-  }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
+  }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
+    mediaProvider: mediaProvider,
+    onInsert: insertMediaSingle,
+    onClose: closeMediaInsertPicker,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
     mediaProvider: mediaProvider,
-    onExternalInsert: () => {},
-    onInsert: () => {},
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    closeMediaInsertPicker: closeMediaInsertPicker
+    closeMediaInsertPicker: closeMediaInsertPicker,
+    insertMediaSingle: insertMediaSingle,
+    insertExternalMediaSingle: insertExternalMediaSingle
   })));
 };

package/dist/es2019/ui/MediaInsertPicker.js

@@ -40,7 +40,9 @@ export const MediaInsertPicker = ({
   popupsMountPoint,
   popupsBoundariesElement,
   popupsScrollableElement,
-  closeMediaInsertPicker
+  closeMediaInsertPicker,
+  insertMediaSingle,
+  insertExternalMediaSingle
 }) => {
   var _useSharedPluginState, _useSharedPluginState2, _useSharedPluginState3, _useSharedPluginState4;
   const targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
@@ -90,6 +92,8 @@ export const MediaInsertPicker = ({
     closeMediaInsertPicker: () => {
       closeMediaInsertPicker();
       focusEditor();
-    }
+    },
+    insertMediaSingle: insertMediaSingle,
+    insertExternalMediaSingle: insertExternalMediaSingle
   })));
 };

package/dist/es2019/ui/useAnalyticsEvents.js

@@ -1,36 +1,52 @@
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 export function useAnalyticsEvents(dispatchAnalyticsEvent) {
-  const onUploadAnalytics = React.useCallback(() => {
+  const onUploadButtonClickedAnalytics = React.useCallback(() => {
     dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 ? void 0 : dispatchAnalyticsEvent({
       action: ACTION.CLICKED,
       actionSubject: ACTION_SUBJECT.BUTTON,
-      actionSubjectId: ACTION_SUBJECT_ID.UPLOAD_MEDIA_FROM_URL,
+      actionSubjectId: ACTION_SUBJECT_ID.UPLOAD_MEDIA,
       eventType: EVENT_TYPE.UI
     });
   }, [dispatchAnalyticsEvent]);
-  const onUploadSuccessAnalytics = React.useCallback(() => {
+  const onUploadCommencedAnalytics = React.useCallback(mediaUploadSource => {
+    dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 ? void 0 : dispatchAnalyticsEvent({
+      action: ACTION.UPLOAD_COMMENCED,
+      actionSubject: ACTION_SUBJECT.MEDIA,
+      actionSubjectId: ACTION_SUBJECT_ID.UPLOAD_MEDIA,
+      eventType: EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        mediaUploadSource
+      }
+    });
+  }, [dispatchAnalyticsEvent]);
+  const onUploadSuccessAnalytics = React.useCallback(mediaUploadSource => {
     dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 ? void 0 : dispatchAnalyticsEvent({
       action: ACTION.UPLOAD_SUCCEEDED,
       actionSubject: ACTION_SUBJECT.MEDIA,
-      actionSubjectId: ACTION_SUBJECT_ID.UPLOAD_MEDIA_FROM_URL,
-      eventType: EVENT_TYPE.OPERATIONAL
+      actionSubjectId: ACTION_SUBJECT_ID.UPLOAD_MEDIA,
+      eventType: EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        mediaUploadSource
+      }
     });
   }, [dispatchAnalyticsEvent]);
-  const onUploadFailureAnalytics = React.useCallback(reason => {
+  const onUploadFailureAnalytics = React.useCallback((reason, mediaUploadSource) => {
     dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 ? void 0 : dispatchAnalyticsEvent({
       action: ACTION.UPLOAD_FAILED,
       actionSubject: ACTION_SUBJECT.MEDIA,
-      actionSubjectId: ACTION_SUBJECT_ID.UPLOAD_MEDIA_FROM_URL,
+      actionSubjectId: ACTION_SUBJECT_ID.UPLOAD_MEDIA,
       eventType: EVENT_TYPE.OPERATIONAL,
       attributes: {
-        reason
+        reason,
+        mediaUploadSource
       }
     });
   }, [dispatchAnalyticsEvent]);
   return React.useMemo(() => ({
-    onUploadAnalytics,
+    onUploadButtonClickedAnalytics,
+    onUploadCommencedAnalytics,
     onUploadSuccessAnalytics,
     onUploadFailureAnalytics
-  }), [onUploadAnalytics, onUploadSuccessAnalytics, onUploadFailureAnalytics]);
+  }), [onUploadButtonClickedAnalytics, onUploadCommencedAnalytics, onUploadSuccessAnalytics, onUploadFailureAnalytics]);
 }

package/dist/esm/plugin.js

@@ -36,6 +36,48 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
         popupsMountPoint = _ref3.popupsMountPoint,
         popupsBoundariesElement = _ref3.popupsBoundariesElement,
         popupsScrollableElement = _ref3.popupsScrollableElement;
+      var insertMediaSingle = function insertMediaSingle(_ref4) {
+        var _api$media$actions$in;
+        var mediaState = _ref4.mediaState,
+          inputMethod = _ref4.inputMethod;
+        var id = mediaState.id,
+          dimensions = mediaState.dimensions,
+          contextId = mediaState.contextId,
+          _mediaState$scaleFact = mediaState.scaleFactor,
+          scaleFactor = _mediaState$scaleFact === void 0 ? 1 : _mediaState$scaleFact,
+          fileName = mediaState.fileName,
+          collection = mediaState.collection;
+        var _ref5 = dimensions || {
+            height: undefined,
+            width: undefined
+          },
+          width = _ref5.width,
+          height = _ref5.height;
+        var scaledWidth = width && Math.round(width / scaleFactor);
+        var node = editorView.state.schema.nodes.media.create({
+          id: id,
+          type: 'file',
+          collection: collection,
+          contextId: contextId,
+          width: scaledWidth,
+          height: height && Math.round(height / scaleFactor),
+          alt: fileName,
+          __fileMimeType: mediaState.fileMimeType
+        });
+        return (_api$media$actions$in = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod)) !== null && _api$media$actions$in !== void 0 ? _api$media$actions$in : false;
+      };
+      var insertExternalMediaSingle = function insertExternalMediaSingle(_ref6) {
+        var _api$media$actions$in2;
+        var url = _ref6.url,
+          alt = _ref6.alt,
+          inputMethod = _ref6.inputMethod;
+        var node = editorView.state.schema.nodes.media.create({
+          type: 'external',
+          url: url,
+          alt: alt
+        });
+        return (_api$media$actions$in2 = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod)) !== null && _api$media$actions$in2 !== void 0 ? _api$media$actions$in2 : false;
+      };
       return /*#__PURE__*/React.createElement(MediaInsertPicker, {
         api: api,
         editorView: editorView,
@@ -44,13 +86,15 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
         popupsBoundariesElement: popupsBoundariesElement,
         popupsScrollableElement: popupsScrollableElement,
         closeMediaInsertPicker: function closeMediaInsertPicker() {
-          editorView.dispatch(_closeMediaInsertPicker(editorView.state.tr));
-        }
+          return editorView.dispatch(_closeMediaInsertPicker(editorView.state.tr));
+        },
+        insertMediaSingle: insertMediaSingle,
+        insertExternalMediaSingle: insertExternalMediaSingle
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref4) {
-        var formatMessage = _ref4.formatMessage;
+      quickInsert: function quickInsert(_ref7) {
+        var formatMessage = _ref7.formatMessage;
         return [{
           id: 'media-insert',
           title: formatMessage(messages.insertMediaFromUrl),

package/dist/esm/ui/LocalMedia.js

@@ -0,0 +1,136 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/new';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
+import UploadIcon from '@atlaskit/icon/glyph/upload';
+import { Browser } from '@atlaskit/media-picker';
+import { Stack } from '@atlaskit/primitives';
+import SectionMessage from '@atlaskit/section-message';
+import { useAnalyticsEvents } from './useAnalyticsEvents';
+var INITIAL_UPLOAD_STATE = Object.freeze({
+  isOpen: false,
+  error: null
+});
+var uploadReducer = function uploadReducer(state, action) {
+  switch (action.type) {
+    case 'open':
+      return _objectSpread(_objectSpread({}, INITIAL_UPLOAD_STATE), {}, {
+        isOpen: true
+      });
+    case 'close':
+      // This is the only case where we don't reset state. This is because
+      // onClose gets called for cancel _and_ upload, so we don't want to
+      // reset any loading or error states that may have occured
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isOpen: false
+      });
+    case 'error':
+      return _objectSpread(_objectSpread({}, INITIAL_UPLOAD_STATE), {}, {
+        error: action.error
+      });
+    case 'reset':
+      return INITIAL_UPLOAD_STATE;
+  }
+};
+var isImagePreview = function isImagePreview(preview) {
+  return 'dimensions' in preview;
+};
+export var LocalMedia = function LocalMedia(_ref) {
+  var mediaProvider = _ref.mediaProvider,
+    onInsert = _ref.onInsert,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+  var intl = useIntl();
+  var strings = {
+    upload: intl.formatMessage(mediaInsertMessages.upload),
+    networkError: intl.formatMessage(mediaInsertMessages.localFileNetworkErrorMessage),
+    genericError: intl.formatMessage(mediaInsertMessages.localFileErrorMessage)
+  };
+  var _useAnalyticsEvents = useAnalyticsEvents(dispatchAnalyticsEvent),
+    onUploadButtonClickedAnalytics = _useAnalyticsEvents.onUploadButtonClickedAnalytics,
+    onUploadCommencedAnalytics = _useAnalyticsEvents.onUploadCommencedAnalytics,
+    onUploadSuccessAnalytics = _useAnalyticsEvents.onUploadSuccessAnalytics,
+    onUploadFailureAnalytics = _useAnalyticsEvents.onUploadFailureAnalytics;
+  var _React$useReducer = React.useReducer(uploadReducer, INITIAL_UPLOAD_STATE),
+    _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
+    uploadState = _React$useReducer2[0],
+    dispatch = _React$useReducer2[1];
+  var onUpload = function onUpload(_ref2) {
+    var _mediaProvider$upload;
+    var file = _ref2.file,
+      preview = _ref2.preview;
+    onUploadSuccessAnalytics('local');
+    var mediaState = {
+      id: file.id,
+      collection: (_mediaProvider$upload = mediaProvider.uploadParams) === null || _mediaProvider$upload === void 0 ? void 0 : _mediaProvider$upload.collection,
+      fileMimeType: file.type,
+      fileSize: file.size,
+      fileName: file.name,
+      dimensions: undefined
+    };
+    if (isImagePreview(preview)) {
+      mediaState.dimensions = {
+        width: preview.dimensions.width,
+        height: preview.dimensions.height
+      };
+    }
+    onInsert({
+      mediaState: mediaState,
+      inputMethod: INPUT_METHOD.MEDIA_PICKER
+    });
+
+    // Probably not needed but I guess it _could_ fail to close for some reason
+    dispatch({
+      type: 'reset'
+    });
+  };
+  var uploadParams = mediaProvider.uploadParams,
+    uploadMediaClientConfig = mediaProvider.uploadMediaClientConfig;
+  return /*#__PURE__*/React.createElement(Stack, {
+    grow: "fill",
+    space: "space.200"
+  }, uploadState.error && /*#__PURE__*/React.createElement(SectionMessage, {
+    appearance: "error"
+  }, uploadState.error === 'upload_fail' ? strings.networkError : strings.genericError), /*#__PURE__*/React.createElement(Button, {
+    iconBefore: UploadIcon,
+    shouldFitContainer: true,
+    isDisabled: !uploadMediaClientConfig || !uploadParams,
+    onClick: function onClick() {
+      onUploadButtonClickedAnalytics();
+      dispatch({
+        type: 'open'
+      });
+    },
+    autoFocus: true
+  }, strings.upload), uploadMediaClientConfig && uploadParams && /*#__PURE__*/React.createElement(Browser, {
+    isOpen: uploadState.isOpen,
+    config: {
+      uploadParams: uploadParams
+    },
+    mediaClientConfig: uploadMediaClientConfig,
+    onUploadsStart: function onUploadsStart() {
+      onUploadCommencedAnalytics('local');
+    },
+    onPreviewUpdate: onUpload
+    // NOTE: this will fire for some errors like network failures, but not
+    // for others like empty files. Those have their own feedback toast
+    // owned by media.
+    ,
+    onError: function onError(payload) {
+      onUploadFailureAnalytics(payload.error.name, 'local');
+      dispatch({
+        type: 'error',
+        error: payload.error.name
+      });
+    },
+    onClose: function onClose() {
+      dispatch({
+        type: 'close'
+      });
+    }
+  }));
+};