Introduce editorMediaUpload, which includes post context for uplo…

…ads (#6231) * Introduce `editorMediaUpload`, which includes `post` context for uploads * Update media blocks to use `editorMediaUpload` and persist `post` * `mediaUpload()` doesn't return anything * Add JSDoc for function * Use an abstraction that permits passing additional data in request * Mention why this conditional is here
WordPress · Apr 20, 2018 · f53590a · f53590a
1 parent 97cb15d
commit f53590a
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 19 deletions.
diff --git a/blocks/editor-media-upload/index.js b/blocks/editor-media-upload/index.js
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { select } from '@wordpress/data';
+import { mediaUpload } from '@wordpress/utils';
+
+/**
+ * Upload a media file when the file upload button is activated.
+ * Wrapper around mediaUpload() that injects the current post ID.
+ *
+ * @param {Array}    filesList    List of files.
+ * @param {Function} onFileChange Function to be called each time a file or a temporary representation of the file is available.
+ * @param {string}   allowedType  The type of media that can be uploaded.
+ */
+export default function editorMediaUpload( filesList, onFileChange, allowedType ) {
+	let postId = null;
+	// Editor isn't guaranteed in block context.
+	if ( select( 'core/editor' ) ) {
+		postId = select( 'core/editor' ).getCurrentPostId();
+	}
+	mediaUpload( filesList, onFileChange, allowedType, {
+		post: postId,
+	} );
+}
diff --git a/blocks/image-placeholder/index.js b/blocks/image-placeholder/index.js
@@ -7,12 +7,12 @@ import { map } from 'lodash';
  * WordPress dependencies
  */
 import { DropZone, FormFileUpload, Placeholder, Button } from '@wordpress/components';
-import { mediaUpload } from '@wordpress/utils';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import editorMediaUpload from '../editor-media-upload';
 import MediaUpload from '../media-upload';
 import { rawHandler } from '../api';
 
@@ -25,13 +25,13 @@ import { rawHandler } from '../api';
  */
 export default function ImagePlaceholder( { className, icon, label, onSelectImage, multiple = false } ) {
 	const setImage = multiple ? onSelectImage : ( [ image ] ) => onSelectImage( image );
-	const onFilesDrop = ( files ) => mediaUpload( files, setImage, 'image' );
+	const onFilesDrop = ( files ) => editorMediaUpload( files, setImage, 'image' );
 	const onHTMLDrop = ( HTML ) => setImage( map(
 		rawHandler( { HTML, mode: 'BLOCKS' } )
 			.filter( ( { name } ) => name === 'core/image' ),
 		'attributes'
 	) );
-	const uploadFromFiles = ( event ) => mediaUpload( event.target.files, setImage, 'image' );
+	const uploadFromFiles = ( event ) => editorMediaUpload( event.target.files, setImage, 'image' );
 	return (
 		<Placeholder
 			className={ className }

diff --git a/blocks/library/audio/index.js b/blocks/library/audio/index.js
@@ -10,13 +10,13 @@ import {
 	Toolbar,
 } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
-import { mediaUpload } from '@wordpress/utils';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import './editor.scss';
+import editorMediaUpload from '../../editor-media-upload';
 import MediaUpload from '../../media-upload';
 import RichText from '../../rich-text';
 import BlockControls from '../../block-controls';
@@ -89,7 +89,7 @@ export const settings = {
 				return false;
 			};
 			const setAudio = ( [ audio ] ) => onSelectAudio( audio );
-			const uploadFromFiles = ( event ) => mediaUpload( event.target.files, setAudio, 'audio' );
+			const uploadFromFiles = ( event ) => editorMediaUpload( event.target.files, setAudio, 'audio' );
 
 			if ( editing ) {
 				return (

diff --git a/blocks/library/gallery/block.js b/blocks/library/gallery/block.js
@@ -8,7 +8,6 @@ import { filter, pick } from 'lodash';
  */
 import { Component, Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { mediaUpload } from '@wordpress/utils';
 import {
 	IconButton,
 	DropZone,
@@ -23,6 +22,7 @@ import {
 /**
  * Internal dependencies
  */
+import editorMediaUpload from '../../editor-media-upload';
 import MediaUpload from '../../media-upload';
 import ImagePlaceholder from '../../image-placeholder';
 import InspectorControls from '../../inspector-controls';
@@ -133,7 +133,7 @@ class GalleryBlock extends Component {
 	addFiles( files ) {
 		const currentImages = this.props.attributes.images || [];
 		const { setAttributes } = this.props;
-		mediaUpload(
+		editorMediaUpload(
 			files,
 			( images ) => {
 				setAttributes( {

diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
@@ -32,6 +32,7 @@ import { withSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
+import editorMediaUpload from '../../editor-media-upload';
 import RichText from '../../rich-text';
 import ImagePlaceholder from '../../image-placeholder';
 import MediaUpload from '../../media-upload';
@@ -40,7 +41,6 @@ import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import UrlInputButton from '../../url-input/button';
 import ImageSize from './image-size';
-import { mediaUpload } from '../../../utils/mediaupload';
 import { withEditorSettings } from '../../editor-settings';
 
 /**
@@ -75,7 +75,7 @@ class ImageBlock extends Component {
 			getBlobByURL( url )
 				.then(
 					( file ) =>
-						mediaUpload(
+						editorMediaUpload(
 							[ file ],
 							( [ image ] ) => {
 								setAttributes( { ...image } );

diff --git a/blocks/library/video/index.js b/blocks/library/video/index.js
@@ -14,13 +14,13 @@ import {
 	Toolbar,
 } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
-import { mediaUpload } from '@wordpress/utils';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import './editor.scss';
+import editorMediaUpload from '../../editor-media-upload';
 import MediaUpload from '../../media-upload';
 import RichText from '../../rich-text';
 import BlockControls from '../../block-controls';
@@ -101,7 +101,7 @@ export const settings = {
 				return false;
 			};
 			const setVideo = ( [ audio ] ) => onSelectVideo( audio );
-			const uploadFromFiles = ( event ) => mediaUpload( event.target.files, setVideo, 'video' );
+			const uploadFromFiles = ( event ) => editorMediaUpload( event.target.files, setVideo, 'video' );
 			const controls = (
 				<BlockControls>
 					<BlockAlignmentToolbar

diff --git a/utils/mediaupload.js b/utils/mediaupload.js
@@ -1,19 +1,20 @@
 /**
  * External Dependencies
  */
-import { compact, get, startsWith } from 'lodash';
+import { compact, forEach, get, startsWith } from 'lodash';
 
 /**
  *	Media Upload is used by audio, image, gallery and video blocks to handle uploading a media file
  *	when a file upload button is activated.
  *
  *	TODO: future enhancement to add an upload indicator.
  *
- * @param {Array}    filesList    List of files.
- * @param {Function} onFileChange Function to be called each time a file or a temporary representation of the file is available.
- * @param {string}   allowedType  The type of media that can be uploaded.
+ * @param {Array}    filesList      List of files.
+ * @param {Function} onFileChange   Function to be called each time a file or a temporary representation of the file is available.
+ * @param {string}   allowedType    The type of media that can be uploaded.
+ * @param {?Object}  additionalData Additional data to include in the request.
  */
-export function mediaUpload( filesList, onFileChange, allowedType ) {
+export function mediaUpload( filesList, onFileChange, allowedType, additionalData = {} ) {
 	// Cast filesList to array
 	const files = [ ...filesList ];
 
@@ -33,7 +34,7 @@ export function mediaUpload( filesList, onFileChange, allowedType ) {
 		filesSet.push( { url: window.URL.createObjectURL( mediaFile ) } );
 		onFileChange( filesSet );
 
-		return createMediaFromFile( mediaFile ).then(
+		return createMediaFromFile( mediaFile, additionalData ).then(
 			( savedMedia ) => {
 				const mediaObject = {
 					id: savedMedia.id,
@@ -56,14 +57,16 @@ export function mediaUpload( filesList, onFileChange, allowedType ) {
 }
 
 /**
- * @param {File} file Media File to Save.
+ * @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 ) {
+function createMediaFromFile( file, additionalData ) {
 	// Create upload payload
 	const data = new window.FormData();
 	data.append( 'file', file, file.name || file.type.replace( '/', '.' ) );
+	forEach( additionalData, ( ( value, key ) => data.append( key, value ) ) );
 	return wp.apiRequest( {
 		path: '/wp/v2/media',
 		data,