File upload

<flx-file-upload
  accept="image/*"
  [multiple]="true"
  [maxSize]="5 * 1024 * 1024"
  (filesSelected)="onImagesSelected($event)">
</flx-file-upload>

<div class="image-previews">
  <img
    *ngFor="let preview of imagePreviews"
    [src]="preview"
    alt="Preview" />
</div>

export class ImageUpload {
  imagePreviews: string[] = [];

  onImagesSelected(files: File[]) {
    files.forEach(file => {
      const reader = new FileReader();
      reader.onload = (e) => {
        this.imagePreviews.push(e.target?.result as string);
      };
      reader.readAsDataURL(file);
    });
  }
}

<flx-file-upload
  accept=".pdf,.doc,.docx"
  [maxSize]="10 * 1024 * 1024"
  [maxFiles]="3"
  (filesSelected)="validateAndHandle($event)">
</flx-file-upload>

<flx-message
  *ngIf="validationError"
  type="error"
  [dismissible]="true"
  (dismiss)="validationError = null">
  {{ validationError }}
</flx-message>

export class ValidatedUpload {
  validationError: string | null = null;
  maxSizeBytes = 10 * 1024 * 1024; // 10MB
  allowedTypes = ['.pdf', '.doc', '.docx'];

  validateAndHandle(files: File[]) {
    this.validationError = null;

    // Check file count
    if (files.length > 3) {
      this.validationError = 'Maximum 3 files allowed';
      return;
    }

    // Validate each file
    for (const file of files) {
      // Check size
      if (file.size > this.maxSizeBytes) {
        this.validationError = `File ${file.name} exceeds 10MB limit`;
        return;
      }

      // Check type
      const ext = '.' + file.name.split('.').pop()?.toLowerCase();
      if (!this.allowedTypes.includes(ext)) {
        this.validationError = `File ${file.name} has invalid type`;
        return;
      }
    }

    this.handleValidFiles(files);
  }

  handleValidFiles(files: File[]) {
    console.log('Valid files:', files);
  }
}

<flx-file-upload
  [showProgress]="true"
  (filesSelected)="startUpload($event)"
  (uploadProgress)="onProgress($event)"
  (uploadComplete)="onComplete($event)"
  (uploadError)="onError($event)">
</flx-file-upload>

export class ProgressUpload {
  startUpload(files: File[]) {
    files.forEach(file => this.uploadWithProgress(file));
  }

  uploadWithProgress(file: File) {
    const formData = new FormData();
    formData.append('file', file);

    this.http.post('/api/upload', formData, {
      reportProgress: true,
      observe: 'events'
    }).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        const progress = Math.round(100 * event.loaded / (event.total || 1));
        console.log(`Upload progress: ${progress}%`);
      } else if (event.type === HttpEventType.Response) {
        console.log('Upload complete!');
      }
    });
  }

  onProgress(progress: UploadProgress) {
    console.log(`${progress.fileName}: ${progress.percentage}%`);
  }

  onComplete(result: UploadResult) {
    console.log('Upload successful:', result);
  }

  onError(error: Error) {
    console.error('Upload failed:', error);
  }
}

<flx-file-upload
  [multiple]="true"
  [autoUpload]="true"
  (uploadComplete)="onUploadComplete($event)">
</flx-file-upload>

<flx-file-upload (filesSelected)="handleFiles($event)">
  <ng-template #uploadTemplate>
    <div class="custom-upload-area">
      <flx-icon name="cloud-upload" size="48"></flx-icon>
      <h3>Drop files here</h3>
      <p>or click to browse</p>
      <p class="hint">Supports PDF, DOC, DOCX up to 10MB</p>
    </div>
  </ng-template>
</flx-file-upload>