@wordpress/media-utils 5.6.0 → 5.8.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
+### New Features
+
+-   Rewrite in TypeScript, exporting all the individual utility functions.
+
+## 5.7.0 (2024-09-05)
+
 ## 5.6.0 (2024-08-21)
 
 ## 5.5.0 (2024-08-07)

package/README.md

@@ -13,6 +13,75 @@ npm install @wordpress/media-utils --save
 
 _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
 
+## API
+
+<!-- START TOKEN(Autogenerated API docs) -->
+
+### Attachment
+
+Undocumented declaration.
+
+### MediaUpload
+
+Undocumented declaration.
+
+### RestAttachment
+
+Undocumented declaration.
+
+### transformAttachment
+
+Transforms an attachment object from the REST API shape into the shape expected by the block editor and other consumers.
+
+_Parameters_
+
+-   _attachment_ `RestAttachment`: REST API attachment object.
+
+### uploadMedia
+
+Upload a media file when the file upload button is activated or when adding a file to the editor via drag & drop.
+
+_Parameters_
+
+-   _$0_ `UploadMediaArgs`: Parameters object passed to the function.
+-   _$0.allowedTypes_ `UploadMediaArgs[ 'allowedTypes' ]`: Array with the types of media that can be uploaded, if unset all types are allowed.
+-   _$0.additionalData_ `UploadMediaArgs[ 'additionalData' ]`: Additional data to include in the request.
+-   _$0.filesList_ `UploadMediaArgs[ 'filesList' ]`: List of files.
+-   _$0.maxUploadFileSize_ `UploadMediaArgs[ 'maxUploadFileSize' ]`: Maximum upload size in bytes allowed for the site.
+-   _$0.onError_ `UploadMediaArgs[ 'onError' ]`: Function called when an error happens.
+-   _$0.onFileChange_ `UploadMediaArgs[ 'onFileChange' ]`: Function called each time a file or a temporary representation of the file is available.
+-   _$0.wpAllowedMimeTypes_ `UploadMediaArgs[ 'wpAllowedMimeTypes' ]`: List of allowed mime types and file extensions.
+-   _$0.signal_ `UploadMediaArgs[ 'signal' ]`: Abort signal.
+
+### validateFileSize
+
+Verifies whether the file is within the file upload size limits for the site.
+
+_Parameters_
+
+-   _file_ `File`: File object.
+-   _maxUploadFileSize_ `number`: Maximum upload size in bytes allowed for the site.
+
+### validateMimeType
+
+Verifies if the caller (e.g. a block) supports this mime type.
+
+_Parameters_
+
+-   _file_ `File`: File object.
+-   _allowedTypes_ `string[]`: List of allowed mime types.
+
+### validateMimeTypeForUser
+
+Verifies if the user is allowed to upload this mime type.
+
+_Parameters_
+
+-   _file_ `File`: File object.
+-   _wpAllowedMimeTypes_ `Record< string, string > | null`: List of allowed mime types and file extensions.
+
+<!-- END TOKEN(Autogenerated API docs) -->
+
 ## Usage
 
 ### uploadMedia
@@ -43,7 +112,7 @@ Beware that first onFileChange is called with temporary blob URLs and then with
 ### MediaUpload
 
 Media upload component provides a UI button that allows users to open the WordPress media library. It is normally used in conjunction with the filter `editor.MediaUpload`.
-The component follows the interface specified in [https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload/README.md](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload/README.md), and more details regarding its usage can be checked there.
+The component follows the interface specified in <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload/README.md>, and more details regarding its usage can be checked there.
 
 ## Contributing to this package
 

package/build/index.js

@@ -3,9 +3,47 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  uploadMedia: true,
+  transformAttachment: true,
+  validateFileSize: true,
+  validateMimeType: true,
+  validateMimeTypeForUser: true
+};
+Object.defineProperty(exports, "transformAttachment", {
+  enumerable: true,
+  get: function () {
+    return _transformAttachment.transformAttachment;
+  }
+});
+Object.defineProperty(exports, "uploadMedia", {
+  enumerable: true,
+  get: function () {
+    return _uploadMedia.uploadMedia;
+  }
+});
+Object.defineProperty(exports, "validateFileSize", {
+  enumerable: true,
+  get: function () {
+    return _validateFileSize.validateFileSize;
+  }
+});
+Object.defineProperty(exports, "validateMimeType", {
+  enumerable: true,
+  get: function () {
+    return _validateMimeType.validateMimeType;
+  }
+});
+Object.defineProperty(exports, "validateMimeTypeForUser", {
+  enumerable: true,
+  get: function () {
+    return _validateMimeTypeForUser.validateMimeTypeForUser;
+  }
+});
 var _components = require("./components");
 Object.keys(_components).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _components[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -14,15 +52,9 @@ Object.keys(_components).forEach(function (key) {
     }
   });
 });
