16
|
1 |
this["wp"] = this["wp"] || {}; this["wp"]["mediaUtils"] = |
|
2 |
/******/ (function(modules) { // webpackBootstrap |
|
3 |
/******/ // The module cache |
|
4 |
/******/ var installedModules = {}; |
|
5 |
/******/ |
|
6 |
/******/ // The require function |
|
7 |
/******/ function __webpack_require__(moduleId) { |
|
8 |
/******/ |
|
9 |
/******/ // Check if module is in cache |
|
10 |
/******/ if(installedModules[moduleId]) { |
|
11 |
/******/ return installedModules[moduleId].exports; |
|
12 |
/******/ } |
|
13 |
/******/ // Create a new module (and put it into the cache) |
|
14 |
/******/ var module = installedModules[moduleId] = { |
|
15 |
/******/ i: moduleId, |
|
16 |
/******/ l: false, |
|
17 |
/******/ exports: {} |
|
18 |
/******/ }; |
|
19 |
/******/ |
|
20 |
/******/ // Execute the module function |
|
21 |
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); |
|
22 |
/******/ |
|
23 |
/******/ // Flag the module as loaded |
|
24 |
/******/ module.l = true; |
|
25 |
/******/ |
|
26 |
/******/ // Return the exports of the module |
|
27 |
/******/ return module.exports; |
|
28 |
/******/ } |
|
29 |
/******/ |
|
30 |
/******/ |
|
31 |
/******/ // expose the modules object (__webpack_modules__) |
|
32 |
/******/ __webpack_require__.m = modules; |
|
33 |
/******/ |
|
34 |
/******/ // expose the module cache |
|
35 |
/******/ __webpack_require__.c = installedModules; |
|
36 |
/******/ |
|
37 |
/******/ // define getter function for harmony exports |
|
38 |
/******/ __webpack_require__.d = function(exports, name, getter) { |
|
39 |
/******/ if(!__webpack_require__.o(exports, name)) { |
|
40 |
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); |
|
41 |
/******/ } |
|
42 |
/******/ }; |
|
43 |
/******/ |
|
44 |
/******/ // define __esModule on exports |
|
45 |
/******/ __webpack_require__.r = function(exports) { |
|
46 |
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { |
|
47 |
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); |
|
48 |
/******/ } |
|
49 |
/******/ Object.defineProperty(exports, '__esModule', { value: true }); |
|
50 |
/******/ }; |
|
51 |
/******/ |
|
52 |
/******/ // create a fake namespace object |
|
53 |
/******/ // mode & 1: value is a module id, require it |
|
54 |
/******/ // mode & 2: merge all properties of value into the ns |
|
55 |
/******/ // mode & 4: return value when already ns object |
|
56 |
/******/ // mode & 8|1: behave like require |
|
57 |
/******/ __webpack_require__.t = function(value, mode) { |
|
58 |
/******/ if(mode & 1) value = __webpack_require__(value); |
|
59 |
/******/ if(mode & 8) return value; |
|
60 |
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; |
|
61 |
/******/ var ns = Object.create(null); |
|
62 |
/******/ __webpack_require__.r(ns); |
|
63 |
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); |
|
64 |
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); |
|
65 |
/******/ return ns; |
|
66 |
/******/ }; |
|
67 |
/******/ |
|
68 |
/******/ // getDefaultExport function for compatibility with non-harmony modules |
|
69 |
/******/ __webpack_require__.n = function(module) { |
|
70 |
/******/ var getter = module && module.__esModule ? |
|
71 |
/******/ function getDefault() { return module['default']; } : |
|
72 |
/******/ function getModuleExports() { return module; }; |
|
73 |
/******/ __webpack_require__.d(getter, 'a', getter); |
|
74 |
/******/ return getter; |
|
75 |
/******/ }; |
|
76 |
/******/ |
|
77 |
/******/ // Object.prototype.hasOwnProperty.call |
|
78 |
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; |
|
79 |
/******/ |
|
80 |
/******/ // __webpack_public_path__ |
|
81 |
/******/ __webpack_require__.p = ""; |
|
82 |
/******/ |
|
83 |
/******/ |
|
84 |
/******/ // Load entry module and return exports |
18
|
85 |
/******/ return __webpack_require__(__webpack_require__.s = "Lb+8"); |
16
|
86 |
/******/ }) |
|
87 |
/************************************************************************/ |
|
88 |
/******/ ({ |
|
89 |
|
18
|
90 |
/***/ "GRId": |
16
|
91 |
/***/ (function(module, exports) { |
|
92 |
|
18
|
93 |
(function() { module.exports = window["wp"]["element"]; }()); |
16
|
94 |
|
|
95 |
/***/ }), |
|
96 |
|
18
|
97 |
/***/ "Lb+8": |
16
|
98 |
/***/ (function(module, __webpack_exports__, __webpack_require__) { |
|
99 |
|
|
100 |
"use strict"; |
|
101 |
// ESM COMPAT FLAG |
|
102 |
__webpack_require__.r(__webpack_exports__); |
|
103 |
|
|
104 |
// EXPORTS |
|
105 |
__webpack_require__.d(__webpack_exports__, "MediaUpload", function() { return /* reexport */ media_upload; }); |
|
106 |
__webpack_require__.d(__webpack_exports__, "uploadMedia", function() { return /* reexport */ uploadMedia; }); |
|
107 |
|
18
|
108 |
// EXTERNAL MODULE: external "lodash" |
|
109 |
var external_lodash_ = __webpack_require__("YLtl"); |
16
|
110 |
|
18
|
111 |
// EXTERNAL MODULE: external ["wp","element"] |
|
112 |
var external_wp_element_ = __webpack_require__("GRId"); |
16
|
113 |
|
18
|
114 |
// EXTERNAL MODULE: external ["wp","i18n"] |
|
115 |
var external_wp_i18n_ = __webpack_require__("l3Sj"); |
16
|
116 |
|
|
117 |
// CONCATENATED MODULE: ./node_modules/@wordpress/media-utils/build-module/components/media-upload/index.js |
|
118 |
/** |
|
119 |
* External dependencies |
|
120 |
*/ |
|
121 |
|
|
122 |
/** |
|
123 |
* WordPress dependencies |
|
124 |
*/ |
|
125 |
|
|
126 |
|
|
127 |
|
18
|
128 |
const { |
|
129 |
wp |
|
130 |
} = window; |
|
131 |
const DEFAULT_EMPTY_GALLERY = []; |
16
|
132 |
/** |
|
133 |
* Prepares the Featured Image toolbars and frames. |
|
134 |
* |
|
135 |
* @return {wp.media.view.MediaFrame.Select} The default media workflow. |
|
136 |
*/ |
|
137 |
|
18
|
138 |
const getFeaturedImageMediaFrame = () => { |
16
|
139 |
return wp.media.view.MediaFrame.Select.extend({ |
|
140 |
/** |
|
141 |
* Enables the Set Featured Image Button. |
|
142 |
* |
|
143 |
* @param {Object} toolbar toolbar for featured image state |
|
144 |
* @return {void} |
|
145 |
*/ |
18
|
146 |
featuredImageToolbar(toolbar) { |
16
|
147 |
this.createSelectToolbar(toolbar, { |
|
148 |
text: wp.media.view.l10n.setFeaturedImage, |
|
149 |
state: this.options.state |
|
150 |
}); |
|
151 |
}, |
|
152 |
|
|
153 |
/** |
|
154 |
* Handle the edit state requirements of selected media item. |
|
155 |
* |
|
156 |
* @return {void} |
|
157 |
*/ |
18
|
158 |
editState() { |
|
159 |
const selection = this.state('featured-image').get('selection'); |
|
160 |
const view = new wp.media.view.EditImage({ |
16
|
161 |
model: selection.single(), |
|
162 |
controller: this |
|
163 |
}).render(); // Set the view to the EditImage frame using the selected image. |
|
164 |
|
|
165 |
this.content.set(view); // After bringing in the frame, load the actual editor via an ajax call. |
|
166 |
|
|
167 |
view.loadEditor(); |
|
168 |
}, |
|
169 |
|
|
170 |
/** |
|
171 |
* Create the default states. |
|
172 |
* |
|
173 |
* @return {void} |
|
174 |
*/ |
|
175 |
createStates: function createStates() { |
|
176 |
this.on('toolbar:create:featured-image', this.featuredImageToolbar, this); |
|
177 |
this.on('content:render:edit-image', this.editState, this); |
|
178 |
this.states.add([new wp.media.controller.FeaturedImage(), new wp.media.controller.EditImage({ |
|
179 |
model: this.options.editImage |
|
180 |
})]); |
|
181 |
} |
|
182 |
}); |
|
183 |
}; |
|
184 |
/** |
|
185 |
* Prepares the Gallery toolbars and frames. |
|
186 |
* |
|
187 |
* @return {wp.media.view.MediaFrame.Post} The default media workflow. |
|
188 |
*/ |
|
189 |
|
|
190 |
|
18
|
191 |
const getGalleryDetailsMediaFrame = () => { |
16
|
192 |
/** |
|
193 |
* Custom gallery details frame. |
|
194 |
* |
|
195 |
* @see https://github.com/xwp/wp-core-media-widgets/blob/905edbccfc2a623b73a93dac803c5335519d7837/wp-admin/js/widgets/media-gallery-widget.js |
|
196 |
* @class GalleryDetailsMediaFrame |
|
197 |
* @class |
|
198 |
*/ |
|
199 |
return wp.media.view.MediaFrame.Post.extend({ |
|
200 |
/** |
|
201 |
* Set up gallery toolbar. |
|
202 |
* |
|
203 |
* @return {void} |
|
204 |
*/ |
18
|
205 |
galleryToolbar() { |
|
206 |
const editing = this.state().get('editing'); |
16
|
207 |
this.toolbar.set(new wp.media.view.Toolbar({ |
|
208 |
controller: this, |
|
209 |
items: { |
|
210 |
insert: { |
|
211 |
style: 'primary', |
|
212 |
text: editing ? wp.media.view.l10n.updateGallery : wp.media.view.l10n.insertGallery, |
|
213 |
priority: 80, |
|
214 |
requires: { |
|
215 |
library: true |
|
216 |
}, |
|
217 |
|
|
218 |
/** |
|
219 |
* @fires wp.media.controller.State#update |
|
220 |
*/ |
18
|
221 |
click() { |
|
222 |
const controller = this.controller, |
|
223 |
state = controller.state(); |
16
|
224 |
controller.close(); |
|
225 |
state.trigger('update', state.get('library')); // Restore and reset the default state. |
|
226 |
|
|
227 |
controller.setState(controller.options.state); |
|
228 |
controller.reset(); |
|
229 |
} |
18
|
230 |
|
16
|
231 |
} |
|
232 |
} |
|
233 |
})); |
|
234 |
}, |
|
235 |
|
|
236 |
/** |
|
237 |
* Handle the edit state requirements of selected media item. |
|
238 |
* |
|
239 |
* @return {void} |
|
240 |
*/ |
18
|
241 |
editState() { |
|
242 |
const selection = this.state('gallery').get('selection'); |
|
243 |
const view = new wp.media.view.EditImage({ |
16
|
244 |
model: selection.single(), |
|
245 |
controller: this |
|
246 |
}).render(); // Set the view to the EditImage frame using the selected image. |
|
247 |
|
|
248 |
this.content.set(view); // After bringing in the frame, load the actual editor via an ajax call. |
|
249 |
|
|
250 |
view.loadEditor(); |
|
251 |
}, |
|
252 |
|
|
253 |
/** |
|
254 |
* Create the default states. |
|
255 |
* |
|
256 |
* @return {void} |
|
257 |
*/ |
|
258 |
createStates: function createStates() { |
|
259 |
this.on('toolbar:create:main-gallery', this.galleryToolbar, this); |
|
260 |
this.on('content:render:edit-image', this.editState, this); |
|
261 |
this.states.add([new wp.media.controller.Library({ |
|
262 |
id: 'gallery', |
|
263 |
title: wp.media.view.l10n.createGalleryTitle, |
|
264 |
priority: 40, |
|
265 |
toolbar: 'main-gallery', |
|
266 |
filterable: 'uploaded', |
|
267 |
multiple: 'add', |
|
268 |
editable: false, |
18
|
269 |
library: wp.media.query(Object(external_lodash_["defaults"])({ |
16
|
270 |
type: 'image' |
|
271 |
}, this.options.library)) |
|
272 |
}), new wp.media.controller.EditImage({ |
|
273 |
model: this.options.editImage |
|
274 |
}), new wp.media.controller.GalleryEdit({ |
|
275 |
library: this.options.selection, |
|
276 |
editing: this.options.editing, |
|
277 |
menu: 'gallery', |
|
278 |
displaySettings: false, |
|
279 |
multiple: true |
|
280 |
}), new wp.media.controller.GalleryAdd()]); |
|
281 |
} |
|
282 |
}); |
|
283 |
}; // the media library image object contains numerous attributes |
|
284 |
// we only need this set to display the image in the library |
|
285 |
|
|
286 |
|
18
|
287 |
const slimImageObject = img => { |
|
288 |
const attrSet = ['sizes', 'mime', 'type', 'subtype', 'id', 'url', 'alt', 'link', 'caption']; |
|
289 |
return Object(external_lodash_["pick"])(img, attrSet); |
16
|
290 |
}; |
|
291 |
|
18
|
292 |
const getAttachmentsCollection = ids => { |
16
|
293 |
return wp.media.query({ |
|
294 |
order: 'ASC', |
|
295 |
orderby: 'post__in', |
|
296 |
post__in: ids, |
|
297 |
posts_per_page: -1, |
|
298 |
query: true, |
|
299 |
type: 'image' |
|
300 |
}); |
|
301 |
}; |
|
302 |
|
18
|
303 |
class media_upload_MediaUpload extends external_wp_element_["Component"] { |
|
304 |
constructor({ |
|
305 |
allowedTypes, |
|
306 |
gallery = false, |
|
307 |
unstableFeaturedImageFlow = false, |
|
308 |
modalClass, |
|
309 |
multiple = false, |
|
310 |
title = Object(external_wp_i18n_["__"])('Select or Upload Media') |
|
311 |
}) { |
|
312 |
super(...arguments); |
|
313 |
this.openModal = this.openModal.bind(this); |
|
314 |
this.onOpen = this.onOpen.bind(this); |
|
315 |
this.onSelect = this.onSelect.bind(this); |
|
316 |
this.onUpdate = this.onUpdate.bind(this); |
|
317 |
this.onClose = this.onClose.bind(this); |
16
|
318 |
|
|
319 |
if (gallery) { |
18
|
320 |
this.buildAndSetGalleryFrame(); |
16
|
321 |
} else { |
18
|
322 |
const frameConfig = { |
|
323 |
title, |
|
324 |
multiple |
16
|
325 |
}; |
|
326 |
|
|
327 |
if (!!allowedTypes) { |
|
328 |
frameConfig.library = { |
|
329 |
type: allowedTypes |
|
330 |
}; |
|
331 |
} |
|
332 |
|
18
|
333 |
this.frame = wp.media(frameConfig); |
16
|
334 |
} |
|
335 |
|
|
336 |
if (modalClass) { |
18
|
337 |
this.frame.$el.addClass(modalClass); |
16
|
338 |
} |
|
339 |
|
|
340 |
if (unstableFeaturedImageFlow) { |
18
|
341 |
this.buildAndSetFeatureImageFrame(); |
|
342 |
} |
|
343 |
|
|
344 |
this.initializeListeners(); |
|
345 |
} |
|
346 |
|
|
347 |
initializeListeners() { |
|
348 |
// When an image is selected in the media frame... |
|
349 |
this.frame.on('select', this.onSelect); |
|
350 |
this.frame.on('update', this.onUpdate); |
|
351 |
this.frame.on('open', this.onOpen); |
|
352 |
this.frame.on('close', this.onClose); |
|
353 |
} |
|
354 |
/** |
|
355 |
* Sets the Gallery frame and initializes listeners. |
|
356 |
* |
|
357 |
* @return {void} |
|
358 |
*/ |
|
359 |
|
|
360 |
|
|
361 |
buildAndSetGalleryFrame() { |
|
362 |
const { |
|
363 |
addToGallery = false, |
|
364 |
allowedTypes, |
|
365 |
multiple = false, |
|
366 |
value = DEFAULT_EMPTY_GALLERY |
|
367 |
} = this.props; // If the value did not changed there is no need to rebuild the frame, |
|
368 |
// we can continue to use the existing one. |
|
369 |
|
|
370 |
if (value === this.lastGalleryValue) { |
|
371 |
return; |
|
372 |
} |
|
373 |
|
|
374 |
this.lastGalleryValue = value; // If a frame already existed remove it. |
|
375 |
|
|
376 |
if (this.frame) { |
|
377 |
this.frame.remove(); |
16
|
378 |
} |
|
379 |
|
18
|
380 |
let currentState; |
|
381 |
|
|
382 |
if (addToGallery) { |
|
383 |
currentState = 'gallery-library'; |
|
384 |
} else { |
|
385 |
currentState = value && value.length ? 'gallery-edit' : 'gallery'; |
|
386 |
} |
|
387 |
|
|
388 |
if (!this.GalleryDetailsMediaFrame) { |
|
389 |
this.GalleryDetailsMediaFrame = getGalleryDetailsMediaFrame(); |
|
390 |
} |
16
|
391 |
|
18
|
392 |
const attachments = getAttachmentsCollection(value); |
|
393 |
const selection = new wp.media.model.Selection(attachments.models, { |
|
394 |
props: attachments.props.toJSON(), |
|
395 |
multiple |
|
396 |
}); |
|
397 |
this.frame = new this.GalleryDetailsMediaFrame({ |
|
398 |
mimeType: allowedTypes, |
|
399 |
state: currentState, |
|
400 |
multiple, |
|
401 |
selection, |
|
402 |
editing: value && value.length ? true : false |
|
403 |
}); |
|
404 |
wp.media.frame = this.frame; |
|
405 |
this.initializeListeners(); |
|
406 |
} |
|
407 |
/** |
|
408 |
* Initializes the Media Library requirements for the featured image flow. |
|
409 |
* |
|
410 |
* @return {void} |
|
411 |
*/ |
|
412 |
|
|
413 |
|
|
414 |
buildAndSetFeatureImageFrame() { |
|
415 |
const featuredImageFrame = getFeaturedImageMediaFrame(); |
|
416 |
const attachments = getAttachmentsCollection(this.props.value); |
|
417 |
const selection = new wp.media.model.Selection(attachments.models, { |
|
418 |
props: attachments.props.toJSON() |
|
419 |
}); |
|
420 |
this.frame = new featuredImageFrame({ |
|
421 |
mimeType: this.props.allowedTypes, |
|
422 |
state: 'featured-image', |
|
423 |
multiple: this.props.multiple, |
|
424 |
selection, |
|
425 |
editing: this.props.value ? true : false |
|
426 |
}); |
|
427 |
wp.media.frame = this.frame; |
16
|
428 |
} |
|
429 |
|
18
|
430 |
componentWillUnmount() { |
|
431 |
this.frame.remove(); |
|
432 |
} |
16
|
433 |
|
18
|
434 |
onUpdate(selections) { |
|
435 |
const { |
|
436 |
onSelect, |
|
437 |
multiple = false |
|
438 |
} = this.props; |
|
439 |
const state = this.frame.state(); |
|
440 |
const selectedImages = selections || state.get('selection'); |
16
|
441 |
|
18
|
442 |
if (!selectedImages || !selectedImages.models.length) { |
|
443 |
return; |
16
|
444 |
} |
18
|
445 |
|
|
446 |
if (multiple) { |
|
447 |
onSelect(selectedImages.models.map(model => slimImageObject(model.toJSON()))); |
|
448 |
} else { |
|
449 |
onSelect(slimImageObject(selectedImages.models[0].toJSON())); |
|
450 |
} |
|
451 |
} |
16
|
452 |
|
18
|
453 |
onSelect() { |
|
454 |
const { |
|
455 |
onSelect, |
|
456 |
multiple = false |
|
457 |
} = this.props; // Get media attachment details from the frame state |
|
458 |
|
|
459 |
const attachment = this.frame.state().get('selection').toJSON(); |
|
460 |
onSelect(multiple ? attachment : attachment[0]); |
|
461 |
} |
|
462 |
|
|
463 |
onOpen() { |
|
464 |
var _this$props$value; |
16
|
465 |
|
18
|
466 |
this.updateCollection(); // Handle both this.props.value being either (number[]) multiple ids |
|
467 |
// (for galleries) or a (number) singular id (e.g. image block). |
16
|
468 |
|
18
|
469 |
const hasMedia = Array.isArray(this.props.value) ? !!((_this$props$value = this.props.value) !== null && _this$props$value !== void 0 && _this$props$value.length) : !!this.props.value; |
|
470 |
|
|
471 |
if (!hasMedia) { |
|
472 |
return; |
16
|
473 |
} |
|
474 |
|
18
|
475 |
if (!this.props.gallery) { |
|
476 |
const selection = this.frame.state().get('selection'); |
|
477 |
Object(external_lodash_["castArray"])(this.props.value).forEach(id => { |
|
478 |
selection.add(wp.media.attachment(id)); |
|
479 |
}); |
|
480 |
} // load the images so they are available in the media modal. |
16
|
481 |
|
|
482 |
|
18
|
483 |
getAttachmentsCollection(Object(external_lodash_["castArray"])(this.props.value)).more(); |
|
484 |
} |
16
|
485 |
|
18
|
486 |
onClose() { |
|
487 |
const { |
|
488 |
onClose |
|
489 |
} = this.props; |
|
490 |
|
|
491 |
if (onClose) { |
|
492 |
onClose(); |
16
|
493 |
} |
18
|
494 |
} |
|
495 |
|
|
496 |
updateCollection() { |
|
497 |
const frameContent = this.frame.content.get(); |
16
|
498 |
|
18
|
499 |
if (frameContent && frameContent.collection) { |
|
500 |
const collection = frameContent.collection; // clean all attachments we have in memory. |
16
|
501 |
|
18
|
502 |
collection.toArray().forEach(model => model.trigger('destroy', model)); // reset has more flag, if library had small amount of items all items may have been loaded before. |
16
|
503 |
|
18
|
504 |
collection.mirroring._hasMore = true; // request items |
16
|
505 |
|
18
|
506 |
collection.more(); |
16
|
507 |
} |
18
|
508 |
} |
|
509 |
|
|
510 |
openModal() { |
|
511 |
if (this.props.gallery) { |
|
512 |
this.buildAndSetGalleryFrame(); |
|
513 |
} |
16
|
514 |
|
18
|
515 |
this.frame.open(); |
|
516 |
} |
16
|
517 |
|
18
|
518 |
render() { |
|
519 |
return this.props.render({ |
|
520 |
open: this.openModal |
|
521 |
}); |
|
522 |
} |
|
523 |
|
|
524 |
} |
16
|
525 |
|
|
526 |
/* harmony default export */ var media_upload = (media_upload_MediaUpload); |
|
527 |
|
|
528 |
// CONCATENATED MODULE: ./node_modules/@wordpress/media-utils/build-module/components/index.js |
|
529 |
|
|
530 |
|
18
|
531 |
// EXTERNAL MODULE: external ["wp","apiFetch"] |
|
532 |
var external_wp_apiFetch_ = __webpack_require__("ywyh"); |
|
533 |
var external_wp_apiFetch_default = /*#__PURE__*/__webpack_require__.n(external_wp_apiFetch_); |
16
|
534 |
|
18
|
535 |
// EXTERNAL MODULE: external ["wp","blob"] |
|
536 |
var external_wp_blob_ = __webpack_require__("xTGt"); |
16
|
537 |
|
|
538 |
// CONCATENATED MODULE: ./node_modules/@wordpress/media-utils/build-module/utils/upload-media.js |
|
539 |
|
|
540 |
|
|
541 |
/** |
|
542 |
* External dependencies |
|
543 |
*/ |
|
544 |
|
|
545 |
/** |
|
546 |
* WordPress dependencies |
|
547 |
*/ |
|
548 |
|
|
549 |
|
|
550 |
|
|
551 |
|
|
552 |
/** |
|
553 |
* Browsers may use unexpected mime types, and they differ from browser to browser. |
|
554 |
* This function computes a flexible array of mime types from the mime type structured provided by the server. |
|
555 |
* Converts { jpg|jpeg|jpe: "image/jpeg" } into [ "image/jpeg", "image/jpg", "image/jpeg", "image/jpe" ] |
|
556 |
* The computation of this array instead of directly using the object, |
|
557 |
* solves the problem in chrome where mp3 files have audio/mp3 as mime type instead of audio/mpeg. |
|
558 |
* https://bugs.chromium.org/p/chromium/issues/detail?id=227004 |
|
559 |
* |
|
560 |
* @param {?Object} wpMimeTypesObject Mime type object received from the server. |
|
561 |
* Extensions are keys separated by '|' and values are mime types associated with an extension. |
|
562 |
* |
|
563 |
* @return {?Array} An array of mime types or the parameter passed if it was "falsy". |
|
564 |
*/ |
|
565 |
|
|
566 |
function getMimeTypesArray(wpMimeTypesObject) { |
|
567 |
if (!wpMimeTypesObject) { |
|
568 |
return wpMimeTypesObject; |
|
569 |
} |
|
570 |
|
18
|
571 |
return Object(external_lodash_["flatMap"])(wpMimeTypesObject, (mime, extensionsString) => { |
|
572 |
const [type] = mime.split('/'); |
|
573 |
const extensions = extensionsString.split('|'); |
|
574 |
return [mime, ...Object(external_lodash_["map"])(extensions, extension => `${type}/${extension}`)]; |
16
|
575 |
}); |
|
576 |
} |
|
577 |
/** |
|
578 |
* Media Upload is used by audio, image, gallery, video, and file blocks to |
|
579 |
* handle uploading a media file when a file upload button is activated. |
|
580 |
* |
|
581 |
* TODO: future enhancement to add an upload indicator. |
|
582 |
* |
|
583 |
* @param {Object} $0 Parameters object passed to the function. |
|
584 |
* @param {?Array} $0.allowedTypes Array with the types of media that can be uploaded, if unset all types are allowed. |
|
585 |
* @param {?Object} $0.additionalData Additional data to include in the request. |
|
586 |
* @param {Array} $0.filesList List of files. |
|
587 |
* @param {?number} $0.maxUploadFileSize Maximum upload size in bytes allowed for the site. |
|
588 |
* @param {Function} $0.onError Function called when an error happens. |
|
589 |
* @param {Function} $0.onFileChange Function called each time a file or a temporary representation of the file is available. |
|
590 |
* @param {?Object} $0.wpAllowedMimeTypes List of allowed mime types and file extensions. |
|
591 |
*/ |
|
592 |
|
18
|
593 |
async function uploadMedia({ |
|
594 |
allowedTypes, |
|
595 |
additionalData = {}, |
|
596 |
filesList, |
|
597 |
maxUploadFileSize, |
|
598 |
onError = external_lodash_["noop"], |
|
599 |
onFileChange, |
|
600 |
wpAllowedMimeTypes = null |
|
601 |
}) { |
|
602 |
// Cast filesList to array |
|
603 |
const files = [...filesList]; |
|
604 |
const filesSet = []; |
|
605 |
|
|
606 |
const setAndUpdateFiles = (idx, value) => { |
|
607 |
Object(external_wp_blob_["revokeBlobURL"])(Object(external_lodash_["get"])(filesSet, [idx, 'url'])); |
|
608 |
filesSet[idx] = value; |
|
609 |
onFileChange(Object(external_lodash_["compact"])(filesSet)); |
|
610 |
}; // Allowed type specified by consumer |
|
611 |
|
|
612 |
|
|
613 |
const isAllowedType = fileType => { |
|
614 |
if (!allowedTypes) { |
|
615 |
return true; |
|
616 |
} |
|
617 |
|
|
618 |
return Object(external_lodash_["some"])(allowedTypes, allowedType => { |
|
619 |
// If a complete mimetype is specified verify if it matches exactly the mime type of the file. |
|
620 |
if (Object(external_lodash_["includes"])(allowedType, '/')) { |
|
621 |
return allowedType === fileType; |
|
622 |
} // Otherwise a general mime type is used and we should verify if the file mimetype starts with it. |
|
623 |
|
|
624 |
|
|
625 |
return Object(external_lodash_["startsWith"])(fileType, `${allowedType}/`); |
|
626 |
}); |
|
627 |
}; // Allowed types for the current WP_User |
|
628 |
|
|
629 |
|
|
630 |
const allowedMimeTypesForUser = getMimeTypesArray(wpAllowedMimeTypes); |
|
631 |
|
|
632 |
const isAllowedMimeTypeForUser = fileType => { |
|
633 |
return Object(external_lodash_["includes"])(allowedMimeTypesForUser, fileType); |
|
634 |
}; // Build the error message including the filename |
|
635 |
|
|
636 |
|
|
637 |
const triggerError = error => { |
|
638 |
error.message = [Object(external_wp_element_["createElement"])("strong", { |
|
639 |
key: "filename" |
|
640 |
}, error.file.name), ': ', error.message]; |
|
641 |
onError(error); |
|
642 |
}; |
|
643 |
|
|
644 |
const validFiles = []; |
|
645 |
|
|
646 |
for (const mediaFile of files) { |
|
647 |
// Verify if user is allowed to upload this mime type. |
|
648 |
// Defer to the server when type not detected. |
|
649 |
if (allowedMimeTypesForUser && mediaFile.type && !isAllowedMimeTypeForUser(mediaFile.type)) { |
|
650 |
triggerError({ |
|
651 |
code: 'MIME_TYPE_NOT_ALLOWED_FOR_USER', |
|
652 |
message: Object(external_wp_i18n_["__"])('Sorry, this file type is not permitted for security reasons.'), |
|
653 |
file: mediaFile |
|
654 |
}); |
|
655 |
continue; |
|
656 |
} // Check if the block supports this mime type. |
|
657 |
// Defer to the server when type not detected. |
|
658 |
|
|
659 |
|
|
660 |
if (mediaFile.type && !isAllowedType(mediaFile.type)) { |
|
661 |
triggerError({ |
|
662 |
code: 'MIME_TYPE_NOT_SUPPORTED', |
|
663 |
message: Object(external_wp_i18n_["__"])('Sorry, this file type is not supported here.'), |
|
664 |
file: mediaFile |
|
665 |
}); |
|
666 |
continue; |
|
667 |
} // verify if file is greater than the maximum file upload size allowed for the site. |
|
668 |
|
|
669 |
|
|
670 |
if (maxUploadFileSize && mediaFile.size > maxUploadFileSize) { |
|
671 |
triggerError({ |
|
672 |
code: 'SIZE_ABOVE_LIMIT', |
|
673 |
message: Object(external_wp_i18n_["__"])('This file exceeds the maximum upload size for this site.'), |
|
674 |
file: mediaFile |
|
675 |
}); |
|
676 |
continue; |
|
677 |
} // Don't allow empty files to be uploaded. |
|
678 |
|
|
679 |
|
|
680 |
if (mediaFile.size <= 0) { |
|
681 |
triggerError({ |
|
682 |
code: 'EMPTY_FILE', |
|
683 |
message: Object(external_wp_i18n_["__"])('This file is empty.'), |
|
684 |
file: mediaFile |
|
685 |
}); |
|
686 |
continue; |
|
687 |
} |
|
688 |
|
|
689 |
validFiles.push(mediaFile); // Set temporary URL to create placeholder media file, this is replaced |
|
690 |
// with final file from media gallery when upload is `done` below |
|
691 |
|
|
692 |
filesSet.push({ |
|
693 |
url: Object(external_wp_blob_["createBlobURL"])(mediaFile) |
|
694 |
}); |
|
695 |
onFileChange(filesSet); |
|
696 |
} |
|
697 |
|
|
698 |
for (let idx = 0; idx < validFiles.length; ++idx) { |
|
699 |
const mediaFile = validFiles[idx]; |
|
700 |
|
|
701 |
try { |
|
702 |
const savedMedia = await createMediaFromFile(mediaFile, additionalData); |
|
703 |
const mediaObject = { ...Object(external_lodash_["omit"])(savedMedia, ['alt_text', 'source_url']), |
|
704 |
alt: savedMedia.alt_text, |
|
705 |
caption: Object(external_lodash_["get"])(savedMedia, ['caption', 'raw'], ''), |
|
706 |
title: savedMedia.title.raw, |
|
707 |
url: savedMedia.source_url |
|
708 |
}; |
|
709 |
setAndUpdateFiles(idx, mediaObject); |
|
710 |
} catch (error) { |
|
711 |
// Reset to empty on failure. |
|
712 |
setAndUpdateFiles(idx, null); |
|
713 |
let message; |
|
714 |
|
|
715 |
if (Object(external_lodash_["has"])(error, ['message'])) { |
|
716 |
message = Object(external_lodash_["get"])(error, ['message']); |
|
717 |
} else { |
|
718 |
message = Object(external_wp_i18n_["sprintf"])( // translators: %s: file name |
|
719 |
Object(external_wp_i18n_["__"])('Error while uploading file %s to the media library.'), mediaFile.name); |
|
720 |
} |
|
721 |
|
|
722 |
onError({ |
|
723 |
code: 'GENERAL', |
|
724 |
message, |
|
725 |
file: mediaFile |
|
726 |
}); |
|
727 |
} |
|
728 |
} |
16
|
729 |
} |
|
730 |
/** |
|
731 |
* @param {File} file Media File to Save. |
|
732 |
* @param {?Object} additionalData Additional data to include in the request. |
|
733 |
* |
|
734 |
* @return {Promise} Media Object Promise. |
|
735 |
*/ |
|
736 |
|
|
737 |
function createMediaFromFile(file, additionalData) { |
|
738 |
// Create upload payload |
18
|
739 |
const data = new window.FormData(); |
16
|
740 |
data.append('file', file, file.name || file.type.replace('/', '.')); |
18
|
741 |
Object(external_lodash_["forEach"])(additionalData, (value, key) => data.append(key, value)); |
|
742 |
return external_wp_apiFetch_default()({ |
16
|
743 |
path: '/wp/v2/media', |
|
744 |
body: data, |
|
745 |
method: 'POST' |
|
746 |
}); |
|
747 |
} |
|
748 |
|
|
749 |
// CONCATENATED MODULE: ./node_modules/@wordpress/media-utils/build-module/utils/index.js |
|
750 |
|
|
751 |
|
|
752 |
// CONCATENATED MODULE: ./node_modules/@wordpress/media-utils/build-module/index.js |
|
753 |
|
|
754 |
|
|
755 |
|
|
756 |
|
|
757 |
/***/ }), |
|
758 |
|
18
|
759 |
/***/ "YLtl": |
|
760 |
/***/ (function(module, exports) { |
16
|
761 |
|
18
|
762 |
(function() { module.exports = window["lodash"]; }()); |
16
|
763 |
|
|
764 |
/***/ }), |
|
765 |
|
18
|
766 |
/***/ "l3Sj": |
|
767 |
/***/ (function(module, exports) { |
16
|
768 |
|
18
|
769 |
(function() { module.exports = window["wp"]["i18n"]; }()); |
|
770 |
|
|
771 |
/***/ }), |
16
|
772 |
|
18
|
773 |
/***/ "xTGt": |
|
774 |
/***/ (function(module, exports) { |
|
775 |
|
|
776 |
(function() { module.exports = window["wp"]["blob"]; }()); |
16
|
777 |
|
18
|
778 |
/***/ }), |
16
|
779 |
|
18
|
780 |
/***/ "ywyh": |
|
781 |
/***/ (function(module, exports) { |
16
|
782 |
|
18
|
783 |
(function() { module.exports = window["wp"]["apiFetch"]; }()); |
16
|
784 |
|
|
785 |
/***/ }) |
|
786 |
|
|
787 |
/******/ }); |