Dragger on drop = false still calling api on drag
dragger is calling api when there is no action
11 Replies
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.
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.
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:
----------------------<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below
ambitious-aqua•12mo ago
@kapa.ai only one file should be uploaded at a time..and it show loading
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/):
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:
----------------------<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below
ambitious-aqua•12mo ago
@kapa.ai
can u fix this code..this should not call api on drag
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:
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:
----------------------<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below
ambitious-aqua•12mo ago
@kapa.ai call the api on create button not on file drag
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:
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:
----------------------<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below