fix: unable to submit form during file upload (#892)

(cherry picked from commit 54d23e33534cf3656a8a57d57bde018801c5b43b)
This commit is contained in:
chenos 2022-10-11 22:34:44 +08:00
parent d5d3e4fb96
commit 9d947a0fa5
2 changed files with 11 additions and 3 deletions

View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
import { observer, RecursionField, useField, useFieldSchema, useForm } from '@formily/react';
import { Button, Modal, Popover } from 'antd';
import classnames from 'classnames';
import React, { useState } from 'react';
@ -87,6 +87,7 @@ export const Action: ComposedAction = observer((props: any) => {
const { run } = useAction();
const fieldSchema = useFieldSchema();
const compile = useCompile();
const form = useForm();
const designerProps = fieldSchema['x-designer-props'];
const openMode = fieldSchema?.['x-component-props']?.['openMode'];
const renderButton = () => (
@ -94,6 +95,7 @@ export const Action: ComposedAction = observer((props: any) => {
{...others}
loading={field?.data?.loading}
icon={<Icon type={icon} />}
disabled={form.disabled}
onClick={(e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();

View File

@ -1,5 +1,5 @@
import { Field } from '@formily/core';
import { useField } from '@formily/react';
import { useField, useForm } from '@formily/react';
import { reaction } from '@formily/reactive';
import { isArr, isValid, toArr as toArray } from '@formily/shared';
import { UploadChangeParam } from 'antd/lib/upload';
@ -167,6 +167,8 @@ export function useUploadProps<T extends IUploadProps = UploadProps>({ serviceEr
props.onChange?.(normalizeFileList([...param.fileList]));
};
const form = useForm();
const api = useAPIClient();
return {
@ -179,6 +181,7 @@ export function useUploadProps<T extends IUploadProps = UploadProps>({ serviceEr
});
}
formData.append(filename, file);
form.disabled = true;
api.axios
.post(action, formData, {
withCredentials,
@ -190,7 +193,10 @@ export function useUploadProps<T extends IUploadProps = UploadProps>({ serviceEr
.then(({ data }) => {
onSuccess(data, file);
})
.catch(onError);
.catch(onError)
.finally(() => {
form.disabled = false;
});
return {
abort() {