OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Upload file stuck on 'uploading' status with customRequest Ant Design (antd)

  • Thread starter Thread starter Saulet Yskak
  • Start date Start date
S

Saulet Yskak

Guest
I really need your help with uploading files using Ant Design (antd). I don't need request action with upload component, therefore I use the onSuccess() function in customRequest to skip fetch, but onChange method the status stucks only on 'uploading'. It doesn't go to 'done' status. I need your help, please

Sandbox link: https://codesandbox.io/s/runtime-platform-znyow?file=/src/App.js

Code:
    import React, { useState } from "react";
    import "./styles.css";
    import { Button, Upload } from "antd";

    export default function App() {
      const [fileList, setFileList] = useState([]);

      const fileProps = {
        action: "",
        name: "file",
        multiple: true,
        customRequest(e) {
          e.onSuccess();
        },
        onChange(info) {
          const { status } = info.file;
          console.log(status); // always 'uploading'
          if (status === "done") {
            // this part is unreachable
            let fileList = [...info.fileList];
            setFileList(fileList);
          }
        },
        onRemove: (file) => {
          setFileList((prevState) => prevState.filter((d) => d.uid !== file.uid));
        }
      };

      return (
        <div className="App">
          <Upload {...fileProps} fileList={fileList}>
            <Button type="primary">Attach file</Button>
          </Upload>
        </div>
      );
    }

<p>I really need your help with uploading files using Ant Design (antd). I don't need request action with upload component, therefore I use the onSuccess() function in customRequest to skip fetch, but onChange method the status stucks only on 'uploading'. It doesn't go to 'done' status. I need your help, please</p>
<p>Sandbox link: <a href="https://codesandbox.io/s/runtime-platform-znyow?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/runtime-platform-znyow?file=/src/App.js</a></p>
<pre><code> import React, { useState } from "react";
import "./styles.css";
import { Button, Upload } from "antd";

export default function App() {
const [fileList, setFileList] = useState([]);

const fileProps = {
action: "",
name: "file",
multiple: true,
customRequest(e) {
e.onSuccess();
},
onChange(info) {
const { status } = info.file;
console.log(status); // always 'uploading'
if (status === "done") {
// this part is unreachable
let fileList = [...info.fileList];
setFileList(fileList);
}
},
onRemove: (file) => {
setFileList((prevState) => prevState.filter((d) => d.uid !== file.uid));
}
};

return (
<div className="App">
<Upload {...fileProps} fileList={fileList}>
<Button type="primary">Attach file</Button>
</Upload>
</div>
);
}
</code></pre>
 
Top