# Component/Upload/FileUpload

> Props: component-upload-fileupload.props.txt

## Examples


### Base

```tsx
{
  render: args => {
    const [files, setFiles] = useState<Array<UploadFile>>([]);
    const handleChange = (file: File | File[]) => {
      // file upload api 연동
      // return file upload status or process percent calc from server...
      const fileUploadResult: UploadFile = {
        value: Array.isArray(file) ? file[0] : file,
        status: 'success'
      };
      setFiles([...files, fileUploadResult]);
    };
    const handleClickDownload = () => {
      alert('onClickFile');
      // file download api 연동
      // 실제 fileDownload uri를 호출후, fileList를 갱신해야합니다.
    };
    return <FileUpload {...args} fileList={files} onChange={handleChange} onClickFile={handleClickDownload} onLimitMaxCount={() => alert('onLimitMaxCount')} onClickFileRemove={() => alert('onClickFileRemove')} />;
  }
}
```

### Change Button Icon

```tsx
{
  render: (args) => {
    const Files: UploadFile[] = [
      {
        value: new File(['file_name_1'], 'file_name_1.jpg', {
          type: 'image/jpg',
        }),
        status: 'done',
      },
      {
        value: new File(['file_name_2'], 'file_name_3.jpg', {
          type: 'image/jpg',
        }),
        status: 'error',
      },
    ];

    return <FileUpload fileList={Files} onClickFileRemove={() => alert('onClickFileRemove')} {...args} />;
  },
  args: {
    buttonProps: {
      startIcon: <IconArrowDirectionDown />,
      endIcon: <IconArrowDirectionUp />
    }
  }
}
```

### Change Button Kind

```tsx
{
  render: (args) => {
    const Files: UploadFile[] = [
      {
        value: new File(['file_name_1'], 'file_name_1.jpg', {
          type: 'image/jpg',
        }),
        status: 'done',
      },
      {
        value: new File(['file_name_2'], 'file_name_3.jpg', {
          type: 'image/jpg',
        }),
        status: 'error',
      },
    ];

    return <FileUpload fileList={Files} onClickFileRemove={() => alert('onClickFileRemove')} {...args} />;
  },
  args: {
    buttonProps: {
      kind: 'primary'
    }
  }
}
```

### Change Button Size

```tsx
{
  render: (args) => {
    const Files: UploadFile[] = [
      {
        value: new File(['file_name_1'], 'file_name_1.jpg', {
          type: 'image/jpg',
        }),
        status: 'done',
      },
      {
        value: new File(['file_name_2'], 'file_name_3.jpg', {
          type: 'image/jpg',
        }),
        status: 'error',
      },
    ];

    return <FileUpload fileList={Files} onClickFileRemove={() => alert('onClickFileRemove')} {...args} />;
  },
  args: {
    buttonProps: {
      size: 'large'
    }
  }
}
```

### Change Filled Button

```tsx
{
  render: (args) => {
    const Files: UploadFile[] = [
      {
        value: new File(['file_name_1'], 'file_name_1.jpg', {
          type: 'image/jpg',
        }),
        status: 'done',
      },
      {
        value: new File(['file_name_2'], 'file_name_3.jpg', {
          type: 'image/jpg',
        }),
        status: 'error',
      },
    ];

    return <FileUpload fileList={Files} onClickFileRemove={() => alert('onClickFileRemove')} {...args} />;
  },
  args: {
    buttonProps: {
      fill: true
    }
  }
}
```

### Click Upload Button

```tsx
{
  render: args => {
    const [files, setFiles] = useState<Array<UploadFile>>([]);
    const handleChange = (file: File | File[]) => {
      // file upload api 연동
      // return file upload status or process percent calc from server...
      const fileUploadResult: UploadFile = {
        value: Array.isArray(file) ? file[0] : file,
        status: 'success'
      };
      setFiles([...files, fileUploadResult]);
    };
    const handleClickDownload = () => {
      alert('onClickFile');
      // file download api 연동
      // 실제 fileDownload uri를 호출후, fileList를 갱신해야합니다.
    };
    return <FileUpload {...args} fileList={files} onChange={handleChange} onClickFile={handleClickDownload} onLimitMaxCount={() => alert('onLimitMaxCount')} onClickFileRemove={() => alert('onClickFileRemove')} />;
  },
  args: {
    onClick: () => {
      alert('click button');
    }
  }
}
```