-var _utils = require("./utils");
-Object.keys(_utils).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _utils[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _utils[key];
-    }
-  });
-});
+var _uploadMedia = require("./utils/upload-media");
+var _transformAttachment = require("./utils/transform-attachment");
+var _validateFileSize = require("./utils/validate-file-size");
+var _validateMimeType = require("./utils/validate-mime-type");
+var _validateMimeTypeForUser = require("./utils/validate-mime-type-for-user");
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_utils"],"sources":["@wordpress/media-utils/src/index.js"],"sourcesContent":["export * from './components';\nexport * from './utils';\n"],"mappings":";;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,WAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,WAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,WAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,MAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,MAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,MAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,MAAA,CAAAL,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":["_components","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_uploadMedia","_transformAttachment","_validateFileSize","_validateMimeType","_validateMimeTypeForUser"],"sources":["@wordpress/media-utils/src/index.ts"],"sourcesContent":["export * from './components';\n\nexport { uploadMedia } from './utils/upload-media';\nexport { transformAttachment } from './utils/transform-attachment';\nexport { validateFileSize } from './utils/validate-file-size';\nexport { validateMimeType } from './utils/validate-mime-type';\nexport { validateMimeTypeForUser } from './utils/validate-mime-type-for-user';\n\nexport type { Attachment, RestAttachment } from './utils/types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,WAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAL,WAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAb,WAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AAEA,IAAAS,YAAA,GAAAb,OAAA;AACA,IAAAc,oBAAA,GAAAd,OAAA;AACA,IAAAe,iBAAA,GAAAf,OAAA;AACA,IAAAgB,iBAAA,GAAAhB,OAAA;AACA,IAAAiB,wBAAA,GAAAjB,OAAA","ignoreList":[]}

package/build/utils/flatten-form-data.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.flattenFormData = flattenFormData;
+/**
+ * Determines whether the passed argument appears to be a plain object.
+ *
+ * @param data The object to inspect.
+ */
+function isPlainObject(data) {
+  return data !== null && typeof data === 'object' && Object.getPrototypeOf(data) === Object.prototype;
+}
+
+/**
+ * Recursively flatten data passed to form data, to allow using multi-level objects.
+ *
+ * @param {FormData}      formData Form data object.
+ * @param {string}        key      Key to amend to form data object
+ * @param {string|Object} data     Data to be amended to form data.
+ */
+function flattenFormData(formData, key, data) {
+  if (isPlainObject(data)) {
+    for (const [name, value] of Object.entries(data)) {
+      flattenFormData(formData, `${key}[${name}]`, value);
+    }
+  } else if (data !== undefined) {
+    formData.append(key, String(data));
+  }
+}
+//# sourceMappingURL=flatten-form-data.js.map

