File uploader

interface Uploader {
  upload: (url: string | ArrayBuffer) => void;
  abort: () => void;
}
interface Upload {
  file: File;
  uploader: Uploader;
}
class MockUploader implements Uploader {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  public onprogress: (percent: number) => void = (_: number) => {};
  public onabort: () => void = () => {};
  public onfail: (err: string) => void = (_: string) => {};
  public oncomplete: () => void = () => {};

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  upload(_url: string | ArrayBuffer) {
    // implement your logic to upload files
  }

  abort() {
    // implement your logic to abort file upload
  }
}

const [uploads, setUploads] = useState<Upload[]>([]);
const [progressList, setProgressList] = useState<Record<string, number>>({});

function deleteFile(file: Upload) {
    setUploads((uploadz) => {
      return uploadz.filter(u => u.name !== file.name);
  })
}

function uploadFile(file: File) {
  const reader = new FileReader();
  reader.onload = (e: ProgressEvent<FileReader>) => {
  if (!e.target) return;
  const url = e.target.result;
  const uploader = new MockUploader();
  setUploads(old => [...old, {file, uploader}]);

  uploader.onabort = () => console.log("Aborting upload");
  uploader.onfail = err => console.log("Upload failed: ", err);
  uploader.oncomplete = () => console.log("File upload complete");
  uploader.onprogress = percent => {
  setProgressList(old => ({...old, [file.name]: percent}));
};

if (url) {
    uploader.upload(url);
  }
}
reader.readAsDataURL(file);

<GoAFormItem label="Upload a file">
  <GoAFileUploadInput onSelectFile={uploadFile} maxFileSize="100MB" />
  {uploads.map(upload => (
    <GoAFileUploadCard
      key={upload.file.name}
      filename={upload.file.name}
      type={upload.file.type}
      size={upload.file.size}
      progress={progressList[upload.file.name]}
      onDelete={() => deleteFile(upload)}
      onCancel={() => deleteFile(upload)}
    />
  ))}
</GoAFormItem>