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,
      } : "",
    ],
  };

Answer 1

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>
  );
};