### Direction Horizontal

```tsx
{
  render: (args) => {
    const Files: UploadFile[] = [
      {
        value: new File(['file_name_1'], 'file_name_1.jpg', {
          type: 'image/jpg',
        }),
        status: 'done',
      },
      {
        value: new File(['file_name_2'], 'file_name_3.jpg', {
          type: 'image/jpg',
        }),
        status: 'error',
      },
    ];

    return <FileUpload fileList={Files} onClickFileRemove={() => alert('onClickFileRemove')} {...args} />;
  },
  args: {
    direction: 'horizontal'
  }
}
```

### Disabled

```tsx
{
  render: (args) => {
    const Files: UploadFile[] = [
      {
        value: new File(['file_name_1'], 'file_name_1.jpg', {
          type: 'image/jpg',
        }),
        status: 'done',
      },
      {
        value: new File(['file_name_2'], 'file_name_3.jpg', {
          type: 'image/jpg',
        }),
        status: 'error',
      },
    ];

    return <FileUpload fileList={Files} onClickFileRemove={() => alert('onClickFileRemove')} {...args} />;
  },
  args: {
    disabled: true
  }
}
```

### Disabled Hide Remove Button

```tsx
{
  render: args => {
    const [files, setFiles] = useState<Array<UploadFile>>([]);
    const handleChange = (file: File | File[]) => {
      // file upload api 연동
      // return file upload status or process percent calc from server...
      const fileUploadResult: UploadFile = {
        value: Array.isArray(file) ? file[0] : file,
        status: 'success'
      };
      setFiles([...files, fileUploadResult]);
    };
    const handleClickDownload = () => {
      alert('onClickFile');
      // file download api 연동
      // 실제 fileDownload uri를 호출후, fileList를 갱신해야합니다.
    };
    return <FileUpload {...args} fileList={files} onChange={handleChange} onClickFile={handleClickDownload} onLimitMaxCount={() => alert('onLimitMaxCount')} onClickFileRemove={() => alert('onClickFileRemove')} />;
  },
  args: {
    showRemoveButton: false
  }
}
```

### File Status

```tsx
{
  render: () => {
    const Files: UploadFile[] = [{
      value: new File(['file_name_1'], 'file_name_1.jpg', {
        type: 'image/jpg'
      }),
      status: 'done'
    }, {
      value: new File(['file_name_2'], 'file_name_2.jpg', {
        type: 'image/jpg'
      }),
      percent: 30,
      status: 'uploading'
    }, {
      value: new File(['file_name_2'], 'file_name_3.jpg', {
        type: 'image/jpg'
      }),
      status: 'error'
    }];
    return <FileUpload fileList={Files} onClickFileRemove={() => alert('onClickFileRemove')} />;
  }
}
```

### Loading

```tsx
{
  render: (args) => {
    const Files: UploadFile[] = [
      {
        value: new File(['file_name_1'], 'file_name_1.jpg', {
          type: 'image/jpg',
        }),
        status: 'done',
      },
      {
        value: new File(['file_name_2'], 'file_name_3.jpg', {
          type: 'image/jpg',
        }),
        status: 'error',
      },
    ];

    return <FileUpload fileList={Files} onClickFileRemove={() => alert('onClickFileRemove')} {...args} />;
  },
  args: {
    loading: true
  }
}
```

### Long File Name

```tsx
{
  render: args => {
    const Files: UploadFile[] = [{
      value: new File(['looooooooooooooooooooooooooooongFileName'], 'looooooooooooooooooooooooooooongFileName.jpg', {
        type: 'image/jpg'
      }),
      status: 'done'
    }, {
      value: new File(['f'], 'f.jpg', {
        type: 'image/jpg'
      }),
      status: 'done'
    }, {
      value: new File(['i'], 'i.jpg', {
        type: 'image/jpg'
      }),
      status: 'done'
    }, {
      value: new File(['l'], 'l.jpg', {
        type: 'image/jpg'
      }),
      status: 'done'
    }, {
      value: new File(['e'], 'e.jpg', {
        type: 'image/jpg'
      }),
      status: 'done'
    }];
    return <div style={{
      width: '300px',
      border: '1px solid red'
    }}>
        <FileUpload fileList={Files} onClickFileRemove={() => alert('onClickFileRemove')} {...args} />
      </div>;
  }
}
```