package/build/utils/flatten-form-data.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isPlainObject","data","Object","getPrototypeOf","prototype","flattenFormData","formData","key","name","value","entries","undefined","append","String"],"sources":["@wordpress/media-utils/src/utils/flatten-form-data.ts"],"sourcesContent":["/**\n * Determines whether the passed argument appears to be a plain object.\n *\n * @param data The object to inspect.\n */\nfunction isPlainObject( data: unknown ): data is Record< string, unknown > {\n\treturn (\n\t\tdata !== null &&\n\t\ttypeof data === 'object' &&\n\t\tObject.getPrototypeOf( data ) === Object.prototype\n\t);\n}\n\n/**\n * Recursively flatten data passed to form data, to allow using multi-level objects.\n *\n * @param {FormData}      formData Form data object.\n * @param {string}        key      Key to amend to form data object\n * @param {string|Object} data     Data to be amended to form data.\n */\nexport function flattenFormData(\n\tformData: FormData,\n\tkey: string,\n\tdata: string | undefined | Record< string, string >\n) {\n\tif ( isPlainObject( data ) ) {\n\t\tfor ( const [ name, value ] of Object.entries( data ) ) {\n\t\t\tflattenFormData( formData, `${ key }[${ name }]`, value );\n\t\t}\n\t} else if ( data !== undefined ) {\n\t\tformData.append( key, String( data ) );\n\t}\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA,SAASA,aAAaA,CAAEC,IAAa,EAAsC;EAC1E,OACCA,IAAI,KAAK,IAAI,IACb,OAAOA,IAAI,KAAK,QAAQ,IACxBC,MAAM,CAACC,cAAc,CAAEF,IAAK,CAAC,KAAKC,MAAM,CAACE,SAAS;AAEpD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,eAAeA,CAC9BC,QAAkB,EAClBC,GAAW,EACXN,IAAmD,EAClD;EACD,IAAKD,aAAa,CAAEC,IAAK,CAAC,EAAG;IAC5B,KAAM,MAAM,CAAEO,IAAI,EAAEC,KAAK,CAAE,IAAIP,MAAM,CAACQ,OAAO,CAAET,IAAK,CAAC,EAAG;MACvDI,eAAe,CAAEC,QAAQ,EAAG,GAAGC,GAAK,IAAIC,IAAM,GAAE,EAAEC,KAAM,CAAC;IAC1D;EACD,CAAC,MAAM,IAAKR,IAAI,KAAKU,SAAS,EAAG;IAChCL,QAAQ,CAACM,MAAM,CAAEL,GAAG,EAAEM,MAAM,CAAEZ,IAAK,CAAE,CAAC;EACvC;AACD","ignoreList":[]}

package/build/utils/get-mime-types-array.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMimeTypesArray = getMimeTypesArray;
+/**
+ * Browsers may use unexpected mime types, and they differ from browser to browser.
+ * This function computes a flexible array of mime types from the mime type structured provided by the server.
+ * Converts { jpg|jpeg|jpe: "image/jpeg" } into [ "image/jpeg", "image/jpg", "image/jpeg", "image/jpe" ]
+ *
+ * @param {?Object} wpMimeTypesObject Mime type object received from the server.
+ *                                    Extensions are keys separated by '|' and values are mime types associated with an extension.
+ *
+ * @return An array of mime types or null
+ */
+function getMimeTypesArray(wpMimeTypesObject) {
+  if (!wpMimeTypesObject) {
+    return null;
+  }
+  return Object.entries(wpMimeTypesObject).flatMap(([extensionsString, mime]) => {
+    const [type] = mime.split('/');
+    const extensions = extensionsString.split('|');
+    return [mime, ...extensions.map(extension => `${type}/${extension}`)];
+  });
+}
+//# sourceMappingURL=get-mime-types-array.js.map

package/build/utils/get-mime-types-array.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getMimeTypesArray","wpMimeTypesObject","Object","entries","flatMap","extensionsString","mime","type","split","extensions","map","extension"],"sources":["@wordpress/media-utils/src/utils/get-mime-types-array.ts"],"sourcesContent":["/**\n * Browsers may use unexpected mime types, and they differ from browser to browser.\n * This function computes a flexible array of mime types from the mime type structured provided by the server.\n * Converts { jpg|jpeg|jpe: \"image/jpeg\" } into [ \"image/jpeg\", \"image/jpg\", \"image/jpeg\", \"image/jpe\" ]\n *\n * @param {?Object} wpMimeTypesObject Mime type object received from the server.\n *                                    Extensions are keys separated by '|' and values are mime types associated with an extension.\n *\n * @return An array of mime types or null\n */\nexport function getMimeTypesArray(\n\twpMimeTypesObject?: Record< string, string > | null\n) {\n\tif ( ! wpMimeTypesObject ) {\n\t\treturn null;\n\t}\n\treturn Object.entries( wpMimeTypesObject ).flatMap(\n\t\t( [ extensionsString, mime ] ) => {\n\t\t\tconst [ type ] = mime.split( '/' );\n\t\t\tconst extensions = extensionsString.split( '|' );\n\t\t\treturn [\n\t\t\t\tmime,\n\t\t\t\t...extensions.map(\n\t\t\t\t\t( extension ) => `${ type }/${ extension }`\n\t\t\t\t),\n\t\t\t];\n\t\t}\n\t);\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,iBAAiBA,CAChCC,iBAAmD,EAClD;EACD,IAAK,CAAEA,iBAAiB,EAAG;IAC1B,OAAO,IAAI;EACZ;EACA,OAAOC,MAAM,CAACC,OAAO,CAAEF,iBAAkB,CAAC,CAACG,OAAO,CACjD,CAAE,CAAEC,gBAAgB,EAAEC,IAAI,CAAE,KAAM;IACjC,MAAM,CAAEC,IAAI,CAAE,GAAGD,IAAI,CAACE,KAAK,CAAE,GAAI,CAAC;IAClC,MAAMC,UAAU,GAAGJ,gBAAgB,CAACG,KAAK,CAAE,GAAI,CAAC;IAChD,OAAO,CACNF,IAAI,EACJ,GAAGG,UAAU,CAACC,GAAG,CACdC,SAAS,IAAO,GAAGJ,IAAM,IAAII,SAAW,EAC3C,CAAC,CACD;EACF,CACD,CAAC;AACF","ignoreList":[]}

package/build/utils/transform-attachment.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformAttachment = transformAttachment;
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Transforms an attachment object from the REST API shape into the shape expected by the block editor and other consumers.
+ *
+ * @param attachment REST API attachment object.
+ */
+function transformAttachment(attachment) {
+  var _attachment$caption$r;
+  // eslint-disable-next-line camelcase
+  const {
+    alt_text,
+    source_url,
+    ...savedMediaProps
+  } = attachment;
+  return {
+    ...savedMediaProps,
+    alt: attachment.alt_text,
+    caption: (_attachment$caption$r = attachment.caption?.raw) !== null && _attachment$caption$r !== void 0 ? _attachment$caption$r : '',
+    title: attachment.title.raw,
+    url: attachment.source_url,
+    poster: attachment._embedded?.['wp:featuredmedia']?.[0]?.source_url || undefined
+  };
+}
+//# sourceMappingURL=transform-attachment.js.map

package/build/utils/transform-attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["transformAttachment","attachment","_attachment$caption$r","alt_text","source_url","savedMediaProps","alt","caption","raw","title","url","poster","_embedded","undefined"],"sources":["@wordpress/media-utils/src/utils/transform-attachment.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Attachment, RestAttachment } from './types';\n\n/**\n * Transforms an attachment object from the REST API shape into the shape expected by the block editor and other consumers.\n *\n * @param attachment REST API attachment object.\n */\nexport function transformAttachment( attachment: RestAttachment ): Attachment {\n\t// eslint-disable-next-line camelcase\n\tconst { alt_text, source_url, ...savedMediaProps } = attachment;\n\treturn {\n\t\t...savedMediaProps,\n\t\talt: attachment.alt_text,\n\t\tcaption: attachment.caption?.raw ?? '',\n\t\ttitle: attachment.title.raw,\n\t\turl: attachment.source_url,\n\t\tposter:\n\t\t\tattachment._embedded?.[ 'wp:featuredmedia' ]?.[ 0 ]?.source_url ||\n\t\t\tundefined,\n\t};\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACO,SAASA,mBAAmBA,CAAEC,UAA0B,EAAe;EAAA,IAAAC,qBAAA;EAC7E;EACA,MAAM;IAAEC,QAAQ;IAAEC,UAAU;IAAE,GAAGC;EAAgB,CAAC,GAAGJ,UAAU;EAC/D,OAAO;IACN,GAAGI,eAAe;IAClBC,GAAG,EAAEL,UAAU,CAACE,QAAQ;IACxBI,OAAO,GAAAL,qBAAA,GAAED,UAAU,CAACM,OAAO,EAAEC,GAAG,cAAAN,qBAAA,cAAAA,qBAAA,GAAI,EAAE;IACtCO,KAAK,EAAER,UAAU,CAACQ,KAAK,CAACD,GAAG;IAC3BE,GAAG,EAAET,UAAU,CAACG,UAAU;IAC1BO,MAAM,EACLV,UAAU,CAACW,SAAS,GAAI,kBAAkB,CAAE,GAAI,CAAC,CAAE,EAAER,UAAU,IAC/DS;EACF,CAAC;AACF","ignoreList":[]}

package/build/utils/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/build/utils/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["@wordpress/media-utils/src/utils/types.ts"],"sourcesContent":["/**\n * A media attachment object in a REST API context.\n *\n * Simplified version of what's defined in the wp-types package.\n *\n * @see https://www.npmjs.com/package/wp-types\n */\ninterface WP_REST_API_Attachment {\n\t/**\n\t * Unique identifier for the attachment.\n\t */\n\tid: number;\n\t/**\n\t * The ID of the featured media for the post.\n\t */\n\tfeatured_media: number;\n\t/**\n\t * URL to the attachment.\n\t */\n\tlink: string;\n\t/**\n\t * The date the attachment was published, in the site's timezone.\n\t */\n\tdate: string;\n\t/**\n\t * The date the attachment was published, as GMT.\n\t */\n\tdate_gmt: string;\n\t/**\n\t * The date the attachment was last modified, in the site's timezone.\n\t */\n\tmodified: string;\n\t/**\n\t * The date the attachment was last modified, as GMT.\n\t */\n\tmodified_gmt: string;\n\t/**\n\t * An alphanumeric identifier for the attachment unique to its type.\n\t */\n\tslug: string;\n\t/**\n\t * A named status for the attachment.\n\t */\n\tstatus: string;\n\t/**\n\t * Type of Post for the attachment.\n\t */\n\ttype: 'attachment';\n\t/**\n\t * Alternative text to display when attachment is not displayed.\n\t */\n\talt_text: string;\n\t/**\n\t * The attachment caption.\n\t */\n\tcaption: {\n\t\t/**\n\t\t * Caption for the attachment, as it exists in the database. Only present when using the 'edit' context.\n\t\t */\n\t\traw?: string;\n\t\t/**\n\t\t * HTML caption for the attachment, transformed for display.\n\t\t */\n\t\trendered: string;\n\t};\n\t/**\n\t * The attachment description.\n\t */\n\tdescription: {\n\t\t/**\n\t\t * Description for the attachment, as it exists in the database. Only present when using the 'edit' context.\n\t\t */\n\t\traw?: string;\n\t\t/**\n\t\t * HTML description for the attachment, transformed for display.\n\t\t */\n\t\trendered: string;\n\t};\n\t/**\n\t * Attachment type.\n\t */\n\tmedia_type: 'image' | 'file';\n\t/**\n\t * The attachment MIME type.\n\t */\n\tmime_type: string;\n\t/**\n\t * Details about the media file, specific to its type.\n\t */\n\tmedia_details: {\n\t\t[ k: string ]: unknown;\n\t};\n\t/**\n\t * The ID for the associated post of the attachment.\n\t */\n\tpost: number | null;\n\t/**\n\t * URL to the original attachment file.\n\t */\n\tsource_url: string;\n\t/**\n\t * List of the missing image sizes of the attachment.  Only present when using the 'edit' context.\n\t */\n\tmissing_image_sizes?: string[];\n\t/**\n\t * Permalink template for the attachment. Only present when using the 'edit' context and the post type is public.\n\t */\n\tpermalink_template?: string;\n\t/**\n\t * Slug automatically generated from the attachment title. Only present when using the 'edit' context and the post type is public.\n\t */\n\tgenerated_slug?: string;\n\t/**\n\t * An array of the class names for the post container element.\n\t */\n\tclass_list: string[];\n\t/**\n\t * The title for the attachment.\n\t */\n\ttitle: {\n\t\t/**\n\t\t * Title for the attachment, as it exists in the database. Only present when using the 'edit' context.\n\t\t */\n\t\traw?: string;\n\t\t/**\n\t\t * HTML title for the attachment, transformed for display.\n\t\t */\n\t\trendered: string;\n\t};\n\t/**\n\t * The ID for the author of the attachment.\n\t */\n\tauthor: number;\n\t/**\n\t * Whether or not comments are open on the attachment.\n\t */\n\tcomment_status: string;\n\t/**\n\t * Whether or not the attachment can be pinged.\n\t */\n\tping_status: string;\n\t/**\n\t * Meta fields.\n\t */\n\tmeta:\n\t\t| []\n\t\t| {\n\t\t\t\t[ k: string ]: unknown;\n\t\t  };\n\t/**\n\t * The theme file to use to display the attachment.\n\t */\n\ttemplate: string;\n\t_links: {\n\t\t[ k: string ]: {\n\t\t\thref: string;\n\t\t\tembeddable?: boolean;\n\t\t\t[ k: string ]: unknown;\n\t\t}[];\n\t};\n\t/**\n\t * The embedded representation of relations. Only present when the '_embed' query parameter is set.\n\t */\n\t_embedded?: {\n\t\t/**\n\t\t * The author of the post.\n\t\t */\n\t\tauthor: unknown[];\n\t\t/**\n\t\t * The featured image post.\n\t\t */\n\t\t'wp:featuredmedia'?: WP_REST_API_Attachment[];\n\t\t[ k: string ]: unknown;\n\t};\n\t[ k: string ]: unknown;\n}\n\n/**\n * REST API attachment object with additional fields added by this project.\n */\nexport interface RestAttachment extends WP_REST_API_Attachment {}\n\ntype BetterOmit< T, K extends PropertyKey > = {\n\t[ P in keyof T as P extends K ? never : P ]: T[ P ];\n};\n\n/**\n * Transformed attachment object.\n */\nexport type Attachment = BetterOmit<\n\tRestAttachment,\n\t'alt_text' | 'source_url' | 'caption' | 'title'\n> & {\n\talt: WP_REST_API_Attachment[ 'alt_text' ];\n\tcaption: WP_REST_API_Attachment[ 'caption' ][ 'raw' ] & string;\n\ttitle: WP_REST_API_Attachment[ 'title' ][ 'raw' ];\n\turl: WP_REST_API_Attachment[ 'source_url' ];\n\tposter?: WP_REST_API_Attachment[ 'source_url' ];\n};\n\nexport type OnChangeHandler = ( attachments: Partial< Attachment >[] ) => void;\nexport type OnSuccessHandler = ( attachments: Partial< Attachment >[] ) => void;\nexport type OnErrorHandler = ( error: Error ) => void;\n\nexport type CreateRestAttachment = Partial< RestAttachment >;\n\nexport type AdditionalData = BetterOmit< CreateRestAttachment, 'meta' >;\n"],"mappings":"","ignoreList":[]}

package/build/utils/upload-error.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UploadError = void 0;
+/**
+ * MediaError class.
+ *
+ * Small wrapper around the `Error` class
+ * to hold an error code and a reference to a file object.
+ */
+class UploadError extends Error {
+  constructor({
+    code,
+    message,
+    file,
+    cause
+  }) {
+    super(message, {
+      cause
+    });
+    Object.setPrototypeOf(this, new.target.prototype);
+    this.code = code;
+    this.file = file;
+  }
+}
+exports.UploadError = UploadError;
+//# sourceMappingURL=upload-error.js.map

package/build/utils/upload-error.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["UploadError","Error","constructor","code","message","file","cause","Object","setPrototypeOf","new","target","prototype","exports"],"sources":["@wordpress/media-utils/src/utils/upload-error.ts"],"sourcesContent":["interface UploadErrorArgs {\n\tcode: string;\n\tmessage: string;\n\tfile: File;\n\tcause?: Error;\n}\n\n/**\n * MediaError class.\n *\n * Small wrapper around the `Error` class\n * to hold an error code and a reference to a file object.\n */\nexport class UploadError extends Error {\n\tcode: string;\n\tfile: File;\n\n\tconstructor( { code, message, file, cause }: UploadErrorArgs ) {\n\t\tsuper( message, { cause } );\n\n\t\tObject.setPrototypeOf( this, new.target.prototype );\n\n\t\tthis.code = code;\n\t\tthis.file = file;\n\t}\n}\n"],"mappings":";;;;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,WAAW,SAASC,KAAK,CAAC;EAItCC,WAAWA,CAAE;IAAEC,IAAI;IAAEC,OAAO;IAAEC,IAAI;IAAEC;EAAuB,CAAC,EAAG;IAC9D,KAAK,CAAEF,OAAO,EAAE;MAAEE;IAAM,CAAE,CAAC;IAE3BC,MAAM,CAACC,cAAc,CAAE,IAAI,EAAEC,GAAG,CAACC,MAAM,CAACC,SAAU,CAAC;IAEnD,IAAI,CAACR,IAAI,GAAGA,IAAI;IAChB,IAAI,CAACE,IAAI,GAAGA,IAAI;EACjB;AACD;AAACO,OAAA,CAAAZ,WAAA,GAAAA,WAAA","ignoreList":[]}

