diff --git a/src/LiveComponent/assets/dist/Backend/Backend.d.ts b/src/LiveComponent/assets/dist/Backend/Backend.d.ts
index c4adb86f1f1..d9dbd309095 100644
--- a/src/LiveComponent/assets/dist/Backend/Backend.d.ts
+++ b/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;
 }
diff --git a/src/LiveComponent/assets/dist/Backend/RequestBuilder.d.ts b/src/LiveComponent/assets/dist/Backend/RequestBuilder.d.ts
index fa7c125a5ea..a4aacea9599 100644
--- a/src/LiveComponent/assets/dist/Backend/RequestBuilder.d.ts
+++ b/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;
diff --git a/src/LiveComponent/assets/dist/Component/index.d.ts b/src/LiveComponent/assets/dist/Component/index.d.ts
index c00eb8f670c..5abe908e60b 100644
--- a/src/LiveComponent/assets/dist/Component/index.d.ts
+++ b/src/LiveComponent/assets/dist/Component/index.d.ts
@@ -20,6 +20,7 @@ export default class Component {
     defaultDebounce: number;
     private backendRequest;
     private pendingActions;
+    private pendingFiles;
     private isRequestPending;
     private requestDebounceTimeout;
     private nextRequestPromise;
@@ -40,6 +41,7 @@ export default class Component {
     set(model: string, value: any, reRender?: boolean, debounce?: number | boolean): Promise<BackendResponse>;
     getData(model: string): any;
     action(name: string, args?: any, debounce?: number | boolean): Promise<BackendResponse>;
+    files(key: string, input: HTMLInputElement): void;
     render(): Promise<BackendResponse>;
     getUnsyncedModels(): string[];
     addChild(child: Component, modelBindings?: ModelBinding[]): void;
diff --git a/src/LiveComponent/assets/dist/live_controller.d.ts b/src/LiveComponent/assets/dist/live_controller.d.ts
index 02f2a38912c..37ff9c48cfc 100644
--- a/src/LiveComponent/assets/dist/live_controller.d.ts
+++ b/src/LiveComponent/assets/dist/live_controller.d.ts
@@ -48,6 +48,7 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
     component: Component;
     pendingActionTriggerModelElement: HTMLElement | null;
     private elementEventListeners;
+    private pendingFiles;
     static componentRegistry: ComponentRegistry;
     initialize(): void;
     connect(): void;
diff --git a/src/LiveComponent/assets/dist/live_controller.js b/src/LiveComponent/assets/dist/live_controller.js
index 06ee0e11c32..f85737c1eb8 100644
--- a/src/LiveComponent/assets/dist/live_controller.js
+++ b/src/LiveComponent/assets/dist/live_controller.js
@@ -1724,6 +1724,7 @@ class Component {
         this.defaultDebounce = 150;
         this.backendRequest = null;
         this.pendingActions = [];
+        this.pendingFiles = {};
         this.isRequestPending = false;
         this.requestDebounceTimeout = null;
         this.children = new Map();
@@ -1801,6 +1802,9 @@ class Component {
         this.debouncedStartRequest(debounce);
         return promise;
     }
+    files(key, input) {
+        this.pendingFiles[key] = input;
+    }
     render() {
         const promise = this.nextRequestPromise;
         this.tryStartingRequest();
@@ -1900,7 +1904,13 @@ 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());
+        const filesToSend = {};
+        for (const [key, value] of Object.entries(this.pendingFiles)) {
+            if (value.files) {
+                filesToSend[key] = value.files;
+            }
+        }
+        this.backendRequest = this.backend.makeRequest(this.valueStore.getOriginalProps(), this.pendingActions, this.valueStore.getDirtyProps(), this.getChildrenFingerprints(), this.valueStore.getUpdatedPropsFromParent(), filesToSend);
         this.hooks.triggerHook('loading.state:started', this.element, this.backendRequest);
         this.pendingActions = [];
         this.valueStore.flushDirtyPropsToPending();
@@ -1909,6 +1919,9 @@ class Component {
             this.backendRequest = null;
             const backendResponse = new BackendResponse(response);
             const html = await backendResponse.getBody();
+            for (const input of Object.values(this.pendingFiles)) {
+                input.value = '';
+            }
             const headers = backendResponse.response.headers;
             if (headers.get('Content-Type') !== 'application/vnd.live-component+html' && !headers.get('X-Live-Redirect')) {
                 const controls = { displayError: true };
@@ -2130,7 +2143,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;
@@ -2139,8 +2152,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));
@@ -2154,7 +2169,6 @@ 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;
@@ -2162,10 +2176,11 @@ class RequestBuilder {
             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)}`;
@@ -2175,7 +2190,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 {
@@ -2193,8 +2216,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));
     }
 }
@@ -2658,6 +2681,7 @@ class LiveControllerDefault extends Controller {
             { event: 'change', callback: (event) => this.handleChangeEvent(event) },
             { event: 'live:connect', callback: (event) => this.handleConnectedControllerEvent(event) },
         ];
+        this.pendingFiles = {};
     }
     initialize() {
         this.handleDisconnectedChildControllerEvent = this.handleDisconnectedChildControllerEvent.bind(this);
@@ -2706,6 +2730,7 @@ class LiveControllerDefault extends Controller {
         const directives = parseDirectives(rawAction);
         let debounce = false;
         directives.forEach((directive) => {
+            let pendingFiles = {};
             const validModifiers = new Map();
             validModifiers.set('prevent', () => {
                 event.preventDefault();
@@ -2721,6 +2746,14 @@ class LiveControllerDefault extends Controller {
             validModifiers.set('debounce', (modifier) => {
                 debounce = modifier.value ? parseInt(modifier.value) : true;
             });
+            validModifiers.set('files', (modifier) => {
+                if (!modifier.value) {
+                    pendingFiles = this.pendingFiles;
+                }
+                else if (this.pendingFiles[modifier.value]) {
+                    pendingFiles[modifier.value] = this.pendingFiles[modifier.value];
+                }
+            });
             directive.modifiers.forEach((modifier) => {
                 var _a;
                 if (validModifiers.has(modifier.name)) {
@@ -2730,6 +2763,12 @@ class LiveControllerDefault extends Controller {
                 }
                 console.warn(`Unknown modifier ${modifier.name} in action "${rawAction}". Available modifiers are: ${Array.from(validModifiers.keys()).join(', ')}.`);
             });
+            for (const [key, input] of Object.entries(pendingFiles)) {
+                if (input.files) {
+                    this.component.files(key, input);
+                }
+                delete this.pendingFiles[key];
+            }
             this.component.action(directive.action, directive.named, debounce);
             if (getModelDirectiveFromElement(event.currentTarget, false)) {
                 this.pendingActionTriggerModelElement = event.currentTarget;
@@ -2799,12 +2838,22 @@ class LiveControllerDefault extends Controller {
         this.updateModelFromElementEvent(target, 'change');
     }
     updateModelFromElementEvent(element, eventName) {
+        var _a;
         if (!elementBelongsToThisComponent(element, this.component)) {
             return;
         }
         if (!(element instanceof HTMLElement)) {
             throw new Error('Could not update model for non HTMLElement');
         }
+        if (element instanceof HTMLInputElement && element.type === 'file') {
+            const key = element.name;
+            if ((_a = element.files) === null || _a === void 0 ? void 0 : _a.length) {
+                this.pendingFiles[key] = element;
+            }
+            else if (this.pendingFiles[key]) {
+                delete this.pendingFiles[key];
+            }
+        }
         const modelDirective = getModelDirectiveFromElement(element, false);
         if (!modelDirective) {
             return;
diff --git a/src/LiveComponent/assets/src/Backend/Backend.ts b/src/LiveComponent/assets/src/Backend/Backend.ts
index 71002ffb350..31f2c21b357 100644
--- a/src/LiveComponent/assets/src/Backend/Backend.ts
+++ b/src/LiveComponent/assets/src/Backend/Backend.ts
@@ -13,6 +13,7 @@ export interface BackendInterface {
         updated: {[key: string]: any},
         children: ChildrenFingerprints,
         updatedPropsFromParent: {[key: string]: any},
+        files: {[key: string]: FileList},
     ): BackendRequest;
 }
 
@@ -34,13 +35,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(
diff --git a/src/LiveComponent/assets/src/Backend/RequestBuilder.ts b/src/LiveComponent/assets/src/Backend/RequestBuilder.ts
index 4007ad0e71f..2fe6e3b0254 100644
--- a/src/LiveComponent/assets/src/Backend/RequestBuilder.ts
+++ b/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;
@@ -26,9 +27,15 @@ export default class {
             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));
@@ -42,7 +49,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;
@@ -51,11 +57,15 @@ export default class {
                 requestData.children = children;
             }
 
+            if (
+                this.csrfToken &&
+                (actions.length || totalFiles)
+            ) {
+                fetchOptions.headers['X-CSRF-TOKEN'] = this.csrfToken;
+            }
+
             if (actions.length > 0) {
                 // one or more ACTIONs
-                if (this.csrfToken) {
-                    fetchOptions.headers['X-CSRF-TOKEN'] = this.csrfToken;
-                }
 
                 if (actions.length === 1) {
                     // simple, single action
@@ -68,7 +78,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();
diff --git a/src/LiveComponent/assets/src/Component/index.ts b/src/LiveComponent/assets/src/Component/index.ts
index 738025bd070..8c2a040b26b 100644
--- a/src/LiveComponent/assets/src/Component/index.ts
+++ b/src/LiveComponent/assets/src/Component/index.ts
@@ -55,6 +55,8 @@ export default class Component {
     private backendRequest: BackendRequest|null = null;
     /** Actions that are waiting to be executed */
     private pendingActions: BackendAction[] = [];
+    /** Files that are waiting to be sent */
+    private pendingFiles: {[key: string]: HTMLInputElement} = {};
     /** Is a request waiting to be made? */
     private isRequestPending = false;
     /** Current "timeout" before the pending request should be sent. */
@@ -194,6 +196,10 @@ export default class Component {
         return promise;
     }
 
+    files(key: string, input: HTMLInputElement): void {
+        this.pendingFiles[key] = input;
+    }
+
     render(): Promise<BackendResponse> {
         const promise = this.nextRequestPromise;
         this.tryStartingRequest();
@@ -352,12 +358,20 @@ export default class Component {
         // they are now "in sync" (with some exceptions noted inside)
         this.unsyncedInputsTracker.resetUnsyncedFields();
 
+        const filesToSend: {[key: string]: FileList} = {};
+        for(const [key, value] of Object.entries(this.pendingFiles)) {
+            if (value.files) {
+                filesToSend[key] = value.files;
+            }
+        }
+
         this.backendRequest = this.backend.makeRequest(
             this.valueStore.getOriginalProps(),
             this.pendingActions,
             this.valueStore.getDirtyProps(),
             this.getChildrenFingerprints(),
             this.valueStore.getUpdatedPropsFromParent(),
+            filesToSend,
         );
         this.hooks.triggerHook('loading.state:started', this.element, this.backendRequest);
 
@@ -370,6 +384,11 @@ export default class Component {
             const backendResponse = new BackendResponse(response);
             const html = await backendResponse.getBody();
 
+            // clear sent files inputs
+            for(const input of Object.values(this.pendingFiles)) {
+                input.value = '';
+            }
+
             // if the response does not contain a component, render as an error
             const headers = backendResponse.response.headers;
             if (headers.get('Content-Type') !== 'application/vnd.live-component+html' && !headers.get('X-Live-Redirect')) {
diff --git a/src/LiveComponent/assets/src/live_controller.ts b/src/LiveComponent/assets/src/live_controller.ts
index 8c7ebcf4f38..227a14b00c7 100644
--- a/src/LiveComponent/assets/src/live_controller.ts
+++ b/src/LiveComponent/assets/src/live_controller.ts
@@ -66,6 +66,7 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
         { event: 'change', callback: (event) => this.handleChangeEvent(event) },
         { event: 'live:connect', callback: (event) => this.handleConnectedControllerEvent(event) },
     ];
+    private pendingFiles: { [key: string]: HTMLInputElement } = {};
 
     static componentRegistry = new ComponentRegistry();
 
@@ -159,6 +160,7 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
         let debounce: number | boolean = false;
 
         directives.forEach((directive) => {
+            let pendingFiles: { [key: string]: HTMLInputElement } = {};
             const validModifiers: Map<string, (modifier: DirectiveModifier) => void> = new Map();
             validModifiers.set('prevent', () => {
                 event.preventDefault();
@@ -174,6 +176,13 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
             validModifiers.set('debounce', (modifier: DirectiveModifier) => {
                 debounce = modifier.value ? parseInt(modifier.value) : true;
             });
+            validModifiers.set('files', (modifier: DirectiveModifier) => {
+                if (!modifier.value) {
+                    pendingFiles = this.pendingFiles;
+                } else if (this.pendingFiles[modifier.value]) {
+                    pendingFiles[modifier.value] = this.pendingFiles[modifier.value];
+                }
+            });
 
             directive.modifiers.forEach((modifier) => {
                 if (validModifiers.has(modifier.name)) {
@@ -191,6 +200,12 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
                 );
             });
 
+            for (const [key, input] of Object.entries(pendingFiles)) {
+                if (input.files) {
+                    this.component.files(key, input);
+                }
+                delete this.pendingFiles[key];
+            }
             this.component.action(directive.action, directive.named, debounce);
 
             // possible case where this element is also a "model" element
@@ -322,6 +337,17 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
             throw new Error('Could not update model for non HTMLElement');
         }
 
+        // file uploads aren't mapped to model,
+        // but needs to be scheduled for sending
+        if (element instanceof HTMLInputElement && element.type === 'file') {
+            const key = element.name;
+            if (element.files?.length) {
+                this.pendingFiles[key] = element;
+            } else if (this.pendingFiles[key]) {
+                delete this.pendingFiles[key];
+            }
+        }
+
         const modelDirective = getModelDirectiveFromElement(element, false);
 
         // if not tied to a model, no more work to be done
diff --git a/src/LiveComponent/assets/test/Backend/RequestBuilder.test.ts b/src/LiveComponent/assets/test/Backend/RequestBuilder.test.ts
index 936e7557129..1963a7fbbad 100644
--- a/src/LiveComponent/assets/test/Backend/RequestBuilder.test.ts
+++ b/src/LiveComponent/assets/test/Backend/RequestBuilder.test.ts
@@ -8,6 +8,7 @@ describe('buildRequest', () => {
             [],
             { firstName: 'Kevin' },
             { 'child-component': {fingerprint: '123', tag: 'div' } },
+            {},
             {}
         );
 
@@ -28,6 +29,7 @@ describe('buildRequest', () => {
             }],
             { firstName: 'Kevin' },
             { 'child-component': {fingerprint: '123', tag: 'div' } },
+            {},
             {}
         );
 
@@ -35,10 +37,11 @@ describe('buildRequest', () => {
         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 = <FormData>fetchOptions.body;
+        expect(body).toBeInstanceOf(FormData);
+        expect(body.get('data')).toEqual(JSON.stringify({
             props: { firstName: 'Ryan' },
             updated: { firstName: 'Kevin' },
             children: { 'child-component': { fingerprint: '123', tag: 'div' } },
@@ -59,12 +62,15 @@ describe('buildRequest', () => {
             }],
             { firstName: 'Kevin' },
             {},
+            {},
             {}
         );
 
         expect(url).toEqual('/_components/_batch');
         expect(fetchOptions.method).toEqual('POST');
-        expect(fetchOptions.body).toEqual(JSON.stringify({
+        const body = <FormData>fetchOptions.body;
+        expect(body).toBeInstanceOf(FormData);
+        expect(body.get('data')).toEqual(JSON.stringify({
             props: { firstName: 'Ryan' },
             updated: { firstName: 'Kevin' },
             actions: [{
@@ -85,6 +91,7 @@ describe('buildRequest', () => {
             [],
             { firstName: 'Kevin'.repeat(1000) },
             {},
+            {},
             {}
         );
 
@@ -93,9 +100,10 @@ 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 = <FormData>fetchOptions.body;
+        expect(body).toBeInstanceOf(FormData);
+        expect(body.get('data')).toEqual(JSON.stringify({
             props: { firstName: 'Ryan'.repeat(1000) },
             updated: { firstName: 'Kevin'.repeat(1000) },
         }));
@@ -108,7 +116,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,13 +132,84 @@ describe('buildRequest', () => {
             { firstName: 'Kevin' },
             {},
             { count: 5 },
+            {}
         );
 
-        expect(fetchOptions.body).toEqual(JSON.stringify({
+        const body = <FormData>fetchOptions.body;
+        expect(body).toBeInstanceOf(FormData);
+        expect(body.get('data')).toEqual(JSON.stringify({
             props: { firstName: 'Ryan' },
             updated: { firstName: 'Kevin' },
             propsFromParent: { count: 5 },
             args: { sendNotification: '1' },
         }));
     });
+
+    // Helper method for FileList mocking
+    const getFileList = (length = 1) => {
+        const blob = new Blob([''], { type: 'text/html' });
+        // @ts-ignore This is a mock and those are needed to mock a File object
+        blob['lastModifiedDate'] = '';
+        // @ts-ignore This is a mock and those are needed to mock a File object
+        blob['name'] = 'filename';
+        const file = <File>blob;
+        const fileList: FileList = {
+            length: length,
+            item: () => file
+        };
+        for (let i= 0; i < length; ++i) {
+            fileList[i] = file;
+        }
+        return fileList;
+    };
+
+    it('Sends file with request', () => {
+        const builder = new RequestBuilder('/_components', '_the_csrf_token');
+
+        const { url, fetchOptions } = builder.buildRequest(
+            { firstName: 'Ryan' },
+            [],
+            {},
+            {},
+            {},
+            { 'file': getFileList()}
+        );
+
+        expect(url).toEqual('/_components');
+        expect(fetchOptions.method).toEqual('POST');
+        expect(fetchOptions.headers).toEqual({
+            Accept: 'application/vnd.live-component+html',
+            'X-CSRF-TOKEN': '_the_csrf_token',
+        });
+        const body = <FormData>fetchOptions.body;
+        expect(body).toBeInstanceOf(FormData);
+        expect(body.get('file')).toBeInstanceOf(File);
+        expect(body.getAll('file').length).toEqual(1);
+    });
+
+    it('Sends multiple files with request', () => {
+        const builder = new RequestBuilder('/_components', '_the_csrf_token');
+
+        const { url, fetchOptions } = builder.buildRequest(
+            { firstName: 'Ryan' },
+            [],
+            {},
+            {},
+            {},
+            { 'file[]': getFileList(3), 'otherFile': getFileList()}
+        );
+
+        expect(url).toEqual('/_components');
+        expect(fetchOptions.method).toEqual('POST');
+        expect(fetchOptions.headers).toEqual({
+            Accept: 'application/vnd.live-component+html',
+            'X-CSRF-TOKEN': '_the_csrf_token',
+        });
+        const body = <FormData>fetchOptions.body;
+        expect(body).toBeInstanceOf(FormData);
+        expect(body.get('file[]')).toBeInstanceOf(File);
+        expect(body.getAll('file[]').length).toEqual(3);
+        expect(body.get('otherFile')).toBeInstanceOf(File);
+        expect(body.getAll('otherFile').length).toEqual(1);
+    });
 });
diff --git a/src/LiveComponent/doc/index.rst b/src/LiveComponent/doc/index.rst
index 57e9a2c5453..75749626f08 100644
--- a/src/LiveComponent/doc/index.rst
+++ b/src/LiveComponent/doc/index.rst
@@ -1153,6 +1153,75 @@ the component now extends ``AbstractController``! That is totally
 allowed, and gives you access to all of your normal controller
 shortcuts. We even added a flash message!
 
+.. _files
+
+Uploading files
+---------------
+
+.. versionadded:: 2.9
+
+    The ability to upload files to actions was added in version 2.9.
+
+Files aren't sent to the component by default. You need to use a live action
+to handle the files and tell the component when the file should be sent:
+
+.. code-block:: html+twig
+
+    <p>
+        <input type="file" name="my_file" />
+        <button data-action="live#action" data-action-name="files|my_action" />
+    </p>
+
+To send a file (or files) with an action use `files` modifier.
+Without an argument it will send all pending files to your action.
+You can also specify a modifier parameter to choose which files should be upload.
+
+
+.. code-block:: html+twig
+
+    <p>
+        <input type="file" name="my_file" />
+        <input type="file" name="multiple[]" multiple />
+
+        {# Send only file from first input #}
+        <button data-action="live#action" data-action-name="files(my_file)|myAction" />
+        {# You can chain modifiers to send multiple files #}
+        <button data-action="live#action" data-action-name="files(my_file)|files(multiple[])|myAction" />
+        {# Or send all pending files #}
+        <button data-action="live#action" data-action-name="files|myAction" />
+    </p>
+
+The files will be available in a regular `$request->files` files bag::
+
+    // src/Components/FileUpload.php
+    namespace App\Components;
+
+    use Symfony\Component\HttpFoundation\Request;
+    use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+    use Symfony\UX\LiveComponent\Attribute\LiveAction;
+    use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+    #[AsLiveComponent]
+    class FileUpload
+    {
+        use DefaultActionTrait;
+
+        #[LiveAction]
+        public function myAction(Request $request)
+        {
+            $file = $request->files->get('my_file');
+            $multiple = $request->files->all('multiple');
+
+            // Handle files
+        }
+    }
+
+.. tip::
+
+    Remember that in order to send multiple files from a single input you
+    need to specify `multiple` attribute on HTML element and end `name`
+    with `[]`.
+
 .. _forms:
 
 Forms
diff --git a/src/LiveComponent/src/EventListener/LiveComponentSubscriber.php b/src/LiveComponent/src/EventListener/LiveComponentSubscriber.php
index 12ba03115bd..5e545ad9719 100644
--- a/src/LiveComponent/src/EventListener/LiveComponentSubscriber.php
+++ b/src/LiveComponent/src/EventListener/LiveComponentSubscriber.php
@@ -221,7 +221,11 @@ private static function parseDataFor(Request $request): array
                     'propsFromParent' => self::parseJsonFromQuery($request, 'propsFromParent'),
                 ];
             } else {
-                $requestData = $request->toArray();
+                try {
+                    $requestData = json_decode($request->request->get('data'), true, 512, \JSON_BIGINT_AS_STRING | \JSON_THROW_ON_ERROR);
+                } catch (\JsonException $e) {
+                    throw new JsonException('Could not decode request body.', $e->getCode(), $e);
+                }
 
                 $liveRequestData = [
                     'props' => $requestData['props'] ?? [],
diff --git a/src/LiveComponent/tests/Functional/Controller/BatchActionControllerTest.php b/src/LiveComponent/tests/Functional/Controller/BatchActionControllerTest.php
index f6ba2facfb1..10bece17ed6 100644
--- a/src/LiveComponent/tests/Functional/Controller/BatchActionControllerTest.php
+++ b/src/LiveComponent/tests/Functional/Controller/BatchActionControllerTest.php
@@ -13,6 +13,7 @@
 
 use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
 use Symfony\Component\DomCrawler\Crawler;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
 use Symfony\UX\LiveComponent\Tests\LiveComponentTestHelper;
 use Zenstruck\Browser\KernelBrowser;
 use Zenstruck\Browser\Test\HasBrowser;
@@ -31,7 +32,7 @@ public function testCanBatchActions(): void
 
         $this->browser()
             ->throwExceptions()
-            ->get('/_components/with_actions', ['json' => ['props' => $dehydrated->getProps()]])
+            ->get('/_components/with_actions', ['query' => ['props' => json_encode($dehydrated->getProps())]])
             ->assertSuccessful()
             ->assertSee('initial')
             ->use(function (Crawler $crawler, KernelBrowser $browser) {
@@ -39,9 +40,11 @@ public function testCanBatchActions(): void
                 $liveProps = json_decode($rootElement->attr('data-live-props-value'), true);
 
                 $browser->post('/_components/with_actions/add', [
-                    'json' => [
-                        'props' => $liveProps,
-                        'args' => ['what' => 'first'],
+                    'body' => [
+                        'data' => json_encode([
+                            'props' => $liveProps,
+                            'args' => ['what' => 'first'],
+                        ]),
                     ],
                     'headers' => ['X-CSRF-TOKEN' => $crawler->filter('ul')->first()->attr('data-live-csrf-value')],
                 ]);
@@ -53,13 +56,15 @@ public function testCanBatchActions(): void
                 $liveProps = json_decode($rootElement->attr('data-live-props-value'), true);
 
                 $browser->post('/_components/with_actions/_batch', [
-                    'json' => [
-                        'props' => $liveProps,
-                        'actions' => [
-                            ['name' => 'add', 'args' => ['what' => 'second']],
-                            ['name' => 'add', 'args' => ['what' => 'third']],
-                            ['name' => 'add', 'args' => ['what' => 'fourth']],
-                        ],
+                    'body' => [
+                        'data' => json_encode([
+                            'props' => $liveProps,
+                            'actions' => [
+                                ['name' => 'add', 'args' => ['what' => 'second']],
+                                ['name' => 'add', 'args' => ['what' => 'third']],
+                                ['name' => 'add', 'args' => ['what' => 'fourth']],
+                            ],
+                        ]),
                     ],
                     'headers' => ['X-CSRF-TOKEN' => $crawler->filter('ul')->first()->attr('data-live-csrf-value')],
                 ]);
@@ -78,7 +83,7 @@ public function testCanBatchActionsWithAlternateRoute(): void
 
         $this->browser()
             ->throwExceptions()
-            ->get('/alt/alternate_route', ['json' => ['props' => $dehydrated->getProps()]])
+            ->get('/alt/alternate_route', ['query' => ['props' => json_encode($dehydrated->getProps())]])
             ->assertSuccessful()
             ->assertSee('count: 0')
             ->use(function (Crawler $crawler, KernelBrowser $browser) {
@@ -86,13 +91,15 @@ public function testCanBatchActionsWithAlternateRoute(): void
                 $liveProps = json_decode($rootElement->attr('data-live-props-value'), true);
 
                 $browser->post('/alt/alternate_route/_batch', [
-                    'json' => [
-                        'props' => $liveProps,
-                        'actions' => [
-                            ['name' => 'increase'],
-                            ['name' => 'increase'],
-                            ['name' => 'increase'],
-                        ],
+                    'body' => [
+                        'data' => json_encode([
+                            'props' => $liveProps,
+                            'actions' => [
+                                ['name' => 'increase'],
+                                ['name' => 'increase'],
+                                ['name' => 'increase'],
+                            ],
+                        ]),
                     ],
                     'headers' => ['X-CSRF-TOKEN' => $rootElement->attr('data-live-csrf-value')],
                 ]);
@@ -122,7 +129,7 @@ public function testRedirect(): void
 
         $this->browser()
             ->throwExceptions()
-            ->get('/_components/with_actions', ['json' => ['props' => $dehydrated->getProps()]])
+            ->get('/_components/with_actions', ['query' => ['props' => json_encode($dehydrated->getProps())]])
             ->assertSuccessful()
             ->interceptRedirects()
             ->use(function (Crawler $crawler, KernelBrowser $browser) {
@@ -130,13 +137,15 @@ public function testRedirect(): void
                 $liveProps = json_decode($rootElement->attr('data-live-props-value'), true);
 
                 $browser->post('/_components/with_actions/_batch', [
-                    'json' => [
-                        'props' => $liveProps,
-                        'actions' => [
-                            ['name' => 'add', 'args' => ['what' => 'second']],
-                            ['name' => 'redirect'],
-                            ['name' => 'add', 'args' => ['what' => 'fourth']],
-                        ],
+                    'body' => [
+                        'data' => json_encode([
+                            'props' => $liveProps,
+                            'actions' => [
+                                ['name' => 'add', 'args' => ['what' => 'second']],
+                                ['name' => 'redirect'],
+                                ['name' => 'add', 'args' => ['what' => 'fourth']],
+                            ],
+                        ]),
                     ],
                     'headers' => ['X-CSRF-TOKEN' => $crawler->filter('ul')->first()->attr('data-live-csrf-value')],
                 ]);
@@ -150,26 +159,27 @@ public function testException(): void
         $dehydrated = $this->dehydrateComponent($this->mountComponent('with_actions'));
 
         $this->browser()
-            ->get('/_components/with_actions', ['json' => ['props' => $dehydrated->getProps()]])
+            ->get('/_components/with_actions', ['query' => ['props' => json_encode($dehydrated->getProps())]])
             ->assertSuccessful()
+            ->expectException(\RuntimeException::class, 'Exception message')
             ->use(function (Crawler $crawler, KernelBrowser $browser) {
                 $rootElement = $crawler->filter('ul')->first();
                 $liveProps = json_decode($rootElement->attr('data-live-props-value'), true);
 
                 $browser->post('/_components/with_actions/_batch', [
-                    'json' => [
-                        'props' => $liveProps,
-                        'actions' => [
-                            ['name' => 'add', 'args' => ['what' => 'second']],
-                            ['name' => 'exception'],
-                            ['name' => 'add', 'args' => ['what' => 'fourth']],
-                        ],
+                    'body' => [
+                        'data' => json_encode([
+                            'props' => $liveProps,
+                            'actions' => [
+                                ['name' => 'add', 'args' => ['what' => 'second']],
+                                ['name' => 'exception'],
+                                ['name' => 'add', 'args' => ['what' => 'fourth']],
+                            ],
+                        ]),
                     ],
                     'headers' => ['X-CSRF-TOKEN' => $crawler->filter('ul')->first()->attr('data-live-csrf-value')],
                 ]);
             })
-            ->assertStatus(500)
-            ->assertContains('Exception message')
         ;
     }
 
@@ -178,26 +188,27 @@ public function testCannotBatchWithNonLiveAction(): void
         $dehydrated = $this->dehydrateComponent($this->mountComponent('with_actions'));
 
         $this->browser()
-            ->get('/_components/with_actions', ['json' => ['props' => $dehydrated->getProps()]])
+            ->get('/_components/with_actions', ['query' => ['props' => json_encode($dehydrated->getProps())]])
             ->assertSuccessful()
+            ->expectException(NotFoundHttpException::class, 'The action "nonLive" either doesn\'t exist or is not allowed')
             ->use(function (Crawler $crawler, KernelBrowser $browser) {
                 $rootElement = $crawler->filter('ul')->first();
                 $liveProps = json_decode($rootElement->attr('data-live-props-value'), true);
 
                 $browser->post('/_components/with_actions/_batch', [
-                    'json' => [
-                        'props' => $liveProps,
-                        'actions' => [
-                            ['name' => 'add', 'args' => ['what' => 'second']],
-                            ['name' => 'nonLive'],
-                            ['name' => 'add', 'args' => ['what' => 'fourth']],
-                        ],
+                    'body' => [
+                        'data' => json_encode([
+                            'props' => $liveProps,
+                            'actions' => [
+                                ['name' => 'add', 'args' => ['what' => 'second']],
+                                ['name' => 'nonLive'],
+                                ['name' => 'add', 'args' => ['what' => 'fourth']],
+                            ],
+                        ]),
                     ],
                     'headers' => ['X-CSRF-TOKEN' => $crawler->filter('ul')->first()->attr('data-live-csrf-value')],
                 ]);
             })
-            ->assertStatus(404)
-            ->assertContains('The action \"nonLive\" either doesn\'t exist or is not allowed')
         ;
     }
 }
diff --git a/src/LiveComponent/tests/Functional/EventListener/LiveComponentSubscriberTest.php b/src/LiveComponent/tests/Functional/EventListener/LiveComponentSubscriberTest.php
index d0647f4221f..843c97433d4 100644
--- a/src/LiveComponent/tests/Functional/EventListener/LiveComponentSubscriberTest.php
+++ b/src/LiveComponent/tests/Functional/EventListener/LiveComponentSubscriberTest.php
@@ -85,7 +85,7 @@ public function testCanExecuteComponentActionNormalRoute(): void
             })
             ->post('/_components/component2/increase', [
                 'headers' => ['X-CSRF-TOKEN' => $token],
-                'body' => json_encode(['props' => $dehydrated->getProps()]),
+                'body' => ['data' => json_encode(['props' => $dehydrated->getProps()])],
             ])
             ->assertSuccessful()
             ->assertHeaderContains('Content-Type', 'html')
@@ -109,7 +109,7 @@ public function testCanExecuteComponentActionWithAlternateRoute(): void
             })
             ->post('/alt/alternate_route/increase', [
                 'headers' => ['X-CSRF-TOKEN' => $token],
-                'body' => json_encode(['props' => $dehydrated->getProps()]),
+                'body' => ['data' => json_encode(['props' => $dehydrated->getProps()])],
             ])
             ->assertSuccessful()
             ->assertOn('/alt/alternate_route/increase')
@@ -182,7 +182,7 @@ public function testDisabledCsrfTokenForComponentDoesNotFail(): void
             ->assertHeaderContains('Content-Type', 'html')
             ->assertContains('Count: 1')
             ->post('/_components/disabled_csrf/increase', [
-                'body' => json_encode(['props' => $dehydrated->getProps()]),
+                'body' => ['data' => json_encode(['props' => $dehydrated->getProps()])],
             ])
             ->assertSuccessful()
             ->assertHeaderContains('Content-Type', 'html')
@@ -221,7 +221,7 @@ public function testCanRedirectFromComponentAction(): void
             // with no custom header, it redirects like a normal browser
             ->post('/_components/component2/redirect', [
                 'headers' => ['X-CSRF-TOKEN' => $token],
-                'body' => json_encode(['props' => $dehydrated->getProps()]),
+                'body' => ['data' => json_encode(['props' => $dehydrated->getProps()])],
             ])
             ->assertRedirectedTo('/')
 
@@ -231,7 +231,7 @@ public function testCanRedirectFromComponentAction(): void
                     'Accept' => 'application/vnd.live-component+html',
                     'X-CSRF-TOKEN' => $token,
                 ],
-                'body' => json_encode(['props' => $dehydrated->getProps()]),
+                'body' => ['data' => json_encode(['props' => $dehydrated->getProps()])],
             ])
             ->assertStatus(204)
             ->assertHeaderEquals('Location', '/')
@@ -260,10 +260,12 @@ public function testInjectsLiveArgs(): void
             })
             ->post('/_components/component6/inject', [
                 'headers' => ['X-CSRF-TOKEN' => $token],
-                'body' => json_encode([
-                    'props' => $dehydrated->getProps(),
-                    'args' => $arguments,
-                ]),
+                'body' => [
+                    'data' => json_encode([
+                        'props' => $dehydrated->getProps(),
+                        'args' => $arguments,
+                    ]),
+                ],
             ])
             ->assertSuccessful()
             ->assertHeaderContains('Content-Type', 'html')
diff --git a/src/LiveComponent/tests/Functional/Form/ComponentWithFormTest.php b/src/LiveComponent/tests/Functional/Form/ComponentWithFormTest.php
index f58d5f7c331..9bb42938966 100644
--- a/src/LiveComponent/tests/Functional/Form/ComponentWithFormTest.php
+++ b/src/LiveComponent/tests/Functional/Form/ComponentWithFormTest.php
@@ -53,7 +53,7 @@ public function testFormValuesRebuildAfterFormChanges(): void
         $crawler = $browser
             // post to action, which will add a new embedded comment
             ->post('/_components/form_with_collection_type/addComment', [
-                'body' => json_encode(['props' => $dehydratedProps, 'updated' => $updatedProps]),
+                'body' => ['data' => json_encode(['props' => $dehydratedProps, 'updated' => $updatedProps])],
                 'headers' => ['X-CSRF-TOKEN' => $token],
             ])
             ->assertStatus(422)
@@ -89,7 +89,7 @@ public function testFormValuesRebuildAfterFormChanges(): void
         $crawler = $browser
             // post to action, which will remove the original embedded comment
             ->post('/_components/form_with_collection_type/removeComment', [
-                'body' => json_encode(['props' => $dehydratedProps, 'updated' => $updatedProps, 'args' => ['index' => '0']]),
+                'body' => ['data' => json_encode(['props' => $dehydratedProps, 'updated' => $updatedProps, 'args' => ['index' => '0']])],
                 'headers' => ['X-CSRF-TOKEN' => $token],
             ])
             ->assertStatus(422)
@@ -111,7 +111,7 @@ public function testFormValuesRebuildAfterFormChanges(): void
         $browser
             // empty the collection
             ->post('/_components/form_with_collection_type/removeComment', [
-                'body' => json_encode(['props' => $dehydratedProps, 'args' => ['index' => '1']]),
+                'body' => ['data' => json_encode(['props' => $dehydratedProps, 'args' => ['index' => '1']])],
                 'headers' => ['X-CSRF-TOKEN' => $token],
             ])
             ->assertStatus(422)
@@ -296,10 +296,10 @@ public function testResetForm(): void
 
         $browser
             ->post('/_components/form_with_many_different_fields_type/submitAndResetForm', [
-                'body' => json_encode([
+                'body' => ['data' => json_encode([
                     'props' => $dehydratedProps,
                     'updated' => ['form.textarea' => 'short'],
-                ]),
+                ])],
                 'headers' => ['X-CSRF-TOKEN' => $token],
             ])
             ->assertStatus(200)
@@ -309,7 +309,7 @@ public function testResetForm(): void
         // try resetting without submitting
         $browser
             ->post('/_components/form_with_many_different_fields_type/resetFormWithoutSubmitting', [
-                'body' => json_encode(['props' => $dehydratedProps]),
+                'body' => ['data' => json_encode(['props' => $dehydratedProps])],
                 'headers' => ['X-CSRF-TOKEN' => $token],
             ])
             ->assertStatus(200)
@@ -336,7 +336,7 @@ public function testLiveCollectionTypeFieldsAddedAndRemoved(): void
             })
             // post to action, which will add a new embedded comment
             ->post('/_components/form_with_live_collection_type/addCollectionItem', [
-                'body' => json_encode(['props' => $dehydratedProps, 'updated' => $updatedProps, 'args' => ['name' => 'blog_post_form[comments]']]),
+                'body' => ['data' => json_encode(['props' => $dehydratedProps, 'updated' => $updatedProps, 'args' => ['name' => 'blog_post_form[comments]']])],
                 'headers' => ['X-CSRF-TOKEN' => $token],
             ])
             ->assertStatus(422)
@@ -373,7 +373,7 @@ public function testLiveCollectionTypeFieldsAddedAndRemoved(): void
 
             // post to action, which will remove the original embedded comment
             ->post('/_components/form_with_live_collection_type/removeCollectionItem', [
-                'body' => json_encode(['props' => $dehydratedProps, 'updated' => $updatedProps, 'args' => ['name' => 'blog_post_form[comments]', 'index' => '0']]),
+                'body' => ['data' => json_encode(['props' => $dehydratedProps, 'updated' => $updatedProps, 'args' => ['name' => 'blog_post_form[comments]', 'index' => '0']])],
                 'headers' => ['X-CSRF-TOKEN' => $token],
             ])
             ->assertStatus(422)
diff --git a/src/LiveComponent/tests/Functional/LiveResponderTest.php b/src/LiveComponent/tests/Functional/LiveResponderTest.php
index 2412dc66fda..833713bf350 100644
--- a/src/LiveComponent/tests/Functional/LiveResponderTest.php
+++ b/src/LiveComponent/tests/Functional/LiveResponderTest.php
@@ -31,7 +31,7 @@ public function testComponentCanEmitEvents(): void
         $this->browser()
             ->throwExceptions()
             ->post('/_components/component_with_emit/actionThatEmits', [
-                'body' => json_encode(['props' => $dehydrated->getProps()]),
+                'body' => ['data' => json_encode(['props' => $dehydrated->getProps()])],
             ])
             ->assertSuccessful()
             ->assertSee('Event: event1')
@@ -46,7 +46,7 @@ public function testComponentCanDispatchBrowserEvents(): void
         $crawler = $this->browser()
             ->throwExceptions()
             ->post('/_components/component_with_emit/actionThatDispatchesABrowserEvent', [
-                'body' => json_encode(['props' => $dehydrated->getProps()]),
+                'body' => ['data' => json_encode(['props' => $dehydrated->getProps()])],
             ])
             ->assertSuccessful()
             ->crawler()
diff --git a/src/LiveComponent/tests/Functional/ValidatableComponentTraitTest.php b/src/LiveComponent/tests/Functional/ValidatableComponentTraitTest.php
index 2a41577fb23..452115a4c76 100644
--- a/src/LiveComponent/tests/Functional/ValidatableComponentTraitTest.php
+++ b/src/LiveComponent/tests/Functional/ValidatableComponentTraitTest.php
@@ -62,8 +62,10 @@ public function testFormValuesRebuildAfterFormChanges(): void
 
         $browser
             ->post('/_components/validating_component/resetValidationAction', [
-                'json' => [
-                    'props' => $dehydratedProps,
+                'body' => [
+                    'data' => json_encode([
+                        'props' => $dehydratedProps,
+                    ]),
                 ],
             ])
             ->assertSuccessful()
diff --git a/src/TwigComponent/src/Test/InteractsWithTwigComponents.php b/src/TwigComponent/src/Test/InteractsWithTwigComponents.php
index 810e332c1fa..d9a50533dce 100644
--- a/src/TwigComponent/src/Test/InteractsWithTwigComponents.php
+++ b/src/TwigComponent/src/Test/InteractsWithTwigComponents.php
@@ -30,7 +30,7 @@ protected function mountTwigComponent(string $name, array $data = []): object
     /**
      * @param array<string,string> $blocks
      */
-    protected function renderTwigComponent(string $name, array $data = [], ?string $content = null, array $blocks = []): RenderedComponent
+    protected function renderTwigComponent(string $name, array $data = [], string $content = null, array $blocks = []): RenderedComponent
     {
         if (!$this instanceof KernelTestCase) {
             throw new \LogicException(sprintf('The "%s" trait can only be used on "%s" classes.', __TRAIT__, KernelTestCase::class));
diff --git a/ux.symfony.com/assets/images/live_demo/upload.png b/ux.symfony.com/assets/images/live_demo/upload.png
new file mode 100644
index 00000000000..aea1dceed87
Binary files /dev/null and b/ux.symfony.com/assets/images/live_demo/upload.png differ
diff --git a/ux.symfony.com/src/Controller/LiveComponentDemoController.php b/ux.symfony.com/src/Controller/LiveComponentDemoController.php
index f06a8accd58..78c0697961c 100644
--- a/ux.symfony.com/src/Controller/LiveComponentDemoController.php
+++ b/ux.symfony.com/src/Controller/LiveComponentDemoController.php
@@ -108,4 +108,12 @@ public function productForm(LiveDemoRepository $liveDemoRepository): Response
             'demo' => $liveDemoRepository->find('product_form'),
         ]);
     }
+
+    #[Route('/upload', name: 'app_live_components_upload')]
+    public function uploadFiles(LiveDemoRepository $liveDemoRepository): Response
+    {
+        return $this->render('live_component_demo/upload.html.twig', parameters: [
+            'demo' => $liveDemoRepository->find('upload'),
+        ]);
+    }
 }
diff --git a/ux.symfony.com/src/Service/LiveDemoRepository.php b/ux.symfony.com/src/Service/LiveDemoRepository.php
index 6d5961fa0ff..2c1d0f93ec3 100644
--- a/ux.symfony.com/src/Service/LiveDemoRepository.php
+++ b/ux.symfony.com/src/Service/LiveDemoRepository.php
@@ -98,6 +98,15 @@ public function findAll(): array
                 route: 'app_live_components_product_form',
                 longDescription: <<<EOF
 Open a child modal component to create a new Category.
+EOF
+            ),
+            new LiveDemo(
+                'upload',
+                name: 'Uploading files',
+                description: 'Upload file from your live component through a LiveAction.',
+                route: 'app_live_components_upload',
+                longDescription: <<<EOF
+File uploads are tricky. Submit them to a `#[LiveAction]` with the `files` modifier on `data-live-action` then process them.
 EOF
             ),
         ];
