@atlaskit/media-picker 64.3.0 → 64.4.0

package/dist/cjs/service/uploadServiceImpl.js

@@ -29,21 +29,19 @@ var UploadServiceImpl = /*#__PURE__*/function () {
       var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(cancellableFileUpload, fileId, traceContext) {
         var mediaFile;
         return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                mediaFile = cancellableFileUpload.mediaFile;
-                _this.emit('file-converting', {
-                  file: mediaFile,
-                  traceContext: traceContext
-                });
-                cancellableFileUpload.cancel = function () {
-                  _this.releaseCancellableFile(mediaFile);
-                };
-              case 3:
-              case "end":
-                return _context.stop();
-            }
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              mediaFile = cancellableFileUpload.mediaFile;
+              _this.emit('file-converting', {
+                file: mediaFile,
+                traceContext: traceContext
+              });
+              cancellableFileUpload.cancel = function () {
+                _this.releaseCancellableFile(mediaFile);
+              };
+            case 3:
+            case "end":
+              return _context.stop();
           }
         }, _callee);
       }));
@@ -110,121 +108,171 @@ var UploadServiceImpl = /*#__PURE__*/function () {
     }
   }, {
     key: "addFilesWithSource",
-    value: function addFilesWithSource(files, featureFlags) {
-      var _this2 = this;
-      if (files.length === 0) {
-        return;
-      }
-      var creationDate = Date.now();
-      var userMediaClient = this.userMediaClient,
-        tenantMediaClient = this.tenantMediaClient,
-        shouldCopyFileToRecents = this.shouldCopyFileToRecents;
-      var mediaClient = shouldCopyFileToRecents ? tenantMediaClient : userMediaClient;
-      var _this$tenantUploadPar = this.tenantUploadParams,
-        collectionTentant = _this$tenantUploadPar.collection,
-        expireAfter = _this$tenantUploadPar.expireAfter;
-      var collection = shouldCopyFileToRecents ? collectionTentant : _constants.RECENTS_COLLECTION;
-      if (!mediaClient) {
-        return;
-      }
-      var touchFileDescriptors = [];
-      for (var i = 0; i < files.length; i++) {
-        var replaceFileId = files[i].replaceFileId;
-        touchFileDescriptors.push({
-          fileId: replaceFileId || (0, _v.default)(),
-          occurrenceKey: (0, _v.default)(),
-          collection: collection,
-          expireAfter: expireAfter
-        });
-      }
-      var traceContext = {
-        traceId: (0, _mediaCommon.getRandomHex)(8)
-      };
-      var promisedTouchFiles = mediaClient.file.touchFiles(touchFileDescriptors, collection, traceContext);
-      var cancellableFileUploads = files.map(function (fileWithSource, i) {
-        var file = fileWithSource.file,
-          source = fileWithSource.source;
-        var _touchFileDescriptors = touchFileDescriptors[i],
-          id = _touchFileDescriptors.fileId,
-          occurrenceKey = _touchFileDescriptors.occurrenceKey;
-        var deferredUploadId = promisedTouchFiles.then(function (touchedFiles) {
-          var touchedFile = touchedFiles.created.find(function (touchedFile) {
-            return touchedFile.fileId === id;
-          });
-          if (!touchedFile) {
-            // TODO No one seems to be caring about this error
-            throw new Error('Cant retrieve uploadId from result of touch endpoint call');
-          }
-          return touchedFile.uploadId;
-        }).catch(function (error) {
-          // note: any failures in this block will result in an error event being bubbled as required
-          if (error instanceof _mediaClient.RequestError) {
-            var requestError = error;
-            if (requestError.metadata && requestError.metadata.statusCode === 409) {
-              return mediaClient.mediaStore.createUpload(1, collection, traceContext).then(function (res) {
-                return res.data[0].id;
-              });
-            }
-          }
-          throw error;
-        });
-        var uploadableFile = {
-          collection: collection,
-          content: file,
-          name: file.name,
-          mimeType: file.type
-        };
-        var uploadableUpfrontIds = {
-          id: id,
-          occurrenceKey: occurrenceKey,
-          deferredUploadId: deferredUploadId
-        };
-        var controller = _this2.createUploadController();
-        var sourceFileObservable = mediaClient.file.upload(uploadableFile, controller, uploadableUpfrontIds, traceContext, featureFlags);
-        var mediaFile = {
-          id: id,
-          name: file.name,
-          size: file.size,
-          creationDate: creationDate,
-          type: file.type,
-          occurrenceKey: occurrenceKey
-        };
-        var cancellableFileUpload = {
-          mediaFile: mediaFile,
-          file: file,
-          source: source,
-          cancel: function cancel() {
-            // we can't do "cancellableFileUpload.cancel = controller.abort" because will change the "this" mediaClient
-            controller.abort();
-          }
-        };
-        var onFileSuccess = _this2.onFileSuccess.bind(_this2);
-        sourceFileObservable.subscribe({
-          next: function next(state) {
-            if (state.status === 'processing') {
-              this.unsubscribe();
-              if (shouldCopyFileToRecents) {
-                mediaClient.emit('file-added', state);
-                _mediaClient.globalMediaEventEmitter.emit('file-added', state);
+    value: function () {
+      var _addFilesWithSource = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(files, featureFlags) {
+        var _this2 = this;
+        var creationDate, userMediaClient, tenantMediaClient, shouldCopyFileToRecents, mediaClient, _this$tenantUploadPar, collectionTentant, expireAfter, collection, touchFileDescriptors, i, _files$i, replaceFileId, file, traceContext, touchedFiles, caughtError, cancellableFileUploads, filteredCancellableFileUploads, mediaFiles;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(files.length === 0)) {
+                _context2.next = 2;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 2:
+              creationDate = Date.now();
+              userMediaClient = this.userMediaClient, tenantMediaClient = this.tenantMediaClient, shouldCopyFileToRecents = this.shouldCopyFileToRecents;
+              mediaClient = shouldCopyFileToRecents ? tenantMediaClient : userMediaClient;
+              _this$tenantUploadPar = this.tenantUploadParams, collectionTentant = _this$tenantUploadPar.collection, expireAfter = _this$tenantUploadPar.expireAfter;
+              collection = shouldCopyFileToRecents ? collectionTentant : _constants.RECENTS_COLLECTION;
+              if (mediaClient) {
+                _context2.next = 9;
+                break;
               }
-              onFileSuccess(cancellableFileUpload, id, traceContext);
-            }
-          },
-          error: function error(_error) {
-            _this2.onFileError(mediaFile, 'upload_fail', _error, traceContext);
+              return _context2.abrupt("return");
+            case 9:
+              touchFileDescriptors = [];
+              for (i = 0; i < files.length; i++) {
+                _files$i = files[i], replaceFileId = _files$i.replaceFileId, file = _files$i.file;
+                touchFileDescriptors.push({
+                  fileId: replaceFileId || (0, _v.default)(),
+                  occurrenceKey: (0, _v.default)(),
+                  collection: collection,
+                  size: file.size,
+                  expireAfter: expireAfter
+                });
+              }
+              traceContext = {
+                traceId: (0, _mediaCommon.getRandomHex)(8)
+              };
+              _context2.prev = 12;
+              _context2.next = 15;
+              return mediaClient.file.touchFiles(touchFileDescriptors, collection, traceContext);
+            case 15:
+              touchedFiles = _context2.sent;
+              _context2.next = 21;
+              break;
+            case 18:
+              _context2.prev = 18;
+              _context2.t0 = _context2["catch"](12);
+              caughtError = _context2.t0;
+            case 21:
+              cancellableFileUploads = files.map(function (_ref2, i) {
+                var _touchedFiles, _touchedFiles2;
+                var file = _ref2.file,
+                  source = _ref2.source;
+                var _touchFileDescriptors = touchFileDescriptors[i],
+                  id = _touchFileDescriptors.fileId,
+                  occurrenceKey = _touchFileDescriptors.occurrenceKey;
+
+                // exclude rejected files from being uploaded
+                var rejectedFile = (_touchedFiles = touchedFiles) === null || _touchedFiles === void 0 ? void 0 : _touchedFiles.rejected.find(function (_ref3) {
+                  var rejectedFileId = _ref3.fileId;
+                  return rejectedFileId === id;
+                });
+                if (rejectedFile) {
+                  if (_this2.fileRejectionHandler) {
+                    _this2.fileRejectionHandler({
+                      reason: 'fileSizeLimitExceeded',
+                      file: file,
+                      limit: rejectedFile.error.limit
+                    });
+                  }
+                  return null;
+                }
+                var touchedFile = (_touchedFiles2 = touchedFiles) === null || _touchedFiles2 === void 0 ? void 0 : _touchedFiles2.created.find(function (touchedFile) {
+                  return touchedFile.fileId === id;
+                });
+                var deferredUploadId;
+                var isIdConflictError = caughtError && caughtError instanceof _mediaClient.RequestError && caughtError.metadata && caughtError.metadata.statusCode === 409;
+                if (touchedFile) {
+                  deferredUploadId = Promise.resolve(touchedFile.uploadId);
+                } else if (isIdConflictError) {
+                  // will occur when the backend receives a fileId that already exists in which case
+                  // we will create a single upload session for that file and use that uploadId
+                  deferredUploadId = mediaClient.mediaStore.createUpload(1, collection, traceContext).then(function (res) {
+                    return res.data[0].id;
+                  });
+                } else {
+                  // in the case of unexpected errors, we want to defer the throwing of the error
+                  // until after the files-added has been emitted,
+                  // allows editor to show a broken media card for unexpected errors
+                  deferredUploadId = Promise.reject(caughtError);
+                }
+                var uploadableFile = {
+                  collection: collection,
+                  content: file,
+                  name: file.name,
+                  mimeType: file.type
+                };
+                var uploadableUpfrontIds = {
+                  id: id,
+                  occurrenceKey: occurrenceKey,
+                  deferredUploadId: deferredUploadId
+                };
+                var controller = _this2.createUploadController();
+                var sourceFileObservable = mediaClient.file.upload(uploadableFile, controller, uploadableUpfrontIds, traceContext, featureFlags);
+                var mediaFile = {
+                  id: id,
+                  name: file.name,
+                  size: file.size,
+                  creationDate: creationDate,
+                  type: file.type,
+                  occurrenceKey: occurrenceKey
+                };
+                var cancellableFileUpload = {
+                  mediaFile: mediaFile,
+                  file: file,
+                  source: source,
+                  cancel: function cancel() {
+                    // we can't do "cancellableFileUpload.cancel = controller.abort" because will change the "this" mediaClient
+                    controller.abort();
+                  }
+                };
+                var _sourceFileObservable = sourceFileObservable.subscribe({
+                    next: function next(state) {
+                      if (state.status === 'processing') {
+                        unsubscribe();
+                        if (shouldCopyFileToRecents) {
+                          mediaClient.emit('file-added', state);
+                          _mediaClient.globalMediaEventEmitter.emit('file-added', state);
+                        }
+                        _this2.onFileSuccess(cancellableFileUpload, id, traceContext);
+                      }
+                    },
+                    error: function error(_error) {
+                      _this2.onFileError(mediaFile, 'upload_fail', _error, traceContext);
+                    }
+                  }),
+                  unsubscribe = _sourceFileObservable.unsubscribe;
+                _this2.cancellableFilesUploads[id] = cancellableFileUpload;
+                return cancellableFileUpload;
+              });
+              filteredCancellableFileUploads = cancellableFileUploads.filter(this.isCancellableFileUpload);
+              mediaFiles = filteredCancellableFileUploads.map(function (cancellableFileUpload) {
+                return cancellableFileUpload.mediaFile;
+              });
+              this.emit('files-added', {
+                files: mediaFiles,
+                traceContext: traceContext
+              });
+              this.emitPreviews(filteredCancellableFileUploads);
+            case 26:
+            case "end":
+              return _context2.stop();
           }
-        });
-        _this2.cancellableFilesUploads[id] = cancellableFileUpload;
-        return cancellableFileUpload;
-      });
-      var mediaFiles = cancellableFileUploads.map(function (cancellableFileUpload) {
-        return cancellableFileUpload.mediaFile;
-      });
-      this.emit('files-added', {
-        files: mediaFiles,
-        traceContext: traceContext
-      });
-      this.emitPreviews(cancellableFileUploads);
+        }, _callee2, this, [[12, 18]]);
+      }));
+      function addFilesWithSource(_x4, _x5) {
+        return _addFilesWithSource.apply(this, arguments);
+      }
+      return addFilesWithSource;
+    }()
+  }, {
+    key: "isCancellableFileUpload",
+    value: function isCancellableFileUpload(fileUpload) {
+      return fileUpload !== null;
     }
   }, {
     key: "cancel",
@@ -304,6 +352,11 @@ var UploadServiceImpl = /*#__PURE__*/function () {
     value: function releaseCancellableFile(mediaFile) {
       delete this.cancellableFilesUploads[mediaFile.id];
     }
+  }, {
+    key: "onFileRejection",
+    value: function onFileRejection(handler) {
+      this.fileRejectionHandler = handler;
+    }
   }]);
   return UploadServiceImpl;
 }();