package/build/utils/upload-media.js

@@ -1,146 +1,81 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMimeTypesArray = getMimeTypesArray;
 exports.uploadMedia = uploadMedia;
-var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
-var _blob = require("@wordpress/blob");
 var _i18n = require("@wordpress/i18n");
+var _blob = require("@wordpress/blob");
+var _uploadToServer = require("./upload-to-server");
+var _validateMimeType = require("./validate-mime-type");
+var _validateMimeTypeForUser = require("./validate-mime-type-for-user");
+var _validateFileSize = require("./validate-file-size");
+var _uploadError = require("./upload-error");
 /**
  * WordPress dependencies
  */
 
-const noop = () => {};
-
 /**
- * Browsers may use unexpected mime types, and they differ from browser to browser.
- * This function computes a flexible array of mime types from the mime type structured provided by the server.
- * Converts { jpg|jpeg|jpe: "image/jpeg" } into [ "image/jpeg", "image/jpg", "image/jpeg", "image/jpe" ]
- * The computation of this array instead of directly using the object,
- * solves the problem in chrome where mp3 files have audio/mp3 as mime type instead of audio/mpeg.
- * https://bugs.chromium.org/p/chromium/issues/detail?id=227004
- *
- * @param {?Object} wpMimeTypesObject Mime type object received from the server.
- *                                    Extensions are keys separated by '|' and values are mime types associated with an extension.
- *
- * @return {?Array} An array of mime types or the parameter passed if it was "falsy".
+ * Internal dependencies
  */
