Queue

<Filenest.Queue
  children={({ uploads, upload, meta }) => (
    <div>
      <div>Queued files:</div>
      {uploads.map((Upload, index) => (
        <Upload.Root
          key={index}
          children={({ upload, removeFromQueue }) => (
            <div>
              <div>{upload.raw.name}</div>
              {!meta.isLoading && !upload.isDone && (
                <button
                  onClick={removeFromQueue}
                  disabled={upload.isUploading}
                >
                  Remove
                </button>
              )}
              <div>Progress: {upload.progress}%</div>
            </div>
          )}
        />
      ))}
      <button onClick={upload} disabled={meta.isLoading}>
        <span>Upload {uploads.length} files</span>
        {meta.isLoading && (
          <div>Total progress: {meta.totalProgress}%</div>
        )}
      </button>
    </div>
  )}
/>