# How to Manage Files in Cloud Storage Using PicList: Upload, Delete, and Sync Guide

> Effortlessly manage cloud storage files with PicList. Upload, delete, and sync data across AWS S3, Cloudflare R2, and Tencent COS using our intuitive interface. Get started today!

- Repository: [Kuingsmile/piclist](https://github.com/kuingsmile/piclist)
- Tags: how-to-guide
- Published: 2026-03-05

---

**PicList provides a complete file management workflow for cloud storage through its Electron-based interface, supporting AWS S3, Cloudflare R2, and Tencent COS via the PicGo core framework.**

PicList ([kuingsmile/piclist](https://github.com/kuingsmile/piclist)) is an open-source image hosting client that extends the PicGo ecosystem with enhanced file management capabilities. Built on Electron, it offers a unified interface for uploading, organizing, and synchronizing files across multiple cloud storage providers while maintaining strict separation between UI components and file operation logic.

## Understanding PicList's Cloud Storage Architecture

The application follows Electron's multi-process model, isolating **UI components** in the renderer process from **file-operation logic** in the main process. When you interact with the drag-and-drop interface in [`src/renderer/pages/Upload.vue`](https://github.com/kuingsmile/piclist/blob/main/src/renderer/pages/Upload.vue), the actual upload execution happens in the main process through [`src/main/utils/uploadTaskQueue.ts`](https://github.com/kuingsmile/piclist/blob/main/src/main/utils/uploadTaskQueue.ts).

Key architectural layers include:

- **Upload UI** ([`src/renderer/pages/Upload.vue`](https://github.com/kuingsmile/piclist/blob/main/src/renderer/pages/Upload.vue)): Handles drag-and-drop, clipboard captures, and progress visualization
- **Gallery UI** ([`src/renderer/pages/Gallery.vue`](https://github.com/kuingsmile/piclist/blob/main/src/renderer/pages/Gallery.vue)): Manages file listing, previews, and batch operations
- **Core upload flow** ([`src/main/utils/uploadTaskQueue.ts`](https://github.com/kuingsmile/piclist/blob/main/src/main/utils/uploadTaskQueue.ts)): Queues tasks and invokes the PicGo upload engine
- **Service adapters** (`src/main/manage/apis/`): Provider-specific implementations for AWS S3, R2, and others

## Configuring Cloud Storage Providers

Before managing files, you must configure your **pic-beds** (upload targets). PicList enumerates supported providers in [`src/renderer/utils/static.ts`](https://github.com/kuingsmile/piclist/blob/main/src/renderer/utils/static.ts), while the configuration schema resides in [`src/renderer/utils/configPaths.ts`](https://github.com/kuingsmile/piclist/blob/main/src/renderer/utils/configPaths.ts). The visual configuration interface is implemented in [`src/renderer/pages/UploaderConfigPage.vue`](https://github.com/kuingsmile/piclist/blob/main/src/renderer/pages/UploaderConfigPage.vue).

Built-in cloud storage options include:

- **AWS S3** (`aws-s3`): Direct SDK v3 integration through [`src/main/manage/apis/aws-s3.ts`](https://github.com/kuingsmile/piclist/blob/main/src/main/manage/apis/aws-s3.ts)
- **Cloudflare R2** (`s3plist`): S3-compatible API wrapper in [`src/main/manage/apis/s3plist.ts`](https://github.com/kuingsmile/piclist/blob/main/src/main/manage/apis/s3plist.ts)
- **Tencent COS** (`tcyun`): Tencent Cloud Object Storage
- **Qiniu** and **UpYun**: Additional Chinese cloud providers

## Uploading Files to Cloud Storage

The upload workflow begins in the renderer process when you select files or paste a URL. An IPC message triggers [`uploadTaskQueue.ts`](https://github.com/kuingsmile/piclist/blob/main/uploadTaskQueue.ts), which creates an `IUploadTaskItem` and invokes `picgo.upload` with your saved configuration.

```typescript
import picgo from '@core/picgo';

// Configure the uploader ID first
await picgo.saveConfig({
  'uploader.aws-s3.defaultId': 'my-s3-config-id',
});

const result = await picgo.upload(['/path/to/image.png']);
console.log('Remote URL:', result[0].url);

```

The queue manages task states (`uploading`, `success`, `error`) and reports progress back to [`Upload.vue`](https://github.com/kuingsmile/piclist/blob/main/Upload.vue) for real-time UI updates.

## Managing Files in the Gallery

The Gallery interface provides batch operations including rename, delete, and copy URL functions. When deleting files, [`src/main/utils/deleteFunc.ts`](https://github.com/kuingsmile/piclist/blob/main/src/main/utils/deleteFunc.ts) dispatches to provider-specific APIs based on the pic-bed type.

For Cloudflare R2 deletions via the `s3plist` plugin:

```typescript
import { deleteObject } from '~/manage/apis/s3plist';

const url = 'https://mybucket.r2.cloudflarestorage.com/path/image.png';
await deleteObject(url, 's3plist'); // Selects the correct plugin adapter

```

The dispatcher also handles the **sync-delete** toggle, optionally removing local database entries when remote objects are deleted.

## Synchronizing Your Local Database with Remote Storage

PicList maintains a local gallery database that can be synchronized to your cloud bucket. The [`src/main/utils/syncSettings.ts`](https://github.com/kuingsmile/piclist/blob/main/src/main/utils/syncSettings.ts) utility handles uploading the database file and related settings to remote storage.

```typescript
import { uploadFile } from '~/main/utils/syncSettings';

// Pushes gallery.db to your configured cloud bucket
await uploadFile(['gallery.db']);

```

This ensures your file metadata and organization persist across devices when using the "Sync to cloud" button in the Gallery UI.

## Summary

- **PicList** separates UI and file operations through Electron's renderer/main process architecture
- **Configuration** happens via [`static.ts`](https://github.com/kuingsmile/piclist/blob/main/static.ts) and [`configPaths.ts`](https://github.com/kuingsmile/piclist/blob/main/configPaths.ts), supporting AWS S3, Cloudflare R2, Tencent COS, and other providers through service-specific adapters
- **Uploads** are queued through [`uploadTaskQueue.ts`](https://github.com/kuingsmile/piclist/blob/main/uploadTaskQueue.ts) and executed via the PicGo core with real-time progress reporting
- **Deletions** dispatch through [`deleteFunc.ts`](https://github.com/kuingsmile/piclist/blob/main/deleteFunc.ts) to provider-specific APIs like [`s3plist.ts`](https://github.com/kuingsmile/piclist/blob/main/s3plist.ts) or [`aws-s3.ts`](https://github.com/kuingsmile/piclist/blob/main/aws-s3.ts)
- **Synchronization** uses [`syncSettings.ts`](https://github.com/kuingsmile/piclist/blob/main/syncSettings.ts) to backup local databases to remote storage

## Frequently Asked Questions

### Which cloud storage providers does PicList support?

PicList supports major providers including **AWS S3**, **Cloudflare R2**, **Tencent COS**, **Qiniu**, and **UpYun** through built-in adapters in `src/main/manage/apis/`. Each provider implements standard upload and delete methods compatible with the PicGo plugin architecture.

### How does PicList handle upload progress tracking?

The application uses [`src/main/utils/uploadTaskQueue.ts`](https://github.com/kuingsmile/piclist/blob/main/src/main/utils/uploadTaskQueue.ts) to manage `IUploadTaskItem` objects that track state transitions from `uploading` to `success` or `error`. These states are reported via IPC to [`src/renderer/pages/Upload.vue`](https://github.com/kuingsmile/piclist/blob/main/src/renderer/pages/Upload.vue), which renders real-time progress bars and status indicators.

### Can I delete files from cloud storage directly through PicList?

Yes, the Gallery UI ([`src/renderer/pages/Gallery.vue`](https://github.com/kuingsmile/piclist/blob/main/src/renderer/pages/Gallery.vue)) includes a "Delete from cloud" toggle that triggers [`src/main/utils/deleteFunc.ts`](https://github.com/kuingsmile/piclist/blob/main/src/main/utils/deleteFunc.ts). This dispatcher maps your pic-bed type (e.g., `aws-s3` or `s3plist`) to the appropriate deletion API and optionally removes the local database entry.

### Where are cloud storage credentials stored in PicList?

Credentials and endpoint configurations are managed through [`src/renderer/utils/configPaths.ts`](https://github.com/kuingsmile/piclist/blob/main/src/renderer/utils/configPaths.ts), which defines the schema for each uploader. The actual configuration values are saved via `picgo.saveConfig()` and persist in PicList's internal configuration store, accessible through the Uploader Configuration page.