-function getMimeTypesArray(wpMimeTypesObject) {
-  if (!wpMimeTypesObject) {
-    return wpMimeTypesObject;
-  }
-  return Object.entries(wpMimeTypesObject).map(([extensionsString, mime]) => {
-    const [type] = mime.split('/');
-    const extensions = extensionsString.split('|');
-    return [mime, ...extensions.map(extension => `${type}/${extension}`)];
-  }).flat();
-}
 
 /**
- *	Media Upload is used by audio, image, gallery, video, and file blocks to
- *	handle uploading a media file when a file upload button is activated.
- *
- *	TODO: future enhancement to add an upload indicator.
+ * Upload a media file when the file upload button is activated
+ * or when adding a file to the editor via drag & drop.
  *
- * @param {Object}   $0                    Parameters object passed to the function.
- * @param {?Array}   $0.allowedTypes       Array with the types of media that can be uploaded, if unset all types are allowed.
- * @param {?Object}  $0.additionalData     Additional data to include in the request.
- * @param {Array}    $0.filesList          List of files.
- * @param {?number}  $0.maxUploadFileSize  Maximum upload size in bytes allowed for the site.
- * @param {Function} $0.onError            Function called when an error happens.
- * @param {Function} $0.onFileChange       Function called each time a file or a temporary representation of the file is available.
- * @param {?Object}  $0.wpAllowedMimeTypes List of allowed mime types and file extensions.
+ * @param $0                    Parameters object passed to the function.
+ * @param $0.allowedTypes       Array with the types of media that can be uploaded, if unset all types are allowed.
+ * @param $0.additionalData     Additional data to include in the request.
+ * @param $0.filesList          List of files.
+ * @param $0.maxUploadFileSize  Maximum upload size in bytes allowed for the site.
+ * @param $0.onError            Function called when an error happens.
+ * @param $0.onFileChange       Function called each time a file or a temporary representation of the file is available.
+ * @param $0.wpAllowedMimeTypes List of allowed mime types and file extensions.
+ * @param $0.signal             Abort signal.
  */
