diff --git a/core/REST_API/Router.php b/core/REST_API/Router.php
index b7257bdae..13d3ae575 100644
--- a/core/REST_API/Router.php
+++ b/core/REST_API/Router.php
@@ -62,7 +62,7 @@ class Router {
 			'path'                => '/attachment',
 			'callback'            => 'get_attachment_data',
 			'permission_callback' => 'allow_access',
-			'methods'             => 'GET',
+			'methods'             => array( 'GET', 'POST' ),
 			'args'                => 'attachment_data_args_schema',
 		),
 		'block_renderer' => array(
@@ -368,11 +368,9 @@ public function get_association_options() {
 	 *
 	 * @return array
 	 */
-	public function get_attachment_data() {
-		$type  = sanitize_text_field( $_GET['type'] );
-		$value = sanitize_text_field( $_GET['value'] );
-
-		return Helper::get_attachment_metadata( $value, $type );
+	public function get_attachment_data( $request ) {
+        $options = $request->get_params();
+		return Helper::get_attachment_metadata( $options['value'], $options['type'] );
 	}
 
 	/**
diff --git a/packages/core/fields/file/index.js b/packages/core/fields/file/index.js
index b179cd85e..4bd244f6e 100644
--- a/packages/core/fields/file/index.js
+++ b/packages/core/fields/file/index.js
@@ -9,7 +9,7 @@ import { get } from 'lodash';
  */
 import './style.scss';
 import MediaLibrary from '../../components/media-library';
-import apiFetch from '../../utils/api-fetch';
+import apiFetch from '@wordpress/api-fetch';
 
 class FileField extends Component {
 	/**
@@ -27,25 +27,55 @@ class FileField extends Component {
 	 * @return {void}
 	 */
 	componentDidMount() {
-		const { value, field } = this.props;
-
-		if ( value ) {
-			let endpoint = '';
-
-			if ( window.wpApiSettings.root.indexOf( '?rest_route' ) !== -1 ) {
-				endpoint = `${ window.wpApiSettings.root }carbon-fields/v1/attachment&type=${ field.value_type }&value=${ value }`;
-			} else {
-				endpoint = `${ window.wpApiSettings.root }carbon-fields/v1/attachment?type=${ field.value_type }&value=${ value }`;
-			}
-
-			// TODO: Refactor this to use `@wordpress/api-fetch` package.
-			apiFetch(
-				endpoint,
-				'get'
-			).then( this.handleFileDataChange );
-		}
+        this.fetchMetadata();
 	}
 
+    getCacheKey(field, value) {
+        let cacheKey = 'cf_filefield_cache_';
+        if (field.value_type === 'id') {
+            cacheKey += value;
+        } else {
+            cacheKey += btoa(value);
+        }
+
+        return cacheKey;
+    }
+
+    getCachedMetadata(cacheKey) {
+        return JSON.parse(localStorage.getItem(cacheKey));
+    }
+
+    setCachedMetadata(cacheKey, value) {
+        localStorage.setItem(cacheKey, JSON.stringify(value));
+    }
+
+    fetchMetadata() {
+        const { value, field } = this.props;
+
+        if (value) {
+            let cacheKey = this.getCacheKey(field, value);
+            let data = this.getCachedMetadata(cacheKey);
+
+            if (data !== null) {
+                this.handleFileDataChange(data);
+                return;
+            }
+
+            apiFetch({
+                method: 'post',
+                path: '/wp-json/carbon-fields/v1/attachment',
+                data: {
+                    type: field.value_type,
+                    value: value
+                }
+            }).then( (data) => {
+                this.setCachedMetadata(cacheKey, data);
+                this.handleFileDataChange(data);
+            });
+
+        }
+    }
+
 	/**
 	 * Returns an URL to the attachment's thumbnail.
 	 *
@@ -117,10 +147,27 @@ class FileField extends Component {
 		} = this.props;
 
 		const [ file ] = files;
-
 		onChange( id, get( file, field.value_type, file.id ) );
 
-		this.handleFileDataChange( file );
+        let value;
+        switch (field.value_type) {
+            case 'id':
+                value = file.id;
+                break;
+            case 'url':
+                value = file.url;
+                break;
+            default:
+                break;
+        }
+
+        this.setCachedMetadata(this.getCacheKey(field, value), {
+            id: file.id,
+            filename: file.filename,
+            sizes: file.sizes
+        });
+
+        this.handleFileDataChange( file );
 	}
 
 	/**
diff --git a/packages/metaboxes/components/container/index.js b/packages/metaboxes/components/container/index.js
index 71c4d7c80..2afc50522 100644
--- a/packages/metaboxes/components/container/index.js
+++ b/packages/metaboxes/components/container/index.js
@@ -109,7 +109,6 @@ class Container extends Component {
 				[ `cf-container--tabbed cf-container--${ container.layout }` ]: hasTabs
 			}
 		] );
-
 		return (
 			<div className={ classes }>
 				<input
@@ -156,7 +155,6 @@ class Container extends Component {
 							<div className="cf-container__fields" key={ tabName } hidden={ tabName !== currentTab }>
 								{ map( fieldNames, ( fieldName ) => {
 									const field = find( container.fields, [ 'name', fieldName ] );
-
 									return this.renderField( field );
 								} ) }
 							</div>