@flusys/ng-storage

File storage UI for FLUSYS Angular apps — upload, file manager pages, presigned URL fetching, and provider adapter registration for Local, S3, Azure, and SFTP backends.

Installation

npm install @flusys/ng-storage @flusys/ng-core @flusys/ng-shared

1. Register Providers

// app.config.ts
import { provideStorageProviders } from '@flusys/ng-storage';

export const appConfig: ApplicationConfig = {
  providers: [
    ...provideStorageProviders(), // registers FILE_PROVIDER for ng-shared's file picker and FileUrlService
  ],
};

FILE_PROVIDER is consumed by FileSelectorComponent and FileUrlService in ng-shared. Without this, file pickers in other packages (e.g., ng-form-builder, ng-email) will not work.

2. Add Storage Routes (Optional)

// app.routes.ts
import { STORAGE_ROUTES } from '@flusys/ng-storage';

export const routes: Routes = [
  {
    path: 'storage',
    loadChildren: () => STORAGE_ROUTES,
  },
];

Routes included (all protected by permissionGuard):

4. Fetch File URLs (Critical Rule)

Never construct file URLs manually. Always use FileUrlService from ng-shared — the backend generates presigned, access-controlled URLs for all storage providers.

import { FileUrlService } from '@flusys/ng-shared';

@Component({ ... })
export class MyComponent {
  private readonly fileUrlService = inject(FileUrlService);

  async loadAvatar(fileId: string) {
    // POST /file-manager/get-files → returns presigned URL
    const files = await firstValueFrom(this.fileUrlService.getFileUrls([fileId]));
    const url = files?.data?.[0]?.url ?? null;
  }
}

Manual URL construction breaks with S3/Azure (presigned URLs expire) and does not enforce access control.

License

MIT © FLUSYS