-async function uploadMedia({
+function uploadMedia({
+  wpAllowedMimeTypes,
   allowedTypes,
   additionalData = {},
   filesList,
   maxUploadFileSize,
-  onError = noop,
+  onError,
   onFileChange,
-  wpAllowedMimeTypes = null
+  signal
 }) {
-  // Cast filesList to array.
-  const files = [...filesList];
+  const validFiles = [];
   const filesSet = [];
-  const setAndUpdateFiles = (idx, value) => {
-    (0, _blob.revokeBlobURL)(filesSet[idx]?.url);
-    filesSet[idx] = value;
-    onFileChange(filesSet.filter(Boolean));
-  };
-
-  // Allowed type specified by consumer.
-  const isAllowedType = fileType => {
-    if (!allowedTypes) {
-      return true;
+  const setAndUpdateFiles = (index, value) => {
+    if (filesSet[index]?.url) {
+      (0, _blob.revokeBlobURL)(filesSet[index].url);
     }
-    return allowedTypes.some(allowedType => {
-      // If a complete mimetype is specified verify if it matches exactly the mime type of the file.
-      if (allowedType.includes('/')) {
-        return allowedType === fileType;
-      }
-      // Otherwise a general mime type is used and we should verify if the file mimetype starts with it.
-      return fileType.startsWith(`${allowedType}/`);
-    });
-  };
-
-  // Allowed types for the current WP_User.
-  const allowedMimeTypesForUser = getMimeTypesArray(wpAllowedMimeTypes);
-  const isAllowedMimeTypeForUser = fileType => {
-    return allowedMimeTypesForUser.includes(fileType);
+    filesSet[index] = value;
+    onFileChange?.(filesSet.filter(attachment => attachment !== null));
   };
-  const validFiles = [];
-  for (const mediaFile of files) {
+  for (const mediaFile of filesList) {
     // Verify if user is allowed to upload this mime type.
     // Defer to the server when type not detected.
-    if (allowedMimeTypesForUser && mediaFile.type && !isAllowedMimeTypeForUser(mediaFile.type)) {
-      onError({
-        code: 'MIME_TYPE_NOT_ALLOWED_FOR_USER',
-        message: (0, _i18n.sprintf)(
-        // translators: %s: file name.
-        (0, _i18n.__)('%s: Sorry, you are not allowed to upload this file type.'), mediaFile.name),
-        file: mediaFile
-      });
+    try {
+      (0, _validateMimeTypeForUser.validateMimeTypeForUser)(mediaFile, wpAllowedMimeTypes);
+    } catch (error) {
+      onError?.(error);
       continue;
     }
 
-    // Check if the block supports this mime type.
+    // Check if the caller (e.g. a block) supports this mime type.
     // Defer to the server when type not detected.
-    if (mediaFile.type && !isAllowedType(mediaFile.type)) {
-      onError({
-        code: 'MIME_TYPE_NOT_SUPPORTED',
-        message: (0, _i18n.sprintf)(
-        // translators: %s: file name.
-        (0, _i18n.__)('%s: Sorry, this file type is not supported here.'), mediaFile.name),
-        file: mediaFile
-      });
+    try {
+      (0, _validateMimeType.validateMimeType)(mediaFile, allowedTypes);
+    } catch (error) {
+      onError?.(error);
       continue;
     }
 
     // Verify if file is greater than the maximum file upload size allowed for the site.
-    if (maxUploadFileSize && mediaFile.size > maxUploadFileSize) {
-      onError({
-        code: 'SIZE_ABOVE_LIMIT',
-        message: (0, _i18n.sprintf)(
-        // translators: %s: file name.
-        (0, _i18n.__)('%s: This file exceeds the maximum upload size for this site.'), mediaFile.name),
-        file: mediaFile
-      });
-      continue;
-    }
-
-    // Don't allow empty files to be uploaded.
-    if (mediaFile.size <= 0) {
-      onError({
-        code: 'EMPTY_FILE',
-        message: (0, _i18n.sprintf)(
-        // translators: %s: file name.
-        (0, _i18n.__)('%s: This file is empty.'), mediaFile.name),
-        file: mediaFile
-      });
+    try {
+      (0, _validateFileSize.validateFileSize)(mediaFile, maxUploadFileSize);
+    } catch (error) {
+      onError?.(error);
       continue;
     }
     validFiles.push(mediaFile);
@@ -150,64 +85,30 @@ async function uploadMedia({
     filesSet.push({
       url: (0, _blob.createBlobURL)(mediaFile)
     });
-    onFileChange(filesSet);
+    onFileChange?.(filesSet);
   }
-  for (let idx = 0; idx < validFiles.length; ++idx) {
-    const mediaFile = validFiles[idx];
+  validFiles.map(async (file, index) => {
     try {
-      var _savedMedia$caption$r;
-      const savedMedia = await createMediaFromFile(mediaFile, additionalData);
-      // eslint-disable-next-line camelcase
-      const {
-        alt_text,
-        source_url,
-        ...savedMediaProps
-      } = savedMedia;
-      const mediaObject = {
-        ...savedMediaProps,
-        alt: savedMedia.alt_text,
-        caption: (_savedMedia$caption$r = savedMedia.caption?.raw) !== null && _savedMedia$caption$r !== void 0 ? _savedMedia$caption$r : '',
-        title: savedMedia.title.raw,
-        url: savedMedia.source_url
-      };
-      setAndUpdateFiles(idx, mediaObject);
+      const attachment = await (0, _uploadToServer.uploadToServer)(file, additionalData, signal);
+      setAndUpdateFiles(index, attachment);
     } catch (error) {
       // Reset to empty on failure.
-      setAndUpdateFiles(idx, null);
+      setAndUpdateFiles(index, null);
       let message;
-      if (error.message) {
+      if (error instanceof Error) {
         message = error.message;
       } else {
         message = (0, _i18n.sprintf)(
         // translators: %s: file name
-        (0, _i18n.__)('Error while uploading file %s to the media library.'), mediaFile.name);
+        (0, _i18n.__)('Error while uploading file %s to the media library.'), file.name);
       }
-      onError({
+      onError?.(new _uploadError.UploadError({
         code: 'GENERAL',
         message,
-        file: mediaFile
-      });
+        file,
+        cause: error instanceof Error ? error : undefined
+      }));
     }
-  }
-}
-
-/**
- * @param {File}    file           Media File to Save.
- * @param {?Object} additionalData Additional data to include in the request.
- *
- * @return {Promise} Media Object Promise.
- */
-function createMediaFromFile(file, additionalData) {
-  // Create upload payload.
-  const data = new window.FormData();
-  data.append('file', file, file.name || file.type.replace('/', '.'));
-  if (additionalData) {
-    Object.entries(additionalData).forEach(([key, value]) => data.append(key, value));
-  }
-  return (0, _apiFetch.default)({
-    path: '/wp/v2/media',
-    body: data,
-    method: 'POST'
   });
 }
 //# sourceMappingURL=upload-media.js.map