Context
Portabase supports multiple storage providers (S3-compatible like AWS S3 or Cloudflare R2, Google Drive) used to store backups.
Objective
Add support for Azure Blob Storage as a new storage provider.
Technical Implementation
1. Create Azure Blob Storage provider
Implement ping, get, upload, delete functions in:
src/features/storages/providers/azure-blob-storage.ts
2. Register provider in storage system
-
Add azure-blob-storage option to provider handlers:
src/features/storages/providers/index.ts
-
Extend provider type system by adding azure-blob-storage to StorageProviderKind:
src/features/storages/types.ts
3. Implement Azure Blob Storage configuration form (schema + UI)
-
Create validation schema:
src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/storages/forms/azure-blob-storage.schema.ts
-
Create UI form component:
src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/storages/forms/azure-blob-storage.form.tsx
4. Integrate Azure Blob Storage into UI provider system
-
Update channel form schema:
src/components/wrappers/dashboard/admin/channels/channel/channel-form/channel-form.schema.ts
-
Update provider registry:
src/components/wrappers/dashboard/admin/channels/helpers/storage.tsx
Remove preview: true for Azure Blob Storage provider.
-
Update form renderer:
Add azure-blob-storage case in renderChannelForm in:
src/components/wrappers/dashboard/admin/channels/helpers/common.tsx
Validation Requirements (mandatory)
The Pull Request must include screenshots demonstrating:
- “Add Storage Channel” dialog showing Azure Blob Storage as an available provider
- Azure Blob Storage configuration form in create mode
- Azure Blob Storage configuration form in edit mode
First Good issue
This issue is suitable for first-time contributors familiar with TypeScript and React.
Context
Portabase supports multiple storage providers (S3-compatible like AWS S3 or Cloudflare R2, Google Drive) used to store backups.
Objective
Add support for Azure Blob Storage as a new storage provider.
Technical Implementation
1. Create Azure Blob Storage provider
Implement
ping,get,upload,deletefunctions in:src/features/storages/providers/azure-blob-storage.ts2. Register provider in storage system
Add
azure-blob-storageoption to provider handlers:src/features/storages/providers/index.tsExtend provider type system by adding
azure-blob-storagetoStorageProviderKind:src/features/storages/types.ts3. Implement Azure Blob Storage configuration form (schema + UI)
Create validation schema:
src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/storages/forms/azure-blob-storage.schema.tsCreate UI form component:
src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/storages/forms/azure-blob-storage.form.tsx4. Integrate Azure Blob Storage into UI provider system
Update channel form schema:
src/components/wrappers/dashboard/admin/channels/channel/channel-form/channel-form.schema.tsUpdate provider registry:
src/components/wrappers/dashboard/admin/channels/helpers/storage.tsxRemove
preview: truefor Azure Blob Storage provider.Update form renderer:
Add
azure-blob-storagecase inrenderChannelFormin:src/components/wrappers/dashboard/admin/channels/helpers/common.tsxValidation Requirements (mandatory)
The Pull Request must include screenshots demonstrating:
First Good issue
This issue is suitable for first-time contributors familiar with TypeScript and React.