action function is required with antd upload control, but I dont need it
Extending to @Quincy's answer, you can also use shorthand on component something like this,
<Upload beforeUpload={() => false} />
TL;DR
Override <Upload/>
default upload AJAX implementation with a simulated successful upload.
Solution Demo:
Full Answer
It seems that you are trying to use andt
's <Upload/>
component simply as file selector, due to the fact that you append the file to formData
by yourself. The reason for never hitting the point where status === "done"
is because the file is not really uploaded to anywhere.
Thus, you don't need the file to be uploaded automatically like it should OOB.
All you need is that the onChange
will send you the selected file and you can save it somewhere in the state tree.<Upload/>
renders another component (rc-upload) as its child which handles the actual AJAX upload.
You can override this behaviour by passing a customRequest
prop to <Upload/>
(which will be passed to rc-upload
component).
You can see here which options are passed to the request function. Here is an implementation of a dummy request function:
const dummyRequest = ({ file, onSuccess }) => {
setTimeout(() => {
onSuccess("ok");
}, 0);
};
Then you can pass it to <Upload customRequest={dummyRequest}/>
onChange
will still be triggered, but this time with the "done"
status, since the dummy request function simulates a flow of successful upload.
According to the official documentation Upload manually:
Upload files manually after
beforeUpload
returnsfalse
.
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg';
if (!isJPG) {
message.error('You can only upload JPG file!');
}
return false;
}