Allow files to be passed to RequestBuilder and move request body under 'data' key

Author: Lustmored

src/LiveComponent/assets/src/Backend/Backend.ts

@@ -34,13 +34,15 @@ export default class implements BackendInterface {
         updated: {[key: string]: any},
         children: ChildrenFingerprints,
         updatedPropsFromParent: {[key: string]: any},
+        files: {[key: string]: FileList} = {},
     ): BackendRequest {
         const { url, fetchOptions } = this.requestBuilder.buildRequest(
             props,
             actions,
             updated,
             children,
-            updatedPropsFromParent
+            updatedPropsFromParent,
+            files
         );
 
         return new BackendRequest(

src/LiveComponent/assets/src/Backend/RequestBuilder.ts

@@ -15,6 +15,7 @@ export default class {
         updated: {[key: string]: any},
         children: ChildrenFingerprints,
         updatedPropsFromParent: {[key: string]: any},
+        files: {[key: string]: FileList},
     ): { url: string; fetchOptions: RequestInit } {
         const splitUrl = this.url.split('?');
         let [url] = splitUrl;
@@ -42,7 +43,6 @@ export default class {
             fetchOptions.method = 'GET';
         } else {
             fetchOptions.method = 'POST';
-            fetchOptions.headers['Content-Type'] = 'application/json';
             const requestData: any = { props, updated };
             if (Object.keys(updatedPropsFromParent).length > 0) {
                 requestData.propsFromParent = updatedPropsFromParent;
@@ -68,7 +68,17 @@ export default class {
                 }
             }
 
-            fetchOptions.body = JSON.stringify(requestData);
+            const formData = new FormData();
+            formData.append('data', JSON.stringify(requestData));
+
+            for(const [key, value] of Object.entries(files)) {
+                const length = value.length;
+                for (let i = 0; i < length ; ++i) {
+                    formData.append(key, value[i]);
+                }
+            }
+
+            fetchOptions.body = formData;
         }
 
         const paramsString = params.toString();

src/LiveComponent/assets/test/Backend/RequestBuilder.test.ts

@@ -8,6 +8,7 @@ describe('buildRequest', () => {
             [],
             { firstName: 'Kevin' },
             { 'child-component': {fingerprint: '123', tag: 'div' } },
+            {},
             {}
         );
 
@@ -28,17 +29,20 @@ describe('buildRequest', () => {
             }],
             { firstName: 'Kevin' },
             { 'child-component': {fingerprint: '123', tag: 'div' } },
+            {},
             {}
         );
 
         expect(url).toEqual('/_components/saveData');
         expect(fetchOptions.method).toEqual('POST');
         expect(fetchOptions.headers).toEqual({
             Accept: 'application/vnd.live-component+html',
-            'Content-Type': 'application/json',
             'X-CSRF-TOKEN': '_the_csrf_token',
         });
-        expect(fetchOptions.body).toEqual(JSON.stringify({
+        const body = fetchOptions.body;
+        expect(body).toBeInstanceOf(FormData);
+        // @ts-ignore body is already asserted to be FormData
+        expect(body.get('data')).toEqual(JSON.stringify({
             props: { firstName: 'Ryan' },
             updated: { firstName: 'Kevin' },
             children: { 'child-component': { fingerprint: '123', tag: 'div' } },
@@ -59,12 +63,16 @@ describe('buildRequest', () => {
             }],
             { firstName: 'Kevin' },
             {},
+            {},
             {}
         );
 
         expect(url).toEqual('/_components/_batch');
         expect(fetchOptions.method).toEqual('POST');
-        expect(fetchOptions.body).toEqual(JSON.stringify({
+        const body = fetchOptions.body;
+        expect(body).toBeInstanceOf(FormData);
+        // @ts-ignore body is already asserted to be FormData
+        expect(body.get('data')).toEqual(JSON.stringify({
             props: { firstName: 'Ryan' },
             updated: { firstName: 'Kevin' },
             actions: [{
@@ -85,6 +93,7 @@ describe('buildRequest', () => {
             [],
             { firstName: 'Kevin'.repeat(1000) },
             {},
+            {},
             {}
         );
 
@@ -93,9 +102,11 @@ describe('buildRequest', () => {
         expect(fetchOptions.headers).toEqual({
             // no token
             Accept: 'application/vnd.live-component+html',
-            'Content-Type': 'application/json',
         });
-        expect(fetchOptions.body).toEqual(JSON.stringify({
+        const body = fetchOptions.body;
+        expect(body).toBeInstanceOf(FormData);
+        // @ts-ignore body is already asserted to be FormData
+        expect(body.get('data')).toEqual(JSON.stringify({
             props: { firstName: 'Ryan'.repeat(1000) },
             updated: { firstName: 'Kevin'.repeat(1000) },
         }));
@@ -108,7 +119,8 @@ describe('buildRequest', () => {
             [],
             { firstName: 'Kevin' },
             { },
-            { count: 5 }
+            { count: 5 },
+            {}
         );
 
         expect(url).toEqual('/_components?existing_param=1&props=%7B%22firstName%22%3A%22Ryan%22%7D&updated=%7B%22firstName%22%3A%22Kevin%22%7D&propsFromParent=%7B%22count%22%3A5%7D');
@@ -123,9 +135,13 @@ describe('buildRequest', () => {
             { firstName: 'Kevin' },
             {},
             { count: 5 },
+            {}
         );
 
-        expect(fetchOptions.body).toEqual(JSON.stringify({
+        const body = fetchOptions.body;
+        expect(body).toBeInstanceOf(FormData);
+        // @ts-ignore body is already asserted to be FormData
+        expect(body.get('data')).toEqual(JSON.stringify({
             props: { firstName: 'Ryan' },
             updated: { firstName: 'Kevin' },
             propsFromParent: { count: 5 },