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

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) 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, the actual upload execution happens in the main process through src/main/utils/uploadTaskQueue.ts.

Key architectural layers include:

• Upload UI (src/renderer/pages/Upload.vue): Handles drag-and-drop, clipboard captures, and progress visualization
• Gallery UI (src/renderer/pages/Gallery.vue): Manages file listing, previews, and batch operations
• Core upload flow (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, while the configuration schema resides in src/renderer/utils/configPaths.ts. The visual configuration interface is implemented in 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
• Cloudflare R2 (s3plist): S3-compatible API wrapper in 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, which creates an IUploadTaskItem and invokes picgo.upload with your saved configuration.

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 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 dispatches to provider-specific APIs based on the pic-bed type.

For Cloudflare R2 deletions via the s3plist plugin:

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 utility handles uploading the database file and related settings to remote storage.

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 and configPaths.ts, supporting AWS S3, Cloudflare R2, Tencent COS, and other providers through service-specific adapters
• Uploads are queued through uploadTaskQueue.ts and executed via the PicGo core with real-time progress reporting
• Deletions dispatch through deleteFunc.ts to provider-specific APIs like s3plist.ts or aws-s3.ts
• Synchronization uses 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 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, 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) includes a "Delete from cloud" toggle that triggers 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, 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}