Don't Show filelist in antd-Upload if URL is empty

Question

Here, I am passing Url as an prop to display uploaded files in edit Modal. All I want is, to not show any attachment if Url is empty. I can srill see empty attachments like shown in image :

export const FileUploader = ({ label, Url, setUrl, editMode }) => {
  console.log("Url", Url);
  const props = {
    maxCount: 1,
    onChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
    },
    fileList: [
      Url ? {
        uid: "1",
        name: label + ".png",
        status: "done",
        response: '{"status": "success"}',
        url: Url,
      } : "",
    ],
  };

I got what is the issue in radio buttons, can you please send your codesandbox link because it is very big code and i think refactoring is required you taken too many states. — Priyen Mehta, Nov 11 '22 at 10:15

score 1 · Answer 1 · answered Nov 11 '22 at 11:38

1

For Radio:

<Radio value={"True"} checked={hasOutdoorSpace}>True</Radio>
<Radio value={"False"} checked={!hasOutdoorSpace}>False</Radio>

For Upload, you'll need to use defaultFileList or fileList property. Check out the documentation here https://ant.design/components/upload/

answered Nov 11 '22 at 11:38

Andy Refuerzo

3,312
1
31
38

Thankyou for pointing me to the right direction @Andy. I have edited my question, can you check it again? – Anchal Gupta Nov 14 '22 at 11:12

score 0 · Accepted Answer · answered Nov 15 '22 at 16:55

I found a workaround to solve this issue.

fileList property inside props will yield a list(even empty), so I used showUploadList property inside Upload and set it to false if length of fileList is found to be zero.

Here's is the code :

import { Button, Upload } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { useState } from "react";

export const FileUploader = ({ label, Url, setUrl, editMode }) => {
  console.log("Url", Url);
  const fileList = [
    Url
      ? {
          uid: "1",
          name: label + ".png",
          status: "done",
          response: '{"status": "success"}',
          url: Url,
        }
      : {},
  ];
  const fileExists = Object.keys(fileList[0]).length;
  const props = {
    maxCount: 1,
    onChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
    },
    fileList: fileList,
  };

  const showUploadList = editMode ? true : false;
  if(showUploadList){
    showUploadList = fileExists > 0 ? true : false;
  } 

  return (
    <Upload {...props} customRequest={addFile} showUploadList={showUploadList}>
      <Button icon={<UploadOutlined />}>Click to Upload (Max: 1) </Button>
    </Upload>
  );
};

Don't Show filelist in antd-Upload if URL is empty

2 Answers2