### Max Count

```tsx
{
  render: args => {
    const [files, setFiles] = useState<Array<UploadFile>>([]);
    const handleChange = (file: File | File[]) => {
      // file upload api 연동
      // return file upload status or process percent calc from server...
      const fileUploadResult: UploadFile = {
        value: Array.isArray(file) ? file[0] : file,
        status: 'success'
      };
      setFiles([...files, fileUploadResult]);
    };
    const handleClickDownload = () => {
      alert('onClickFile');
      // file download api 연동
      // 실제 fileDownload uri를 호출후, fileList를 갱신해야합니다.
    };
    return <FileUpload {...args} fileList={files} onChange={handleChange} onClickFile={handleClickDownload} onLimitMaxCount={() => alert('onLimitMaxCount')} onClickFileRemove={() => alert('onClickFileRemove')} />;
  },
  args: {
    maxCount: 3
  }
}
```

### Multiple File Upload

```tsx
{
  render: () => {
    const [files, setFiles] = useState<Array<UploadFile>>([]);
    const handleChange = (fileList: File | File[]) => {
      // file upload api 연동
      // return file upload status or process percent calc from server...
      const fileUploadResult: UploadFile[] = Array.isArray(fileList) ? fileList.map(file => {
        return {
          value: file,
          status: 'success'
        };
      }) : [{
        value: fileList,
        status: 'success'
      }];
      setFiles([...files, ...fileUploadResult]);
    };
    const handleRemoveFile = (file: UploadFile, index: number) => {
      // file remove api 연동
      // 실제 fileRemove api를 호출후, fileList를 갱신해야합니다.
      console.log('handleRemoveFile: ', file, index);
    };
    const handleClickDownload = (file: UploadFile, index: number) => {
      // file download api 연동
      // 실제 fileDownload uri를 호출후, fileList를 갱신해야합니다.
      console.log('handleClickDownload: ', file, index);
    };
    return <FileUpload multiple fileList={files} onChange={handleChange} onClickFile={handleClickDownload} onClickFileRemove={handleRemoveFile} />;
  }
}
```

### Only Jpg File Extension

```tsx
{
  render: args => {
    const [files, setFiles] = useState<Array<UploadFile>>([]);
    const handleChange = (file: File | File[]) => {
      // file upload api 연동
      // return file upload status or process percent calc from server...
      const fileUploadResult: UploadFile = {
        value: Array.isArray(file) ? file[0] : file,
        status: 'success'
      };
      setFiles([...files, fileUploadResult]);
    };
    const handleClickDownload = () => {
      alert('onClickFile');
      // file download api 연동
      // 실제 fileDownload uri를 호출후, fileList를 갱신해야합니다.
    };
    return <FileUpload {...args} fileList={files} onChange={handleChange} onClickFile={handleClickDownload} onLimitMaxCount={() => alert('onLimitMaxCount')} onClickFileRemove={() => alert('onClickFileRemove')} />;
  },
  args: {
    accept: 'image/jpeg'
  }
}
```

### Url Only

```tsx
{
  render: args => {
    const [files, setFiles] = useState<Array<UploadFile>>([{
      url: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
      value: null,
      status: 'done'
    }, {
      url: 'https://www.google.com/images/abcd.png.jpg.gif.png',
      value: null,
      status: 'done'
    }]);
    const handleChange = (file: File | File[]) => {
      const fileUploadResult: UploadFile = {
        value: Array.isArray(file) ? file[0] : file,
        status: 'success'
      };
      setFiles([...files, fileUploadResult]);
    };
    return <div style={{
      width: '300px',
      border: '1px solid red'
    }}>
        <FileUpload fileList={files} onChange={handleChange} onClickFileRemove={() => alert('onClickFileRemove')} {...args} />
      </div>;
  }
}
```