package/dist/cjs/util/analytics.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.getPackageAttributes = getPackageAttributes;
 exports.getRequestMetadata = getRequestMetadata;
 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 = "64.3.0";
+var packageVersion = "64.4.0";
 function getPackageAttributes(componentName) {
   return {
     packageName: packageName,

package/dist/cjs/util/getPreviewFromBlob.js

@@ -20,39 +20,37 @@ function _getPreviewFromBlob() {
   _getPreviewFromBlob = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaType, file) {
     var dimensions;
     return _regenerator.default.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _context.t0 = mediaType;
-            _context.next = _context.t0 === 'image' ? 3 : _context.t0 === 'video' ? 3 : 9;
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.t0 = mediaType;
+          _context.next = _context.t0 === 'image' ? 3 : _context.t0 === 'video' ? 3 : 9;
+          break;
+        case 3:
+          _context.next = 5;
+          return (0, _mediaClient.getDimensionsFromBlob)(mediaType, file);
+        case 5:
+          dimensions = _context.sent;
+          if (!isUnknownDimensions(dimensions)) {
+            _context.next = 8;
             break;
-          case 3:
-            _context.next = 5;
-            return (0, _mediaClient.getDimensionsFromBlob)(mediaType, file);
-          case 5:
-            dimensions = _context.sent;
-            if (!isUnknownDimensions(dimensions)) {
-              _context.next = 8;
-              break;
-            }
-            return _context.abrupt("return", {
-              file: file,
-              scaleFactor: 1
-            });
-          case 8:
-            return _context.abrupt("return", {
-              file: file,
-              dimensions: dimensions,
-              scaleFactor: 1
-            });
-          case 9:
-            return _context.abrupt("return", {
-              file: file
-            });
-          case 10:
-          case "end":
-            return _context.stop();
-        }
+          }
+          return _context.abrupt("return", {
+            file: file,
+            scaleFactor: 1
+          });
+        case 8:
+          return _context.abrupt("return", {
+            file: file,
+            dimensions: dimensions,
+            scaleFactor: 1
+          });
+        case 9:
+          return _context.abrupt("return", {
+            file: file
+          });
+        case 10:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
   }));

