Rebuild assets

Author: Lustmored

src/LiveComponent/assets/dist/Backend/Backend.d.ts

@@ -10,6 +10,8 @@ export interface BackendInterface {
         [key: string]: any;
     }, children: ChildrenFingerprints, updatedPropsFromParent: {
         [key: string]: any;
+    }, files: {
+        [key: string]: FileList;
     }): BackendRequest;
 }
 export interface BackendAction {
@@ -23,5 +25,7 @@ export default class implements BackendInterface {
         [key: string]: any;
     }, children: ChildrenFingerprints, updatedPropsFromParent: {
         [key: string]: any;
+    }, files: {
+        [key: string]: FileList;
     }): BackendRequest;
 }

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

@@ -7,6 +7,8 @@ export default class {
         [key: string]: any;
     }, children: ChildrenFingerprints, updatedPropsFromParent: {
         [key: string]: any;
+    }, files: {
+        [key: string]: FileList;
     }): {
         url: string;
         fetchOptions: RequestInit;

src/LiveComponent/assets/dist/live_controller.js

@@ -1899,7 +1899,7 @@ class Component {
         const thisPromiseResolve = this.nextRequestPromiseResolve;
         this.resetPromise();
         this.unsyncedInputsTracker.resetUnsyncedFields();
-        this.backendRequest = this.backend.makeRequest(this.valueStore.getOriginalProps(), this.pendingActions, this.valueStore.getDirtyProps(), this.getChildrenFingerprints(), this.valueStore.getUpdatedPropsFromParent());
+        this.backendRequest = this.backend.makeRequest(this.valueStore.getOriginalProps(), this.pendingActions, this.valueStore.getDirtyProps(), this.getChildrenFingerprints(), this.valueStore.getUpdatedPropsFromParent(), {});
         this.hooks.triggerHook('loading.state:started', this.element, this.backendRequest);
         this.pendingActions = [];
         this.valueStore.flushDirtyPropsToPending();
@@ -2129,7 +2129,7 @@ class RequestBuilder {
         this.url = url;
         this.csrfToken = csrfToken;
     }
-    buildRequest(props, actions, updated, children, updatedPropsFromParent) {
+    buildRequest(props, actions, updated, children, updatedPropsFromParent, files) {
         const splitUrl = this.url.split('?');
         let [url] = splitUrl;
         const [, queryString] = splitUrl;
@@ -2138,8 +2138,10 @@ class RequestBuilder {
         fetchOptions.headers = {
             Accept: 'application/vnd.live-component+html',
         };
+        const totalFiles = Object.entries(files).reduce((total, current) => total + current.length, 0);
         const hasFingerprints = Object.keys(children).length > 0;
         if (actions.length === 0 &&
+            totalFiles === 0 &&
             this.willDataFitInUrl(JSON.stringify(props), JSON.stringify(updated), params, JSON.stringify(children), JSON.stringify(updatedPropsFromParent))) {
             params.set('props', JSON.stringify(props));
             params.set('updated', JSON.stringify(updated));
@@ -2153,18 +2155,18 @@ class RequestBuilder {
         }
         else {
             fetchOptions.method = 'POST';
-            fetchOptions.headers['Content-Type'] = 'application/json';
             const requestData = { props, updated };
             if (Object.keys(updatedPropsFromParent).length > 0) {
                 requestData.propsFromParent = updatedPropsFromParent;
             }
             if (hasFingerprints) {
                 requestData.children = children;
             }
+            if (this.csrfToken &&
+                (actions.length || totalFiles)) {
+                fetchOptions.headers['X-CSRF-TOKEN'] = this.csrfToken;
+            }
             if (actions.length > 0) {
-                if (this.csrfToken) {
-                    fetchOptions.headers['X-CSRF-TOKEN'] = this.csrfToken;
-                }
                 if (actions.length === 1) {
                     requestData.args = actions[0].args;
                     url += `/${encodeURIComponent(actions[0].name)}`;
@@ -2174,7 +2176,15 @@ class RequestBuilder {
                     requestData.actions = actions;
                 }
             }
-            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();
         return {
@@ -2192,8 +2202,8 @@ class Backend {
     constructor(url, csrfToken = null) {
         this.requestBuilder = new RequestBuilder(url, csrfToken);
     }
-    makeRequest(props, actions, updated, children, updatedPropsFromParent) {
-        const { url, fetchOptions } = this.requestBuilder.buildRequest(props, actions, updated, children, updatedPropsFromParent);
+    makeRequest(props, actions, updated, children, updatedPropsFromParent, files) {
+        const { url, fetchOptions } = this.requestBuilder.buildRequest(props, actions, updated, children, updatedPropsFromParent, files);
         return new BackendRequest(fetch(url, fetchOptions), actions.map((backendAction) => backendAction.name), Object.keys(updated));
     }
 }