fix: unable to submit form during file upload (#892)
(cherry picked from commit 54d23e33534cf3656a8a57d57bde018801c5b43b)
This commit is contained in:
		
							parent
							
								
									d5d3e4fb96
								
							
						
					
					
						commit
						9d947a0fa5
					
				@ -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();
 | 
			
		||||
 | 
			
		||||
@ -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() {
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user