package/dist/cjs/util/getPreviewFromImage.js

@@ -16,39 +16,37 @@ function _getPreviewFromImage() {
   _getPreviewFromImage = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file, devicePixelRatio) {
     var fileInfo, imageInfo, width, height, scaleFactor, preview;
     return _regenerator.default.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return (0, _mediaUi.getFileInfo)(file);
-          case 2:
-            fileInfo = _context.sent;
-            _context.next = 5;
-            return (0, _mediaUi.getImageInfo)(fileInfo);
-          case 5:
-            imageInfo = _context.sent;
-            if (!(imageInfo === null)) {
-              _context.next = 10;
-              break;
-            }
-            return _context.abrupt("return", {
-              file: file
-            });
-          case 10:
-            width = imageInfo.width, height = imageInfo.height, scaleFactor = imageInfo.scaleFactor;
-            preview = {
-              file: file,
-              dimensions: {
-                width: width,
-                height: height
-              },
-              scaleFactor: devicePixelRatio || scaleFactor
-            };
-            return _context.abrupt("return", preview);
-          case 13:
-          case "end":
-            return _context.stop();
-        }
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return (0, _mediaUi.getFileInfo)(file);
+        case 2:
+          fileInfo = _context.sent;
+          _context.next = 5;
+          return (0, _mediaUi.getImageInfo)(fileInfo);
+        case 5:
+          imageInfo = _context.sent;
+          if (!(imageInfo === null)) {
+            _context.next = 10;
+            break;
+          }
+          return _context.abrupt("return", {
+            file: file
+          });
+        case 10:
+          width = imageInfo.width, height = imageInfo.height, scaleFactor = imageInfo.scaleFactor;
+          preview = {
+            file: file,
+            dimensions: {
+              width: width,
+              height: height
+            },
+            scaleFactor: devicePixelRatio || scaleFactor
+          };
+          return _context.abrupt("return", preview);
+        case 13:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
   }));

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 = "64.3.0";
+var packageVersion = "64.4.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": "64.3.0"
+	"version": "64.4.0"
 }

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

