Add method for changing the value type of the media-gallery field

core/Field/Media_Gallery_Field.php

@@ -4,6 +4,7 @@
 
 use Carbon_Fields\Value_Set\Value_Set;
 use Carbon_Fields\Helper\Helper;
+use Carbon_Fields\Exception\Incorrect_Syntax_Exception;
 
 /**
  * Set field class.
@@ -23,6 +24,7 @@ class Media_Gallery_Field extends Field {
 
 	/**
 	 * What value to store
+	 * Available types: id, url
 	 *
 	 * @var string
 	 */
@@ -72,6 +74,23 @@ public function set_type( $type ) {
 		return $this;
 	}
 
+	/**
+	 * Change the value type of the field.
+	 *
+	 * @param string $value_type
+	 * @return Media_Gallery_Field
+	 */
+	public function set_value_type( $value_type ) {
+		$types = array( 'url', 'id' );
+		if ( ! in_array( $value_type, $types ) ) {
+			Incorrect_Syntax_Exception::raise( 'Value Type must be one of the following: ' . implode( ', ', $types ) );
+			return $this;
+		}
+
+		$this->value_type = $value_type;
+		return $this;
+	}
+
 	/**
 	 * Get whether entry duplicates are allowed.
 	 *
@@ -133,9 +152,12 @@ public function set_value_from_input( $input ) {
 	 */
 	protected function value_to_json() {
 		$value_set = $this->get_value();
+		if ( $this->value_type === 'id' ) {
+			$value_set = array_map( 'absint', $value_set );
+		}
 
 		return array(
-			'value' => array_map( 'absint', $value_set ),
+			'value' => $value_set,
 		);
 	}
 

core/Helper/Helper.php

@@ -598,13 +598,13 @@ public static function get_attachment_metadata( $id, $type ) {
 		}
 
 		$attachment_metadata['id']        = intval( $id );
