From 5b9b5994266c4d850e4059d152cb00b452be23e3 Mon Sep 17 00:00:00 2001
From: tkow <t.kusama0613@outlook.jp>
Date: Thu, 16 Dec 2021 21:17:44 +0900
Subject: [PATCH 1/9] feat: add onSubmitRemove prop

---
 packages/ra-ui-materialui/src/input/FileInput.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/ra-ui-materialui/src/input/FileInput.tsx b/packages/ra-ui-materialui/src/input/FileInput.tsx
index 6824d13e479..8f2c814f41f 100644
--- a/packages/ra-ui-materialui/src/input/FileInput.tsx
+++ b/packages/ra-ui-materialui/src/input/FileInput.tsx
@@ -33,6 +33,7 @@ export const FileInput = (
         maxSize,
         minSize,
         multiple = false,
+        onSubmitRemove,
         options: {
             inputProps: inputPropsOptions,
             ...options
@@ -111,7 +112,11 @@ export const FileInput = (
         }
     };
 
-    const onRemove = file => () => {
+    const onRemove = file => async () => {
+        if (onSubmitRemove) {
+            const isSuccess = await onSubmitRemove(file);
+            if (!isSuccess) return;
+        }
         if (multiple) {
             const filteredFiles = files.filter(
                 stateFile => !shallowEqual(stateFile, file)
@@ -216,6 +221,7 @@ FileInput.propTypes = {
     maxSize: PropTypes.number,
     minSize: PropTypes.number,
     multiple: PropTypes.bool,
+    onSubmitRemove: PropTypes.func,
     options: PropTypes.object,
     resource: PropTypes.string,
     source: PropTypes.string,
@@ -250,6 +256,7 @@ export interface FileInputProps
         DropzoneOptions,
         'accept' | 'multiple' | 'maxSize' | 'minSize'
     > {
+    onSubmitRemove?(file): boolean | Promise<boolean>;
     children?: ReactNode;
     labelMultiple?: string;
     labelSingle?: string;

From 4587a5a1db832f9fc30b9710b913b8b36bf494d2 Mon Sep 17 00:00:00 2001
From: tkow <t.kusama0613@outlook.jp>
Date: Thu, 16 Dec 2021 21:18:25 +0900
Subject: [PATCH 2/9] feat: add onSubmitRemove prop test

---
 .../src/input/FileInput.spec.tsx              | 216 +++++++++++++++++-
 1 file changed, 214 insertions(+), 2 deletions(-)

diff --git a/packages/ra-ui-materialui/src/input/FileInput.spec.tsx b/packages/ra-ui-materialui/src/input/FileInput.spec.tsx
index ca2c9314f2b..6dc6dc185b6 100644
--- a/packages/ra-ui-materialui/src/input/FileInput.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/FileInput.spec.tsx
@@ -1,7 +1,11 @@
 import * as React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import {
+    render,
+    fireEvent,
+    waitForElementToBeRemoved,
+    waitFor,
+} from '@testing-library/react';
 import { Form } from 'react-final-form';
-
 import { FileField, ImageField } from '../field';
 import { FileInput } from './FileInput';
 
@@ -247,6 +251,214 @@ describe('<FileInput />', () => {
         });
     });
 
+    describe('should stop to remove file field onSubmitReview return false', () => {
+        it('normal function', async () => {
+            const onSubmit = jest.fn();
+
+            const { getByLabelText, getByTitle } = render(
+                <Form
+                    initialValues={{
+                        image: {
+                            src: 'test.png',
+                            title: 'cats',
+                        },
+                    }}
+                    onSubmit={onSubmit}
+                    render={({ handleSubmit }) => (
+                        <form onSubmit={handleSubmit}>
+                            <FileInput
+                                {...defaultProps}
+                                onSubmitRemove={file => false}
+                            >
+                                <FileField source="src" title="title" />
+                            </FileInput>
+                            <button type="submit" aria-label="Save" />
+                        </form>
+                    )}
+                />
+            );
+
+            const fileDom = getByTitle('cats');
+            expect(fileDom).not.toBeNull();
+            fireEvent.click(getByLabelText('ra.action.delete'));
+            await waitFor(() => {
+                expect(fileDom).not.toBeNull();
+            });
+            fireEvent.click(getByLabelText('Save'));
+
+            expect(onSubmit.mock.calls[0][0]).toEqual({
+                image: {
+                    src: 'test.png',
+                    title: 'cats',
+                },
+            });
+        });
+        it('promise function', async () => {
+            const onSubmit = jest.fn();
+
+            const { getByLabelText, getByTitle } = render(
+                <Form
+                    initialValues={{
+                        image: {
+                            src: 'test.png',
+                            title: 'cats',
+                        },
+                    }}
+                    onSubmit={onSubmit}
+                    render={({ handleSubmit }) => (
+                        <form onSubmit={handleSubmit}>
+                            <FileInput
+                                {...defaultProps}
+                                onSubmitRemove={async file => false}
+                            >
+                                <FileField source="src" title="title" />
+                            </FileInput>
+                            <button type="submit" aria-label="Save" />
+                        </form>
+                    )}
+                />
+            );
+            const fileDom = getByTitle('cats');
+            expect(fileDom).not.toBeNull();
+            fireEvent.click(getByLabelText('ra.action.delete'));
+            await waitFor(() => {
+                expect(fileDom).not.toBeNull();
+            });
+            fireEvent.click(getByLabelText('Save'));
+            expect(onSubmit.mock.calls[0][0]).toEqual({
+                image: {
+                    src: 'test.png',
+                    title: 'cats',
+                },
+            });
+        });
+        it('error occurs', async done => {
+            const dummy = jest.fn();
+            const onSubmit = jest.fn();
+            // NOTE: We couldn't handle UnhandledPromiseRejection and make
+            // ErrorBoundary method of https://github.com/testing-library/react-testing-library/issues/828#issuecomment-729860950 work,
+            // so make mimic methods to read final states when process force exit by errors instead of throw new Error.
+            const errorMockFn = jest.fn(() => {
+                fireEvent.click(getByLabelText('Save'));
+                expect(onSubmit.mock.calls[0][0]).toEqual({
+                    image: {
+                        src: 'test.png',
+                        title: 'cats',
+                    },
+                });
+                // NOTE: Mimicking throw Error.The done method finish process even if having waitFor not resolved.
+                done();
+                return true;
+            });
+            const { getByLabelText, getByTitle } = render(
+                <Form
+                    initialValues={{
+                        image: {
+                            src: 'test.png',
+                            title: 'cats',
+                        },
+                    }}
+                    onSubmit={onSubmit}
+                    render={({ handleSubmit }) => (
+                        <form onSubmit={handleSubmit}>
+                            <FileInput
+                                {...defaultProps}
+                                onSubmitRemove={errorMockFn}
+                            >
+                                <FileField source="src" title="title" />
+                            </FileInput>
+                            <button type="submit" aria-label="Save" />
+                        </form>
+                    )}
+                />
+            );
+
+            const fileDom = getByTitle('cats');
+            expect(fileDom).not.toBeNull();
+            fireEvent.click(getByLabelText('ra.action.delete'));
+            await waitFor(() => {
+                // NOTE: This is dummy method never called, but test will be done for jest's done method.
+                // This is mimicked as throw error and process abandoned.
+                expect(dummy).toBeCalled();
+            });
+        });
+    });
+
+    describe('should continue to remove file field onSubmitReview return true', () => {
+        it('normal function', async () => {
+            const onSubmit = jest.fn();
+
+            const { getByLabelText, getByTitle } = render(
+                <Form
+                    initialValues={{
+                        image: {
+                            src: 'test.png',
+                            title: 'cats',
+                        },
+                    }}
+                    onSubmit={onSubmit}
+                    render={({ handleSubmit }) => (
+                        <form onSubmit={handleSubmit}>
+                            <FileInput
+                                {...defaultProps}
+                                onSubmitRemove={file => true}
+                            >
+                                <FileField source="src" title="title" />
+                            </FileInput>
+                            <button type="submit" aria-label="Save" />
+                        </form>
+                    )}
+                />
+            );
+
+            const fileDom = getByTitle('cats');
+            expect(fileDom).not.toBeNull();
+            fireEvent.click(getByLabelText('ra.action.delete'));
+            await waitForElementToBeRemoved(fileDom);
+            fireEvent.click(getByLabelText('Save'));
+
+            expect(onSubmit.mock.calls[0][0]).toEqual({
+                image: null,
+            });
+        });
+        it('promise function', async () => {
+            const onSubmit = jest.fn();
+
+            const { getByLabelText, getByTitle } = render(
+                <Form
+                    initialValues={{
+                        image: {
+                            src: 'test.png',
+                            title: 'cats',
+                        },
+                    }}
+                    onSubmit={onSubmit}
+                    render={({ handleSubmit }) => (
+                        <form onSubmit={handleSubmit}>
+                            <FileInput
+                                {...defaultProps}
+                                onSubmitRemove={async file => true}
+                            >
+                                <FileField source="src" title="title" />
+                            </FileInput>
+                            <button type="submit" aria-label="Save" />
+                        </form>
+                    )}
+                />
+            );
+
+            const fileDom = getByTitle('cats');
+            expect(fileDom).not.toBeNull();
+            fireEvent.click(getByLabelText('ra.action.delete'));
+            await waitForElementToBeRemoved(fileDom);
+            fireEvent.click(getByLabelText('Save'));
+
+            expect(onSubmit.mock.calls[0][0]).toEqual({
+                image: null,
+            });
+        });
+    });
+
     it('should display correct custom label', () => {
         const test = (expectedLabel, expectedLabelText = expectedLabel) => {
             const { getByText } = render(

From 2e70ec4d31fbb53dd612ed602e7cb3083e30941a Mon Sep 17 00:00:00 2001
From: tkow <t.kusama0613@outlook.jp>
Date: Thu, 16 Dec 2021 21:58:15 +0900
Subject: [PATCH 3/9] feat: update doc about onSubmitRemove prop in FileInput

---
 docs/Inputs.md | 37 +++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/docs/Inputs.md b/docs/Inputs.md
index 0a17baf3048..648e245225e 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -165,7 +165,7 @@ To override the style of all instances of `<NullableBooleanInput>` using the [ma
 
 ### `<DateInput>`
 
-Ideal for editing dates, `<DateInput>` renders an HTML `<input type="date">` element, that most browsers display as a standard [Date Picker](https://material-ui.com/components/pickers/#date-pickers). 
+Ideal for editing dates, `<DateInput>` renders an HTML `<input type="date">` element, that most browsers display as a standard [Date Picker](https://material-ui.com/components/pickers/#date-pickers).
 
 ![DateInput](./img/date-input.gif)
 
@@ -278,6 +278,7 @@ To override the style of all instances of `<ImageInput>` using the [material-ui
 | `labelSingle`   | Optional | `string`             | 'ra.input.file. upload_single'  | Invite displayed in the drop zone if the input accepts one file                                                                                                                                                                                                                                                                                        |
 | `labelMultiple` | Optional | `string`             | 'ra.input.file. upload_several' | Invite displayed in the drop zone if the input accepts several files                                                                                                                                                                                                                                                                                   |
 | `placeholder`   | Optional | `ReactNode`          | -                               | Invite displayed in the drop zone, overrides `labelSingle` and `labelMultiple`                                                                                                                                                                                                                                                                         |
+| `onSubmitRemove`   | Optional | `Function`          | -                               | Set remove button click handler. Main difference from options.onRemove is able to cancel to remove the file's list item if it returns false `(file) => boolean \| Promise<boolean>`                                                                                                                                                                                                                                                                         |
 | `options`       | Optional | `Object`             | `{}`                            | Additional options passed to react-dropzone's `useDropzone()` hook. See [the react-dropzone source](https://github.com/react-dropzone/react-dropzone/blob/master/src/index.js)  for details .                                                                                                                                                          |
 
 `<FileInput>` also accepts the [common input props](./Inputs.md#common-input-props).
@@ -298,7 +299,7 @@ Writing a custom preview component is quite straightforward: it's a standard [fi
 
 When receiving **new** files, `FileInput` will add a `rawFile` property to the object passed as the `record` prop of children. This `rawFile` is the [File](https://developer.mozilla.org/en-US/docs/Web/API/File) instance of the newly added file. This can be useful to display information about size or MIME type inside a custom field.
 
-The `FileInput` component accepts an `options` prop into which you can pass all the [react-dropzone properties](https://react-dropzone.netlify.com/#proptypes). 
+The `FileInput` component accepts an `options` prop into which you can pass all the [react-dropzone properties](https://react-dropzone.netlify.com/#proptypes).
 
 If the default Dropzone label doesn't fit with your need, you can pass a `placeholder` prop to overwrite it. The value can be anything React can render (`PropTypes.node`):
 
@@ -345,7 +346,7 @@ Check [the `ra-markdown` documentation](https://marmelab.com/ra-enterprise/modul
 
 ### `<NumberInput>`
 
-`<NumberInput>` translates to an HTML `<input type="number">`. 
+`<NumberInput>` translates to an HTML `<input type="number">`.
 
 ![NumberInput](./img/number-input.gif)
 
@@ -464,7 +465,7 @@ const configureQuill = quill => quill.getModule('toolbar').addHandler('bold', fu
 
 `<RichTextInput>` also accepts the [common input props](./Inputs.md#common-input-props).
 
-**Tip**: When used inside a material-ui `<Card>` (e.g in the default `<Edit>` view), `<RichTextInput>` displays link tooltip as cut off when the user wants to add a hyperlink to a word located on the left side of the input. This is due to an incompatibility between material-ui's `<Card>` component and Quill's positioning algorithm for the link tooltip. 
+**Tip**: When used inside a material-ui `<Card>` (e.g in the default `<Edit>` view), `<RichTextInput>` displays link tooltip as cut off when the user wants to add a hyperlink to a word located on the left side of the input. This is due to an incompatibility between material-ui's `<Card>` component and Quill's positioning algorithm for the link tooltip.
 
 To fix this problem, you should override the default card style, as follows:
 
@@ -799,7 +800,7 @@ To override the style of all instances of `<AutocompleteInput>` using the [mater
 
 ### `<RadioButtonGroupInput>`
 
-If you want to let the user choose a value among a list of possible values that are always shown (instead of hiding them behind a dropdown list, as in [`<SelectInput>`](#selectinput)), `<RadioButtonGroupInput>` is the right component. 
+If you want to let the user choose a value among a list of possible values that are always shown (instead of hiding them behind a dropdown list, as in [`<SelectInput>`](#selectinput)), `<RadioButtonGroupInput>` is the right component.
 
 ![RadioButtonGroupInput](./img/radio-button-group-input.gif)
 
@@ -910,7 +911,7 @@ To override the style of all instances of `<RadioButtonGroupInput>` using the [m
 
 ### `<SelectInput>`
 
-To let users choose a value in a list using a dropdown, use `<SelectInput>`. It renders using [Material ui's `<Select>`](https://material-ui.com/api/select). 
+To let users choose a value in a list using a dropdown, use `<SelectInput>`. It renders using [Material ui's `<Select>`](https://material-ui.com/api/select).
 
 ![SelectInput](./img/select-input.gif)
 
@@ -1283,7 +1284,7 @@ import { ArrayInput, SimpleFormIterator, DateInput, TextInput, FormDataConsumer
 </ArrayInput>
 ```
 
-`<ArrayInput>` also accepts the [common input props](./Inputs.md#common-input-props) (except `format` and `parse`). 
+`<ArrayInput>` also accepts the [common input props](./Inputs.md#common-input-props) (except `format` and `parse`).
 
 **Important**: Note that asynchronous validators are not supported on the `<ArrayInput>` component due to a limitation of [react-final-form-arrays](https://github.com/final-form/react-final-form-arrays).
 
@@ -1339,7 +1340,7 @@ import { AutocompleteArrayInput } from 'react-admin';
 }
 ```
 
-When working with a field that contains an array of *objects*, use `parse` and `format` to turn the value into an array of scalar values. 
+When working with a field that contains an array of *objects*, use `parse` and `format` to turn the value into an array of scalar values.
 
 So for instance, for editing the `tags` field of records looking like the following:
 
@@ -1349,7 +1350,7 @@ So for instance, for editing the `tags` field of records looking like the follow
   "tags": [
       { "id": "lifestyle" },
       { "id": "photography" }
-   ] 
+   ]
 }
 ```
 
@@ -1358,7 +1359,7 @@ You should use the following syntax:
 ```jsx
 import { AutocompleteArrayInput } from 'react-admin';
 
-<AutocompleteArrayInput 
+<AutocompleteArrayInput
     source="tags"
     parse={value =>
         value && value.map(v => ({ id: v }))
@@ -1583,7 +1584,7 @@ To override the style of all instances of `<AutocompleteArrayInput>` using the [
 
 ### `<CheckboxGroupInput>`
 
-If you want to let the user choose multiple values among a list of possible values by showing them all, `<CheckboxGroupInput>` is the right component. 
+If you want to let the user choose multiple values among a list of possible values by showing them all, `<CheckboxGroupInput>` is the right component.
 
 ![CheckboxGroupInput](./img/checkbox-group-input.png)
 
@@ -1703,7 +1704,7 @@ Check [the `ra-relationships` documentation](https://marmelab.com/ra-enterprise/
 
 ### `<SelectArrayInput>`
 
-To let users choose several values in a list using a dropdown, use `<SelectArrayInput>`. It renders using [Material ui's `<Select>`](https://material-ui.com/api/select). 
+To let users choose several values in a list using a dropdown, use `<SelectArrayInput>`. It renders using [Material ui's `<Select>`](https://material-ui.com/api/select).
 
 ![SelectArrayInput](./img/select-array-input.gif)
 
@@ -1774,7 +1775,7 @@ const choices = [
 ];
 ```
 
-You can render any item as disabled by setting its `disabled` property to `true`: 
+You can render any item as disabled by setting its `disabled` property to `true`:
 
 ```jsx
 const choices = [
@@ -1785,7 +1786,7 @@ const choices = [
 <SelectArrayInput source="author_id" choices={choices} optionText="full_name" optionValue="_id" />
 ```
 
-You can use a custom field name by setting the `disableValue` prop: 
+You can use a custom field name by setting the `disableValue` prop:
 
 ```jsx
 const choices = [
@@ -1969,7 +1970,7 @@ const CreateTag = () => {
 To override the style of all instances of `<SelectArrayInput>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaSelectArrayInput` key.
 
 
-## Reference Inputs 
+## Reference Inputs
 
 ### `<ReferenceArrayInput>`
 
@@ -2096,7 +2097,7 @@ Any component descendant of `<ReferenceArrayInput>` can grab information from th
 const {
     choices, // An array of records matching both the current input value and the filters
     error, // A potential error that may have occured while fetching the data
-    warning, // A potential warning regarding missing references 
+    warning, // A potential warning regarding missing references
     loaded, // boolean that is false until the data is available
     loading, // boolean that is true on mount, and false once the data was fetched
     setFilter, // a callback to update the filters, e.g. setFilters({ q: 'query' })
@@ -2423,7 +2424,7 @@ You can add validators to any of the inputs inside a `TranslatableInputs`. If an
 </TranslatableInputs>
 ```
 
-## Recipes 
+## Recipes
 
 ### Transforming Input Value to/from Record
 
@@ -2469,7 +2470,7 @@ const dateParser = v => {
 
 Edition forms often contain linked inputs, e.g. country and city (the choices of the latter depending on the value of the former).
 
-React-admin relies on [react-final-form](https://final-form.org/docs/react-final-form/getting-started) for form handling. You can grab the current form values using react-final-form [useFormState](https://final-form.org/docs/react-final-form/api/useFormState) hook. 
+React-admin relies on [react-final-form](https://final-form.org/docs/react-final-form/getting-started) for form handling. You can grab the current form values using react-final-form [useFormState](https://final-form.org/docs/react-final-form/api/useFormState) hook.
 
 ```jsx
 import * as React from 'react';

From 146cac889fdc5817f03d43a1f74f794f431d7860 Mon Sep 17 00:00:00 2001
From: tkow <t.kusama0613@outlook.jp>
Date: Thu, 16 Dec 2021 22:23:53 +0900
Subject: [PATCH 4/9] fix: test

---
 packages/ra-ui-materialui/src/input/FileInput.spec.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/ra-ui-materialui/src/input/FileInput.spec.tsx b/packages/ra-ui-materialui/src/input/FileInput.spec.tsx
index 6dc6dc185b6..3d38fcab51a 100644
--- a/packages/ra-ui-materialui/src/input/FileInput.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/FileInput.spec.tsx
@@ -333,7 +333,6 @@ describe('<FileInput />', () => {
             });
         });
         it('error occurs', async done => {
-            const dummy = jest.fn();
             const onSubmit = jest.fn();
             // NOTE: We couldn't handle UnhandledPromiseRejection and make
             // ErrorBoundary method of https://github.com/testing-library/react-testing-library/issues/828#issuecomment-729860950 work,
@@ -376,11 +375,6 @@ describe('<FileInput />', () => {
             const fileDom = getByTitle('cats');
             expect(fileDom).not.toBeNull();
             fireEvent.click(getByLabelText('ra.action.delete'));
-            await waitFor(() => {
-                // NOTE: This is dummy method never called, but test will be done for jest's done method.
-                // This is mimicked as throw error and process abandoned.
-                expect(dummy).toBeCalled();
-            });
         });
     });
 

From 798658fdfc4b992e53559f0bc6e74284ada38457 Mon Sep 17 00:00:00 2001
From: tkow <tkow@users.noreply.github.com>
Date: Thu, 13 Jan 2022 03:32:33 +0900
Subject: [PATCH 5/9] Update packages/ra-ui-materialui/src/input/FileInput.tsx

Co-authored-by: Francois Zaninotto <fzaninotto@gmail.com>
---
 packages/ra-ui-materialui/src/input/FileInput.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/ra-ui-materialui/src/input/FileInput.tsx b/packages/ra-ui-materialui/src/input/FileInput.tsx
index 8f2c814f41f..770d29f71f6 100644
--- a/packages/ra-ui-materialui/src/input/FileInput.tsx
+++ b/packages/ra-ui-materialui/src/input/FileInput.tsx
@@ -114,8 +114,11 @@ export const FileInput = (
 
     const onRemove = file => async () => {
         if (onSubmitRemove) {
-            const isSuccess = await onSubmitRemove(file);
-            if (!isSuccess) return;
+            try {
+                await validateFileRemoval(file);
+            } catch(e) {
+                return;
+            }
         }
         if (multiple) {
             const filteredFiles = files.filter(

From 7a7c803dca4a41ea5ebcd0b09c7120d6e3392aa6 Mon Sep 17 00:00:00 2001
From: tkow <t.kusama0613@outlook.jp>
Date: Thu, 13 Jan 2022 03:52:24 +0900
Subject: [PATCH 6/9] fix: rename onSubmitReview to validateFileRemoval and
 change condition cancel removal action using promise

---
 .../src/input/FileInput.spec.tsx              | 60 ++++---------------
 .../ra-ui-materialui/src/input/FileInput.tsx  | 10 ++--
 2 files changed, 15 insertions(+), 55 deletions(-)

diff --git a/packages/ra-ui-materialui/src/input/FileInput.spec.tsx b/packages/ra-ui-materialui/src/input/FileInput.spec.tsx
index f7cb844c910..c8640d7965d 100644
--- a/packages/ra-ui-materialui/src/input/FileInput.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/FileInput.spec.tsx
@@ -251,7 +251,7 @@ describe('<FileInput />', () => {
         });
     });
 
-    describe('should stop to remove file field onSubmitReview return false', () => {
+    describe('should call validateFileRemoval on removal to allow developers to conditionally prevent the removal', () => {
         it('normal function', async () => {
             const onSubmit = jest.fn();
 
@@ -268,7 +268,9 @@ describe('<FileInput />', () => {
                         <form onSubmit={handleSubmit}>
                             <FileInput
                                 {...defaultProps}
-                                onSubmitRemove={file => false}
+                                validateFileRemoval={file => {
+                                    throw Error('Cancel Removal Action');
+                                }}
                             >
                                 <FileField source="src" title="title" />
                             </FileInput>
@@ -309,7 +311,9 @@ describe('<FileInput />', () => {
                         <form onSubmit={handleSubmit}>
                             <FileInput
                                 {...defaultProps}
-                                onSubmitRemove={async file => false}
+                                validateFileRemoval={async file => {
+                                    throw Error('Cancel Removal Action');
+                                }}
                             >
                                 <FileField source="src" title="title" />
                             </FileInput>
@@ -332,53 +336,9 @@ describe('<FileInput />', () => {
                 },
             });
         });
-        it('error occurs', async done => {
-            const onSubmit = jest.fn();
-            // NOTE: We couldn't handle UnhandledPromiseRejection and make
-            // ErrorBoundary method of https://github.com/testing-library/react-testing-library/issues/828#issuecomment-729860950 work,
-            // so make mimic methods to read final states when process force exit by errors instead of throw new Error.
-            const errorMockFn = jest.fn(() => {
-                fireEvent.click(getByLabelText('Save'));
-                expect(onSubmit.mock.calls[0][0]).toEqual({
-                    image: {
-                        src: 'test.png',
-                        title: 'cats',
-                    },
-                });
-                // NOTE: Mimicking throw Error.The done method finish process even if having waitFor not resolved.
-                done();
-                return true;
-            });
-            const { getByLabelText, getByTitle } = render(
-                <Form
-                    initialValues={{
-                        image: {
-                            src: 'test.png',
-                            title: 'cats',
-                        },
-                    }}
-                    onSubmit={onSubmit}
-                    render={({ handleSubmit }) => (
-                        <form onSubmit={handleSubmit}>
-                            <FileInput
-                                {...defaultProps}
-                                onSubmitRemove={errorMockFn}
-                            >
-                                <FileField source="src" title="title" />
-                            </FileInput>
-                            <button type="submit" aria-label="Save" />
-                        </form>
-                    )}
-                />
-            );
-
-            const fileDom = getByTitle('cats');
-            expect(fileDom).not.toBeNull();
-            fireEvent.click(getByLabelText('ra.action.delete'));
-        });
     });
 
-    describe('should continue to remove file field onSubmitReview return true', () => {
+    describe('should continue to remove file field validateFileRemoval without Promise rejected.', () => {
         it('normal function', async () => {
             const onSubmit = jest.fn();
 
@@ -395,7 +355,7 @@ describe('<FileInput />', () => {
                         <form onSubmit={handleSubmit}>
                             <FileInput
                                 {...defaultProps}
-                                onSubmitRemove={file => true}
+                                validateFileRemoval={file => true}
                             >
                                 <FileField source="src" title="title" />
                             </FileInput>
@@ -431,7 +391,7 @@ describe('<FileInput />', () => {
                         <form onSubmit={handleSubmit}>
                             <FileInput
                                 {...defaultProps}
-                                onSubmitRemove={async file => true}
+                                validateFileRemoval={async file => true}
                             >
                                 <FileField source="src" title="title" />
                             </FileInput>
diff --git a/packages/ra-ui-materialui/src/input/FileInput.tsx b/packages/ra-ui-materialui/src/input/FileInput.tsx
index 770d29f71f6..a560764d54b 100644
--- a/packages/ra-ui-materialui/src/input/FileInput.tsx
+++ b/packages/ra-ui-materialui/src/input/FileInput.tsx
@@ -33,7 +33,7 @@ export const FileInput = (
         maxSize,
         minSize,
         multiple = false,
-        onSubmitRemove,
+        validateFileRemoval,
         options: {
             inputProps: inputPropsOptions,
             ...options
@@ -113,10 +113,10 @@ export const FileInput = (
     };
 
     const onRemove = file => async () => {
-        if (onSubmitRemove) {
+        if (validateFileRemoval) {
             try {
                 await validateFileRemoval(file);
-            } catch(e) {
+            } catch (e) {
                 return;
             }
         }
@@ -224,7 +224,7 @@ FileInput.propTypes = {
     maxSize: PropTypes.number,
     minSize: PropTypes.number,
     multiple: PropTypes.bool,
-    onSubmitRemove: PropTypes.func,
+    validateFileRemoval: PropTypes.func,
     options: PropTypes.object,
     resource: PropTypes.string,
     source: PropTypes.string,
@@ -259,7 +259,7 @@ export interface FileInputProps
         DropzoneOptions,
         'accept' | 'multiple' | 'maxSize' | 'minSize'
     > {
-    onSubmitRemove?(file): boolean | Promise<boolean>;
+    validateFileRemoval?(file): boolean | Promise<boolean>;
     children?: ReactNode;
     labelMultiple?: string;
     labelSingle?: string;

From ad831d73fa7c824f923c68bd8d4d439b4545c3d7 Mon Sep 17 00:00:00 2001
From: tkow <t.kusama0613@outlook.jp>
Date: Thu, 13 Jan 2022 04:06:24 +0900
Subject: [PATCH 7/9] fix: change description for api change

---
 docs/Inputs.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/Inputs.md b/docs/Inputs.md
index 7615d50398f..e903c5c5acd 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -278,7 +278,7 @@ To override the style of all instances of `<ImageInput>` using the [material-ui
 | `labelSingle`   | Optional | `string`             | 'ra.input.file. upload_single'  | Invite displayed in the drop zone if the input accepts one file                                                                                                                                                                                                                                                                                        |
 | `labelMultiple` | Optional | `string`             | 'ra.input.file. upload_several' | Invite displayed in the drop zone if the input accepts several files                                                                                                                                                                                                                                                                                   |
 | `placeholder`   | Optional | `ReactNode`          | -                               | Invite displayed in the drop zone, overrides `labelSingle` and `labelMultiple`                                                                                                                                                                                                                                                                         |
-| `onSubmitRemove`   | Optional | `Function`          | -                               | Set remove button click handler. Main difference from options.onRemove is able to cancel to remove the file's list item if it returns false `(file) => boolean \| Promise<boolean>`                                                                                                                                                                                                                                                                         |
+| `validateFileRemoval`   | Optional | `Function`          | -                               | Validate removing items. This is able to cancel to remove the file's list item by onRemove handler when you want to do so by throwing Error. `(file) => void \| Promise<void>`                                                                                                                                                                                                                                                                         |
 | `options`       | Optional | `Object`             | `{}`                            | Additional options passed to react-dropzone's `useDropzone()` hook. See [the react-dropzone source](https://github.com/react-dropzone/react-dropzone/blob/master/src/index.js)  for details .                                                                                                                                                          |
 
 `<FileInput>` also accepts the [common input props](./Inputs.md#common-input-props).

From b1df2c8004d6e3628d9959837a4db9c386f3ee84 Mon Sep 17 00:00:00 2001
From: tkow <t.kusama0613@outlook.jp>
Date: Thu, 13 Jan 2022 05:16:55 +0900
Subject: [PATCH 8/9] feat: change readme and add an usage example code

---
 docs/Inputs.md | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/docs/Inputs.md b/docs/Inputs.md
index e903c5c5acd..64ead893017 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -311,6 +311,59 @@ If the default Dropzone label doesn't fit with your need, you can pass a `placeh
 
 Note that the file upload returns a [File](https://developer.mozilla.org/en/docs/Web/API/File) object. It is your responsibility to handle it depending on your API behavior. You can for instance encode it in base64, or send it as a multi-part form data. Check [this example](./DataProviders.md#handling-file-uploads) for base64 encoding data by extending the REST Client.
 
+The `validateFileRemoval` handler can interrupt removing visual items in your page. Given if you want to remove immediately file so call your api request in `validateFileRemoval`, then the request fails and throws error, These items don't disapper in the page.
+
+The `validateFileRemoval` can also be used to confirm the deletion of items to users. The following is an example.
+
+
+```jsx
+function Edit(props) {
+    const [removeImageConfirmEvent, setRemoveFileConfirmEvent] = useState(null);
+    const [isRemoveImageModalOpen, setIsRemoveImageModalOpen] = useState(false);
+    return (
+        <Edit {...props}>
+            <SimpleForm>
+                <ImageInput
+                    source="images"
+                    src="image"
+                    validateFileRemoval={(file, _record) => {
+                        const promise = new Promise((_resolve, reject) => {
+                            setRemoveFileConfirmEvent({
+                                fileName: `Image ID: ${file.id}`,
+                                resolve: async (result) => {
+                                  await YourApi.deleteImages({ ids: [file.id] });
+                                  return _resolve(result);
+                                },
+                                reject,
+                            });
+                        });
+                        setIsRemoveImageModalOpen(true);
+                        return promise.then((result) => {
+                          // Success Action if you want
+                        });
+                    }}
+                />
+                <SomeConfirmModal
+                    isOpen={isRemoveImageModalOpen}
+                    title="delete image"
+                    message={`${removeImageConfirmEvent ? removeImageConfirmEvent.fileName: ''} will be deleted`}
+                    onSubmit={() => {
+                        setIsRemoveImageModalOpen(false);
+                        removeImageConfirmEvent && removeImageConfirmEvent.resolve();
+                    }}
+                    onCancel={() => {
+                        setIsRemoveImageModalOpen(false);
+                        removeImageConfirmEvent && removeImageConfirmEvent.reject();
+                    }}
+                />
+            </SimpleForm>
+        </Edit>
+    )
+}
+```
+
+This example assumes that it can show some confirm modal has two buttons, to submit and cancel, when clicking a FileInput delete button icon. Then it interrupts to remove items in the page if "YourApi.deleteImages" fails or cancel button is clicked though when succeeding to submit they are removed.
+
 #### CSS API
 
 | Rule name       | Description                                                                       |

From 0ae2c3e10ec32bf150b9e5a039acc18c5c4f0a36 Mon Sep 17 00:00:00 2001
From: tkow <t.kusama0613@outlook.jp>
Date: Fri, 14 Jan 2022 16:21:42 +0900
Subject: [PATCH 9/9] fix: add validateFileRemoval description

---
 docs/FileInput.md | 55 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/docs/FileInput.md b/docs/FileInput.md
index 4184a7fc4f1..5b98a34ce49 100644
--- a/docs/FileInput.md
+++ b/docs/FileInput.md
@@ -21,6 +21,7 @@ title: "The FileInput Component"
 | `labelSingle`   | Optional | `string`             | 'ra.input.file. upload_single'  | Invite displayed in the drop zone if the input accepts one file                                                                                                                                                                                                                                                                                        |
 | `labelMultiple` | Optional | `string`             | 'ra.input.file. upload_several' | Invite displayed in the drop zone if the input accepts several files                                                                                                                                                                                                                                                                                   |
 | `placeholder`   | Optional | `ReactNode`          | -                               | Invite displayed in the drop zone, overrides `labelSingle` and `labelMultiple`                                                                                                                                                                                                                                                                         |
+| `validateFileRemoval`   | Optional | `Function`          | -                               | Validate removing items. This is able to cancel to remove the file's list item by onRemove handler when you want to do so by throwing Error. `(file) => void \| Promise<void>`                                                                                                                                                                                                                                                                         |
 | `options`       | Optional | `Object`             | `{}`                            | Additional options passed to react-dropzone's `useDropzone()` hook. See [the react-dropzone source](https://github.com/react-dropzone/react-dropzone/blob/master/src/index.js)  for details .                                                                                                                                                          |
 
 `<FileInput>` also accepts the [common input props](./Inputs.md#common-input-props).
@@ -53,6 +54,60 @@ If the default Dropzone label doesn't fit with your need, you can pass a `placeh
 
 Note that the file upload returns a [File](https://developer.mozilla.org/en/docs/Web/API/File) object. It is your responsibility to handle it depending on your API behavior. You can for instance encode it in base64, or send it as a multi-part form data. Check [this example](./DataProviders.md#handling-file-uploads) for base64 encoding data by extending the REST Client.
 
+The `validateFileRemoval` handler can interrupt removing visual items in your page. Given if you want to remove immediately file so call your api request in `validateFileRemoval`, then the request fails and throws error, These items don't disapper in the page.
+
+The `validateFileRemoval` can also be used to confirm the deletion of items to users. The following is an example.
+
+
+```jsx
+function Edit(props) {
+    const [removeImageConfirmEvent, setRemoveFileConfirmEvent] = useState(null);
+    const [isRemoveImageModalOpen, setIsRemoveImageModalOpen] = useState(false);
+    return (
+        <Edit {...props}>
+            <SimpleForm>
+                <ImageInput
+                    source="images"
+                    src="image"
+                    validateFileRemoval={(file, _record) => {
+                        const promise = new Promise((_resolve, reject) => {
+                            setRemoveFileConfirmEvent({
+                                fileName: `Image ID: ${file.id}`,
+                                resolve: async (result) => {
+                                  await YourApi.deleteImages({ ids: [file.id] });
+                                  return _resolve(result);
+                                },
+                                reject,
+                            });
+                        });
+                        setIsRemoveImageModalOpen(true);
+                        return promise.then((result) => {
+                          // Success Action if you want
+                        });
+                    }}
+                />
+                <SomeConfirmModal
+                    isOpen={isRemoveImageModalOpen}
+                    title="delete image"
+                    message={`${removeImageConfirmEvent ? removeImageConfirmEvent.fileName: ''} will be deleted`}
+                    onSubmit={() => {
+                        setIsRemoveImageModalOpen(false);
+                        removeImageConfirmEvent && removeImageConfirmEvent.resolve();
+                    }}
+                    onCancel={() => {
+                        setIsRemoveImageModalOpen(false);
+                        removeImageConfirmEvent && removeImageConfirmEvent.reject();
+                    }}
+                />
+            </SimpleForm>
+        </Edit>
+    )
+}
+```
+
+This example assumes that it can show some confirm modal has two buttons, to submit and cancel, when clicking a FileInput delete button icon. Then it interrupts to remove items in the page if "YourApi.deleteImages" fails or cancel button is clicked though when succeeding to submit they are removed.
+
+
 ## `sx`: CSS API
 
 The `<FileInput>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (as most Material UI components, see their [documentation about it](https://mui.com/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses: