Use FormData to support media uploads in fetch transport

Author: kadamwhite

fetch/fetch-transport.js

@@ -4,7 +4,8 @@
 'use strict';
 
 const fetch = require( 'isomorphic-unfetch' );
-// const FormData = require( 'form-data' );
+const FormData = require( 'form-data' );
+const fs = require( 'fs' );
 
 const objectReduce = require( '../lib/util/object-reduce' );
 const { createPaginationObject } = require( '../lib/pagination' );
@@ -171,21 +172,25 @@ function _httpGet( wpreq ) {
  * @returns {Promise} A promise to the results of the HTTP request
  */
 function _httpPost( wpreq, data = {} ) {
-// if ( wpreq._attachment ) {
-//	// Data must be form-encoded alongside image attachment
-//	const form = new FormData();
-//	data = objectReduce(
-//	data,
-//	( form, value, key ) => form.append( key, value ),
-//	// TODO: Probably need to read in the file if a string path is given
-//	form.append( 'file', wpreq._attachment, wpreq._attachmentName )
-//	);
-//	config = objectReduce(
-//	form.getHeaders(),
-//	( config, value, key ) => _setHeader( config, key, value ),
-//	config
-//	);
-// }
+let file = wpreq._attachment;
+if ( file ) {
+// Handle files provided as a path string
+if ( typeof file === 'string' ) {
+file = fs.createReadStream( file );
+}
+
+// Build the form data object
+const form = new FormData();
+form.append( 'file', file, wpreq._attachmentName );
+Object.keys( data ).forEach( key => form.append( key, data[ key ] ) );
+
+// Fire off the media upload request
+return send( wpreq, {
+method: 'POST',
+redirect: 'follow',
+body: form,
+} );
+}
 
 return send( wpreq, {
 method: 'POST',

package.json

@@ -53,7 +53,7 @@
  "lint": "npm run eslint",
  "watch": "jest --watch",
  "test:all": "jest",
- "test:unit": "jest tests/unit superagent/tests/unit",
+ "test:unit": "jest tests/unit superagent/tests/unit fetch/tests/unit",
  "test:integration": "jest tests/integration",
  "test:ci": "npm run eslint && jest tests/unit --coverage",
  "pretest": "npm run lint || true",
@@ -65,7 +65,7 @@
  "qs": "^6.6.0"
  },
  "optionalDependencies": {
- "form-data": "^2.3.3",
+ "form-data": "^2.5.0",
  "isomorphic-unfetch": "^3.0.0",
  "superagent": "^4.1.0"
  },

tests/integration/media.js

@@ -58,6 +58,7 @@ const expectedResults = {
 
 describe.each( [
 [ 'wpapi/superagent', require( '../../superagent' ) ],
+[ 'wpapi/fetch', require( '../../fetch' ) ],
 ] )( '%s: media()', ( transportName, WPAPI ) => {
 let wp;
 let authenticated;

tests/integration/posts.js

@@ -670,8 +670,7 @@ describe.each( [
 return expect( prom ).resolves.toBe( SUCCESS );
 }, 10000 );
 
-// TODO: Un-skip once image uploading is reinstated.
-it.skip( 'can create a post with tags, categories and featured media', () => {
+it( 'can create a post with tags, categories and featured media', () => {
 let id;
 let mediaId;
 const filePath = path.join( __dirname, 'assets/emilygarfield-untitled.jpg' );