@@ -87,6 +87,9 @@ export class DropzoneBase extends LocalUploadComponentReact {
         this.uploadService.addFiles(files, featureFlags);
       }
     });
+    /*
+     * Checks how many folders are uploaded in a single drag and drop. Then, fires an analytic event in accordance to this.
+     */
     _defineProperty(this, "fireAnalyticsForFolders", items => {
       //convert DataTransferItemList into an array of DataTransferItem(s)
       const toArray = Array.from(items);
@@ -105,6 +108,9 @@ export class DropzoneBase extends LocalUploadComponentReact {
         this.fireAnalyticsEvent('folderDroppedInto', folderCount);
       }
     });
+    /*
+     * Files dropped contains a directory. Thus, flatten the directory to return an array of Files.
+     */
     _defineProperty(this, "getFilesFromDragEvent", async dragEventItemList => {
       const items = dragEventItemList;
 
@@ -124,6 +130,7 @@ export class DropzoneBase extends LocalUploadComponentReact {
       // Filter Files using our defined blacklist
       return files.filter(file => !blacklist.includes(file.name));
     });
+    // Similar to the onDrop event, but for folders.
     _defineProperty(this, "onDropFolders", fileCount => {
       if (fileCount > 0) {
         this.sendAnalyticsAndEmitDragLeave(fileCount);
@@ -195,9 +202,6 @@ export class DropzoneBase extends LocalUploadComponentReact {
     // This is required for IE11
     return dataTransfer.files.length;
   }
-
-  // Similar to the onDrop event, but for folders.
-
   emitDragOver(payload) {
     if (!this.uiActive) {
       const {

package/dist/es2019/service/types.js

@@ -1,8 +1,8 @@
 export const MAX_FILE_SIZE_FOR_PREVIEW = 10e6; // 10 MB
 
-export let LocalFileSource;
-(function (LocalFileSource) {
+export let LocalFileSource = /*#__PURE__*/function (LocalFileSource) {
   LocalFileSource["PastedFile"] = "pastedFile";
   LocalFileSource["PastedScreenshot"] = "pastedScreenshot";
   LocalFileSource["LocalUpload"] = "localUpload";
-})(LocalFileSource || (LocalFileSource = {}));
+  return LocalFileSource;
+}({});