Dragger on drop = false still calling api on drag

dragger is calling api when there is no action
K
kapa.ai211d ago
Hi @parothia. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The Upload.Dragger component from Ant Design, which is used in Refine, calls an API when a file is dropped into the area. This is specified by the action prop in the Upload.Dragger component. For example, in the code snippet from the Refine documentation (https://refine.dev/docs/advanced-tutorials/upload/multipart-upload/), the action prop is set to `${apiUrl}/media/upload`, which means the file will be uploaded to this URL when it's dropped into the Upload.Dragger area.
<Upload.Dragger
name="file"
action={`${apiUrl}/media/upload`}
listType="picture"
maxCount={5}
multiple
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
<Upload.Dragger
name="file"
action={`${apiUrl}/media/upload`}
listType="picture"
maxCount={5}
multiple
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
If you don't want the Upload.Dragger to automatically call an API, you can use the customRequest prop to customize the upload behavior. This prop accepts a function that will be called when a file is dropped. You can define your own logic inside this function. For example, in the code snippet from the Refine blog (https://refine.dev/blog/simple-web-application-with-refine/), the customRequest prop is used to upload the file to a Supabase storage bucket.
<Upload.Dragger
name="file"
listType="picture"
multiple
customRequest={async ({
file,
onError,
onSuccess,
}) => {
// Custom upload logic here
}}
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
<Upload.Dragger
name="file"
listType="picture"
multiple
customRequest={async ({
file,
onError,
onSuccess,
}) => {
// Custom upload logic here
}}
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
In this case, the Upload.Dragger will not automatically call an API when a file is dropped. Instead, it will execute the function provided to the customRequest prop. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai211d ago
<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below
E
equal-jade211d ago
@kapa.ai only one file should be uploaded at a time..and it show loading
K
kapa.ai211d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- To allow only one file to be uploaded at a time, you can set the multiple prop of the Upload.Dragger component to false. This will restrict the file selection to a single file at a time. To show a loading state while the file is being uploaded, you can use the useFileUploadState hook provided by Refine. This hook returns an isLoading state that you can use to show a loading spinner or disable the form's "Save" button. Here's an example based on the code snippets from the Refine documentation (https://refine.dev/docs/advanced-tutorials/upload/multipart-upload/):
import { useApiUrl } from "@refinedev/core";
import {
getValueFromEvent,
useFileUploadState,
Create,
useForm,
} from "@refinedev/antd";
import { Upload, Form, Input } from "antd";

export const PostCreate: React.FC = () => {
const { formProps, saveButtonProps } = useForm<IPost>();

const { isLoading, onChange } = useFileUploadState();

const apiUrl = useApiUrl();

return (
<Create
saveButtonProps={{
...saveButtonProps,
disabled: isLoading,
}}
>
<Form {...formProps} layout="vertical">
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item label="Image">
<Form.Item
name="image"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
>
<Upload.Dragger
name="file"
action={`${apiUrl}/media/upload`}
listType="picture"
maxCount={1}
onChange={onChange}
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
</Create>
);
};
import { useApiUrl } from "@refinedev/core";
import {
getValueFromEvent,
useFileUploadState,
Create,
useForm,
} from "@refinedev/antd";
import { Upload, Form, Input } from "antd";

export const PostCreate: React.FC = () => {
const { formProps, saveButtonProps } = useForm<IPost>();

const { isLoading, onChange } = useFileUploadState();

const apiUrl = useApiUrl();

return (
<Create
saveButtonProps={{
...saveButtonProps,
disabled: isLoading,
}}
>
<Form {...formProps} layout="vertical">
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item label="Image">
<Form.Item
name="image"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
>
<Upload.Dragger
name="file"
action={`${apiUrl}/media/upload`}
listType="picture"
maxCount={1}
onChange={onChange}
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
</Create>
);
};
In this example, the maxCount prop is set to 1 to allow only one file to be uploaded. The isLoading state from the useFileUploadState hook is used to disable the "Save" button while the file is being uploaded. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai211d ago
<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below
E
equal-jade211d ago
@kapa.ai can u fix this code..this should not call api on drag
K
kapa.ai211d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, to prevent the Upload.Dragger from automatically calling an API on drag, you can remove the action prop and use the customRequest prop to handle the file upload manually. Here's how you can modify your code:
import {
useApiUrl,
} from "@refinedev/core";
import {
getValueFromEvent,
Create,
useForm,
} from "@refinedev/antd";
import {
Upload,
Form,
Input,
} from "antd";

export const PostCreate: React.FC = () => {
const { formProps, saveButtonProps } = useForm<IPost>();

const { isLoading, onChange } = useFileUploadState();

return (
<Create
saveButtonProps={{
...saveButtonProps,
disabled: isLoading,
}}
>
<Form {...formProps} layout="vertical">
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item label="Image">
<Form.Item
name="image"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
>
<Upload.Dragger
name="file"
listType="picture"
maxCount={1}
multiple={false}
onChange={onChange}
customRequest={({ file, onSuccess }) => {
// Handle file upload manually here
// Call onSuccess when upload is done
onSuccess({ response: "Server Response" });
}}
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
</Create>
);
};
import {
useApiUrl,
} from "@refinedev/core";
import {
getValueFromEvent,
Create,
useForm,
} from "@refinedev/antd";
import {
Upload,
Form,
Input,
} from "antd";

export const PostCreate: React.FC = () => {
const { formProps, saveButtonProps } = useForm<IPost>();

const { isLoading, onChange } = useFileUploadState();

return (
<Create
saveButtonProps={{
...saveButtonProps,
disabled: isLoading,
}}
>
<Form {...formProps} layout="vertical">
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item label="Image">
<Form.Item
name="image"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
>
<Upload.Dragger
name="file"
listType="picture"
maxCount={1}
multiple={false}
onChange={onChange}
customRequest={({ file, onSuccess }) => {
// Handle file upload manually here
// Call onSuccess when upload is done
onSuccess({ response: "Server Response" });
}}
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
</Create>
);
};
In this code, the customRequest prop is used to handle the file upload manually. The onSuccess function is called when the upload is done. You can replace the comment // Handle file upload manually here with your own logic to upload the file. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai211d ago
<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below
E
equal-jade211d ago
@kapa.ai call the api on create button not on file drag
K
kapa.ai211d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- To call the API on the "Create" button click instead of on file drag, you can store the file in a local state when it's dragged and then upload it when the "Create" button is clicked. Here's how you can modify your code:
import { useState } from "react";
import { Create, useForm } from "@refinedev/antd";
import { Upload, Form, Input } from "antd";

export const PostCreate: React.FC = () => {
const { formProps, saveButtonProps } = useForm<IPost>();
const [file, setFile] = useState<File | null>(null);

const handleFileChange = ({ file }: any) => {
setFile(file);
};

const handleFinish = async (values: any) => {
if (file) {
// Upload the file here
}

// Call the original onFinish function
saveButtonProps.onFinish(values);
};

return (
<Create
saveButtonProps={{
...saveButtonProps,
onFinish: handleFinish,
}}
>
<Form {...formProps} layout="vertical">
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item label="Image">
<Form.Item name="image" valuePropName="fileList" noStyle>
<Upload.Dragger
name="file"
listType="picture"
maxCount={1}
multiple={false}
onChange={handleFileChange}
customRequest={({ onSuccess }) => {
// Call onSuccess immediately to prevent the upload from hanging
onSuccess("ok");
}}
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
</Create>
);
};
import { useState } from "react";
import { Create, useForm } from "@refinedev/antd";
import { Upload, Form, Input } from "antd";

export const PostCreate: React.FC = () => {
const { formProps, saveButtonProps } = useForm<IPost>();
const [file, setFile] = useState<File | null>(null);

const handleFileChange = ({ file }: any) => {
setFile(file);
};

const handleFinish = async (values: any) => {
if (file) {
// Upload the file here
}

// Call the original onFinish function
saveButtonProps.onFinish(values);
};

return (
<Create
saveButtonProps={{
...saveButtonProps,
onFinish: handleFinish,
}}
>
<Form {...formProps} layout="vertical">
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item label="Image">
<Form.Item name="image" valuePropName="fileList" noStyle>
<Upload.Dragger
name="file"
listType="picture"
maxCount={1}
multiple={false}
onChange={handleFileChange}
customRequest={({ onSuccess }) => {
// Call onSuccess immediately to prevent the upload from hanging
onSuccess("ok");
}}
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
</Create>
);
};
In this code, the handleFileChange function is called when a file is dragged into the Upload.Dragger area. This function stores the file in a local state. The handleFinish function is called when the "Create" button is clicked. This function uploads the file and then calls the original onFinish function. The customRequest prop is used to prevent the Upload.Dragger from automatically uploading the file. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai211d ago
<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below
More Posts
Using refine as an admin panel (beginner)I am building admin panel for news website to upload, delete, update and overall controll news conterename refine default create button in the listhow to rename create button in list which is coming by giving create resourceInvalid hook call. Hooks can only be called inside of the body of a function componenthello, i got this error Invalid hook call. Hooks can only be called inside of the body of a functuseEditableTableHi, i notice that whenever I tried to fetch data using useEditableTable it sends the query with thisuseEditableTable short glitchI'm looking at `useEditableTable` from antd and the thing is there is a short glitch when pressingUpgrade Ant Design from v4 to v5 not workingI am trying to upgrade Ant Design from v4 to v5 so that I can upgrade Refine. As per your docs, I amHandle Errors inside of Forms being posted to a custom APIHey everyone! We're using Refine to such a great extend and I'm very thankful for all the work that How can I just see the current fields value?So this seems like a really dumb question, but using refine, its really difficult to use the value oHow to hide edit button action on specific row at list resourcehiding edit action for specific data in list resourceUnable to modify login error messageIn this documentation https://refine.dev/docs/api-reference/core/components/auth-page/#login Under aredirect to edit after create successi want to redirect user to edit page with its id after create is successfuladding data from useCustom in useForm default values``` const { data } = useCustom({ method: "get", url: "/advertisers/initialize", useCustom filterhey, is it possible to set filter when using useCustom to get a specific range of dates when fetchinhandle axios console error coming from useCreate````import { HttpError } from "@refinedev/core"; import axios, { AxiosRequestConfig } from "axios"; How to use nested Route with antdInferenceHow to use nested Route with antdInferencehandling errors and accessing objects``` onError: async (error) => { console.log(error); if ( error.statusCustom title handler with Typescriptwrite a custom title handler with TypescriptIs Simple-rest made for auth ?is simple rest made just for basic api calls? cause i m trying to implement auth and its forcing me How to use react router lazy for routes?I want to use the react router lazy api to load the components on route as example here https://reacUseTable does not call Connection endpoint for countI did a quick tutorial where I had a single book page with Refine and Ant. I defined the resources i