-		$attachment_metadata['file_url']  = is_numeric( $id ) ? wp_get_attachment_url( $id ) : $id;
-		$attachment_metadata['file_name'] = basename( $attachment_metadata['file_url'] );
-		$attachment_metadata['filetype']  = wp_check_filetype( $attachment_metadata['file_url'] );
+		$attachment_metadata['url']       = is_numeric( $id ) ? wp_get_attachment_url( $id ) : $id;
+		$attachment_metadata['file_name'] = basename( $attachment_metadata['url'] );
+		$attachment_metadata['filetype']  = wp_check_filetype( $attachment_metadata['url'] );
 		$attachment_metadata['file_type'] = preg_replace( '~\/.+$~', '', $attachment_metadata['filetype']['type'] ); // image, video, etc..
 
 		if ( $attachment_metadata['file_type'] == 'image' ) {
-			$attachment_metadata['thumb_url'] = $attachment_metadata['file_url'];
+			$attachment_metadata['thumb_url'] = $attachment_metadata['url'];
 
 			if ( $type == 'id' ) {
 				$attachment_metadata['thumb_url'] = wp_get_attachment_thumb_url( $id );

core/REST_API/Router.php

@@ -339,10 +339,15 @@ public function get_association_data() {
 	 * @return array
 	 */
 	public function get_attachment_data() {
-		$type  = sanitize_text_field( $_GET['type'] );
-		$value = sanitize_text_field( $_GET['value'] );
+		$type   = sanitize_text_field( $_GET['type'] );
+		$values = explode( ',', sanitize_text_field( $_GET['value'] ) );
 
-		return Helper::get_attachment_metadata( $value, $type );
+		$data = [];
+		foreach ( $values as $value ) {
+			$data[] = Helper::get_attachment_metadata( $value, $type );
+		}
+
+		return $data;
 	}
 
 	/**

packages/core/fields/file/index.js

@@ -34,7 +34,9 @@ class FileField extends Component {
 			apiFetch(
 				`${ window.wpApiSettings.root }carbon-fields/v1/attachment/?type=${ field.value_type }&value=${ value }`,
 				'get'
-			).then( this.handleFileDataChange );
+			).then( ( data ) => {
+				this.handleFileDataChange( data[ 0 ] );
+			} );
 		}
 	}
 

packages/core/fields/media-gallery/index.js

@@ -6,14 +6,15 @@ import { withEffects } from 'refract-callbag';
 import { map, pipe } from 'callbag-basics';
 import { Component, createRef } from '@wordpress/element';
 import { withState, compose } from '@wordpress/compose';
+import { get } from 'lodash';
 
 /**
  * Internal dependencies.
  */
 import './style.scss';
 import MediaLibrary from '../../components/media-library';
 import Sortable from '../../components/sortable';
-import fetchAttachmentsData from '../../utils/fetch-attachments-data';
+import apiFetch from '../../utils/api-fetch';
 
 class MediaGalleryField extends Component {
 	/**
@@ -34,10 +35,11 @@ class MediaGalleryField extends Component {
 			id,
 			onChange,
 			setState,
-			value
+			value,
+			field
 		} = this.props;
 
-		onChange( id, [ ...value, ...attachments.map( ( attachment ) => attachment.id ) ] );
+		onChange( id, [ ...value, ...attachments.map( ( attachment ) => get( attachment, field.value_type, attachment.id ) ) ] );
 
 		setState( {
 			attachmentsData: [ ...this.props.attachmentsData, ...attachments ]
@@ -87,10 +89,11 @@ class MediaGalleryField extends Component {
 
 		onChange( id, attachments );
 	}
-	
+
 	/**
 	 * Returns an URL to the attachment's thumbnail.
 	 *
+	 * @param {Object} attachment
 	 * @return {string}
 	 */
 	getAttachmentThumb( attachment ) {
@@ -105,6 +108,26 @@ class MediaGalleryField extends Component {
 		return attachment.url;
 	}
 
+	/**
+	 * Returns the filename of the attachment thumbnail.
+	 *
+	 * @param {Object} attachment
+	 * @return {string}
+	 */
+	getAttachmentName( attachment ) {
+		return attachment.filename || attachment.file_name;
+	}
+
+	/**
+	 * Returns the attachment type.
+	 *
+	 * @param {Object} attachment
+	 * @return {string}
+	 */
+	getAttachmentType( attachment ) {
+		return attachment.type || attachment.file_type;
+	}
+
 	/**
 	 * Render the component.
 	 *
@@ -145,11 +168,22 @@ class MediaGalleryField extends Component {
 								<div className="cf-media-gallery__inner">
 									<ul className="cf-media-gallery__list" ref={ this.attachmentsList }>
 										{ value.map( ( id, index ) => { // eslint-disable-line no-shadow
-											const attachment = attachmentsData.find( ( attachmentData ) => attachmentData.id === id );
+											const attachment = attachmentsData.find( ( attachmentData ) => {
+												const attachmentValue = get( attachmentData, this.props.field.value_type, attachmentData.id );
+
+												return attachmentValue === id;
+											} );
+
+											if ( typeof attachment === 'undefined' ) {
+												return;
+											}
+
 											const className = [ 'cf-media-gallery__item' ];
 
+											const attachmentType = this.getAttachmentType( attachment );
+
 											if ( attachment ) {
-												className.push( `cf-media-gallery__item--${ attachment.type }` );
+												className.push( `cf-media-gallery__item--${ attachmentType }` );
 											}
 
 											if ( selectedItem === index ) {
@@ -165,7 +199,7 @@ class MediaGalleryField extends Component {
 													<div className="cf-media-gallery__item-inner">
 														<div className="cf-media-gallery__item-preview">
 															{
-																attachment.type === 'image'
+																attachmentType === 'image'
 																	? (
 																		<img
 																			className="cf-media-gallery__item-thumb"
@@ -182,7 +216,7 @@ class MediaGalleryField extends Component {
 														</div>
 
 														<span className="cf-media-gallery__item-name">
-															{ attachment.filename }
+															{ this.getAttachmentName( attachment ) }
 														</span>
 
 														<button
@@ -230,13 +264,18 @@ function handler( props ) {
 	return function( effect ) {
 		switch ( effect.type ) {
 			case 'COMPONENT_MOUNTED':
-				const { value, setState } = props;
+				const { value, setState, field } = props;
 
-				fetchAttachmentsData( value ).then( ( attachmentsData ) => {
-					setState( {
-						attachmentsData: [ ...props.attachmentsData, ...attachmentsData ]
+				if ( value.length ) {
+					apiFetch(
+						`${ window.wpApiSettings.root }carbon-fields/v1/attachment/?type=${ field.value_type }&value=${ value }`,
+						'get'
+					).then( ( attachmentsData ) => {
+						setState( {
+							attachmentsData: [ ...props.attachmentsData, ...attachmentsData ]
+						} );
 					} );
-				} );
+				}
 
 				break;
 		}