diff --git a/ux.symfony.com/src/Twig/UploadFiles.php b/ux.symfony.com/src/Twig/UploadFiles.php
new file mode 100644
index 00000000000..fbb22ee4566
--- /dev/null
+++ b/ux.symfony.com/src/Twig/UploadFiles.php
@@ -0,0 +1,78 @@
+<?php
+
+namespace App\Twig;
+
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpKernel\Exception\UnprocessableEntityHttpException;
+use Symfony\Component\Validator\Constraints as Assert;
+use Symfony\Component\Validator\Validator\ValidatorInterface;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent()]
+class UploadFiles
+{
+    use DefaultActionTrait;
+
+    public function __construct(private ValidatorInterface $validator)
+    {
+    }
+
+    #[LiveProp]
+    public ?string $singleUploadFilename = null;
+    #[LiveProp]
+    public ?string $singleFileUploadError = null;
+
+    #[LiveProp]
+    public array $multipleUploadFilenames = [];
+
+    #[LiveAction]
+    public function uploadFiles(Request $request): void
+    {
+        $singleFileUpload = $request->files->get('single');
+        if ($singleFileUpload) {
+            $this->validateSingleFile($singleFileUpload);
+        }
+
+        if ($singleFileUpload instanceof UploadedFile) {
+            [$this->singleUploadFilename] = $this->processFileUpload($singleFileUpload);
+        }
+
+        $multiple = $request->files->all('multiple');
+        foreach ($multiple as $file) {
+            if ($file instanceof UploadedFile) {
+                [$filename, $size] = $this->processFileUpload($file);
+                $this->multipleUploadFilenames[] = ['filename' => $filename, 'size' => $size];
+            }
+        }
+    }
+
+    private function processFileUpload(UploadedFile $file): array
+    {
+        // in a real app, move this file somewhere
+        // $file->move(...);
+
+        return [$file->getClientOriginalName(), $file->getSize()];
+    }
+
+    private function validateSingleFile(UploadedFile $singleFileUpload): void
+    {
+        $errors = $this->validator->validate($singleFileUpload, [
+            new Assert\File([
+                'maxSize' => '1M',
+            ]),
+        ]);
+
+        if (0 === \count($errors)) {
+            return;
+        }
+
+        $this->singleFileUploadError = $errors->get(0)->getMessage();
+
+        // causes the component to re-render
+        throw new UnprocessableEntityHttpException('Validation failed');
+    }
+}
diff --git a/ux.symfony.com/templates/components/UploadFiles.html.twig b/ux.symfony.com/templates/components/UploadFiles.html.twig
new file mode 100644
index 00000000000..9bd0858df5c
--- /dev/null
+++ b/ux.symfony.com/templates/components/UploadFiles.html.twig
@@ -0,0 +1,43 @@
+<div class="container" {{ attributes }}>
+    <p class="text-muted"><strong>Note:</strong> files aren't persisted and will be lost on each rerender if not stored.</p>
+    <div class="form-group mb-3">
+        <label for="single-file" class="form-label">Single file:</label>
+        <input
+            type="file"
+            name="single"
+            autocomplete="off"
+            id="single-file"
+            class="form-control-file {{ singleFileUploadError ? 'is-invalid' : '' }}"
+        >
+        <div class="form-text text-muted">Current file:
+        {% if singleUploadFilename %}
+            {{ singleUploadFilename }}
+        {% else %}
+            none
+        {% endif %}
+        </div>
+        {% if singleFileUploadError %}
+            <div class="invalid-feedback">{{ singleFileUploadError }}</div>
+        {% endif %}
+    </div>
+    <div class="form-group mb-3">
+        <label for="multiple-files" class="form-label">Multiple files:</label>
+        <input type="file" name="multiple[]" autocomplete="off" multiple="" id="multiple-files" class="form-control-file">
+        <div class="form-text text-muted">Current files:
+        {% if multipleUploadFilenames %}
+        <ul>
+            {% for file in multipleUploadFilenames %}
+                <li>{{ file.filename }} ({{ file.size }} bytes)</li>
+            {% endfor %}
+        </ul>
+        {% else %}
+            (none)
+        {% endif %}
+        </div>
+    </div>
+    <button
+        data-action="live#action"
+        data-action-name="files|uploadFiles"
+        class="btn btn-primary"
+    >Upload files!</button>
+</div>
diff --git a/ux.symfony.com/templates/live_component_demo/upload.html.twig b/ux.symfony.com/templates/live_component_demo/upload.html.twig
new file mode 100644
index 00000000000..14f5960b059
--- /dev/null
+++ b/ux.symfony.com/templates/live_component_demo/upload.html.twig
@@ -0,0 +1,13 @@
+{% extends 'liveDemoBase.html.twig' %}
+
+{% block code_block_left %}
+    <twig:CodeBlock filename="src/Twig/UploadFiles.php" height="400px" />
+{% endblock %}
+
+{% block code_block_right %}
+    <twig:CodeBlock filename="templates/components/UploadFiles.html.twig" height="400px" />
+{% endblock %}
+
+{% block demo_content %}
+    {{ component('UploadFiles') }}
+{% endblock %}