title: Upload component not behaving as expected when supplied with the default file list
body: <p>I have written a small component building on <a href="https://ant.design/components/upload/" rel="nofollow noreferrer">antd upload</a> using which user could upload multiple files to the server. I have spent a lot of time debugging, but cannot understand some of its behaviors. The component looks as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/WNMtg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WNMtg.png" alt="enter image description here"></a></p>
  
  <p>There are 2 problems that I am facing:</p>
  
  <ul>
  <li>Whenever the component is given a <code>prefil</code> that contains the files already uploaded to the server, I am unable to add new files. As I try to upload a new file after clicking <code>Add Another</code> which looks as follows</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/0im8Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0im8Z.png" alt="enter image description here"></a></p>
  
  <p>the component relapses to its default state that originally had 2 files. I just cannot figure out how could I handle this.</p>
  
  <ul>
  <li>As I try to remove one of the default-file by clicking close-icon, it appears again after I click <code>Add another</code>.</li>
  </ul>
  
  <p>I know somewhere, I am unable to manage the component's state correctly, but I just cannot figure out myself. Here is the component's code written using typescript.</p>
  
  <pre><code>    import { Button, Icon, Form, Input, Upload, message } from "antd";
  
      export type DefaultFileList = {
          uid: number | string;
          name: string;
          status?: string;
          url: string;
          fileLabel: string;
      };
  
      type state = {
          uploadFieldIdContainer: number[];
          mocAddErrorDescription?: string;
          uploadMap: { [index: number]: UploadFile[] };
          defaultMap: {
              [index: number]: {
              default: DefaultFileList[];
              fileLabel: string;
              };
          };
      };
  
      type oprops = {
          prefil: DefaultFileList[];
          buttonLabel?: string;
          type: string;
      };
  
      export default class DocumentUploader extends Component&lt;
      FormComponentProps &amp; oprops,
      state
      &gt; {
          private maxUploadPerButton: number;
  
          constructor(props) {
              super(props);
  
              this.maxUploadPerButton = 1;
  
              const dMap = this.prepareDefaultFileMap();
  
              this.state = {
              uploadFieldIdContainer: this.getTotalDefaultDocuments(),
              uploadMap: {},
              defaultMap: dMap
              };
              this.addUploadFormField = this.addUploadFormField.bind(this);
              this.removeUploadField = this.removeUploadField.bind(this);
          }
  
          getTotalDefaultDocuments() {
              if (this.props.prefil &amp;&amp; Array.isArray(this.props.prefil)) {
              return Array.from({ length: this.props.prefil.length }, (_, k) =&gt; k + 1);
              } else {
              return [];
              }
          }
  
          prepareDefaultFileMap() {
              if (this.props.prefil &amp;&amp; this.props.prefil.length == 0) {
              return {};
              } else {
              const dMap = {};
              for (let i = 0; i &lt; this.props.prefil.length; i++) {
                  const p = this.props.prefil[i];
                  const flabel = p.fileLabel;
                  //delete p.fileLabel;
                  dMap[i + 1] = {
                  default: [p],
                  fileLabel: flabel
                  };
              }
  
              return dMap;
              }
          }
  
          async componentDidMount() {}
  
          componentWillReceiveProps(nextProps: FormComponentProps &amp; oprops) {
              if (this.props.prefil.length &gt; 0) {
              this.setState({
                  uploadFieldIdContainer: this.getTotalDefaultDocuments(),
                  defaultMap: this.prepareDefaultFileMap()
              });
              }
          }
  
          removeUploadField(key: number, event: React.MouseEvent&lt;HTMLElement&gt;) {
              event.preventDefault();
  
              /**
              * @see https://ant.design/components/form/?locale=en-US#components-form-demo-dynamic-form-item
              */
  
              this.setState(prevState =&gt; ({
              uploadFieldIdContainer: prevState.uploadFieldIdContainer.filter(
                  field =&gt; field !== key
              )
              }));
          }
  
          getUploadFileProps(key: number): { [index: string]: any } {
              const _this = this;
              const { defaultMap } = this.state;
  
              const fileList = this.state.uploadMap[key] || [];
              const defaultFileList = (defaultMap[key] &amp;&amp; defaultMap[key].default) || [];
  
              const props = {
              name: "file",
              action: getDocumentStoreUploadApi(),
              headers: HttpClient.requestConfig(),
              onPreview: (file: { [index: string]: any }) =&gt; {
                  getFileFromDocumentStore(file.url, file.name);
              },
              beforeUpload(file: File, fileList: File[]) {
                  if (file.type.match(/image/gi)) {
                  return false;
                  } else {
                  return true;
                  }
              },
              multiple: false,
              onChange(info: { [index: string]: any }) {
                  console.log("changed..");
                  let fileList = info.fileList;
                  // 1. Limit the number of uploaded files
                  // Only to show 1 recent uploaded file, and old ones will be replaced by the new
                  fileList = fileList.slice(-1 * _this.maxUploadPerButton);
  
                  // 2. Read from response and show file link
                  fileList = fileList.map((file: { [index: string]: any }) =&gt; {
                  if (file.response) {
                      // Component will show file.url as link
                      file.url = file.response.url;
                  }
                  return file;
                  });
  
                  const { uploadMap } = _this.state;
                  Object.assign(uploadMap, { [key]: fileList });
                  _this.setState({
                  uploadMap
                  });
  
                  if (info.file.status === "done") {
                  message.success(`${info.file.name} file uploaded successfully`);
                  } else if (info.file.status === "error") {
                  message.error(`${info.file.name} file upload failed.`);
                  }
              }
              };
  
              if (fileList.length &gt; 0) {
              Object.assign(props, { fileList });
              } else if (defaultFileList.length &gt; 0) {
              Object.assign(props, { defaultFileList });
              }
  
              return props;
          }
  
          getUploadField(key: number) {
              const { getFieldDecorator } = this.props.form;
  
              const { defaultMap } = this.state;
              const documentLabel = (defaultMap[key] &amp;&amp; defaultMap[key].fileLabel) || "";
  
              return (
              &lt;div className="d-flex justify-content-between"&gt;
                  &lt;div className="inline-block w-55"&gt;
                  &lt;FormItem label="Select File"&gt;
                      {getFieldDecorator(`selected_file_${this.props.type}[${key}]`, {
                      rules: [
                          {
                          required: "undefined" === typeof defaultMap[key],
                          message: "Please select the file to upload"
                          }
                      ]
                      })(
                      // &lt;input type="file" id="input"&gt;
                      &lt;Upload {...this.getUploadFileProps(key)}&gt;
                          &lt;Button disabled={false}&gt;
                          &lt;Icon type="upload" /&gt; Click to Upload
                          &lt;/Button&gt;
                      &lt;/Upload&gt;
                      )}
                  &lt;/FormItem&gt;
                  &lt;/div&gt;
  
                  &lt;div className="inline-block w-45"&gt;
                  &lt;FormItem label="File Label"&gt;
                      {getFieldDecorator(
                      `selected_file_label_${this.props.type}[${key}]`,
                      {
                          rules: [
                          {
                              required: true,
                              message: "Please input the file label"
                          }
                          ],
                          initialValue: documentLabel
                      }
                      )(&lt;Input type="text" /&gt;)}
                  &lt;/FormItem&gt;
                  &lt;/div&gt;
                  &lt;div className="inline-block pointer d-flex align-items-center"&gt;
                  &lt;span&gt;
                      &lt;Icon
                      type="close"
                      onClick={this.removeUploadField.bind(this, key)}
                      /&gt;
                  &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              );
          }
  
          addUploadFormField(event: React.MouseEvent&lt;HTMLElement&gt;) {
              event.preventDefault();
  
              const { uploadFieldIdContainer } = this.state;
  
              // We only keep inside the state an array of number
              // each one of them represent a section of fields.
              const lastFieldId =
              uploadFieldIdContainer[uploadFieldIdContainer.length - 1] || 0;
              const nextFieldId = lastFieldId + 1;
  
              this.setState({
              uploadFieldIdContainer: uploadFieldIdContainer.concat(nextFieldId)
              });
          }
  
          getMainUploadButton() {
              return (
              &lt;div className="d-flex w-100 mt-3"&gt;
                  &lt;Button
                  type="primary"
                  ghost={true}
                  className="w-100 letter-spacing-1"
                  onClick={this.addUploadFormField}
                  &gt;
                  &lt;Icon type="plus-circle" /&gt;
                  {this.props.buttonLabel || "Select File(s) To Upload"}
                  &lt;/Button&gt;
              &lt;/div&gt;
              );
          }
  
          getUploadFieldFooter() {
              return (
              &lt;div className="d-flex justify-content-between small"&gt;
                  &lt;div className="inline-block"&gt;
                  &lt;Button
                      type="primary"
                      shape="circle"
                      icon="plus"
                      ghost={true}
                      size="small"
                      className="d-font mr-1"
                      onClick={this.addUploadFormField}
                  /&gt;
                  &lt;div
                      className="text-primary pointer d-font inline-block letter-spacing-1 mt-1"
                      onClick={this.addUploadFormField}
                  &gt;
                      Add another&amp;nbsp;
                  &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              );
          }
  
          render() {
              const { uploadFieldIdContainer } = this.state;
              const mocButton = this.getMainUploadButton();
  
              const toRender =
              uploadFieldIdContainer.length &gt; 0 ? (
                  &lt;div&gt;
                  &lt;div className="w-100 p-2 gray-background br-25"&gt;
                      {uploadFieldIdContainer.map(fieldIndex =&gt; (
                      &lt;div key={fieldIndex}&gt;{this.getUploadField(fieldIndex)}&lt;/div&gt;
                      ))}
                      {this.getUploadFieldFooter()}
                  &lt;/div&gt;
                  &lt;/div&gt;
              ) : (
                  mocButton
              );
  
              return toRender;
          }
      }
  </code></pre>
  
  <p><code>render</code> is the main method that is rendering all the input-fields. The above component is used as follows:</p>
  
  <pre><code>      &lt;DocumentUploader
          form={this.props.form}
          prefil={[{
              uid: "somehash",
              name: "name",
              url: "url",
              fileLabel: "label"
          }]}
          type="test"
        /&gt;
  </code></pre>
  
  <p>I must restate, that there is an issue only when initializing the component with files already uploaded to the server and works perfectly fine, when trying afresh with the component i.e when uploading for the first time.</p>