VUI File Uploader

Simple File Upload

@Component({
  standalone: true,
  imports: [VuiUploaderComponent],
  template: `
    <ng-vui-file-uploader
      [multiple]="true"
      [maxSize]="10485760"
      [acceptedTypes]="acceptedTypes"
      [uploadUrl]="'/api/upload'"
      (filesSelected)="onFilesSelected($event)"
      (uploadProgress)="onUploadProgress($event)"
      (uploadComplete)="onUploadComplete($event)"
      (uploadError)="onUploadError($event)">
    </ng-vui-file-uploader>
  `
})
export class MyComponent {
  acceptedTypes = ['image/*', '.pdf', '.doc', '.docx'];

  onFilesSelected(files: FileUploadMetadata[]): void {
    console.log('Files selected:', files);
  }

  onUploadProgress(event: UploadProgressEvent): void {
    console.log(`Upload progress: ${event.progress}%`);
  }

  onUploadComplete(response: any): void {
    console.log('Upload completed:', response);
  }

  onUploadError(error: any): void {
    console.error('Upload error:', error);
  }
}

Custom Upload Configuration

export class CustomUploaderComponent {
  uploadConfig: UploadConfig = {
    uploadUrl: '/api/files/upload',
    maxFileSize: 5 * 1024 * 1024, // 5MB
    allowedTypes: [
      'image/jpeg', 'image/png', 'image/gif',
      'application/pdf',
      'application/msword',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    ],
    maxFiles: 5,
    autoUpload: false, // Manual upload control
    headers: {
      'Authorization': 'Bearer ' + this.authToken,
      'X-Custom-Header': 'custom-value'
    },
    additionalData: {
      userId: this.currentUser.id,
      category: 'documents'
    }
  };

  // Custom validation rules
  customValidation = (file: File): ValidationResult => {
    // Custom file name validation
    if (file.name.includes(' ')) {
      return {
        valid: false,
        error: 'File names cannot contain spaces'
      };
    }

    // Custom content validation
    if (file.type === 'image/jpeg' && file.size > 2 * 1024 * 1024) {
      return {
        valid: false,
        error: 'JPEG images must be under 2MB'
      };
    }

    return { valid: true };
  };

  onFileValidation(file: File): boolean {
    const result = this.customValidation(file);
    if (!result.valid) {
      this.showError(result.error);
      return false;
    }
    return true;
  }

  // Manual upload control
  startUpload(): void {
    this.uploaderComponent.startUpload();
  }

  pauseUpload(): void {
    this.uploaderComponent.pauseUpload();
  }

  cancelUpload(): void {
    this.uploaderComponent.cancelUpload();
  }
}

Image Preview & Thumbnail Generation

export class ImageUploaderComponent {
  selectedImages: FileWithPreview[] = [];

  imageConfig: UploadConfig = {
    acceptedTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
    maxFileSize: 5 * 1024 * 1024,
    generateThumbnails: true,
    thumbnailSize: { width: 200, height: 200 },
    compressionQuality: 0.8
  };

  onImagesSelected(files: FileUploadMetadata[]): void {
    files.forEach(fileData => {
      if (fileData.file.type.startsWith('image/')) {
        this.generatePreview(fileData);
      }
    });
  }

  private generatePreview(fileData: FileUploadMetadata): void {
    const reader = new FileReader();
    reader.onload = (e) => {
      const preview: FileWithPreview = {
        ...fileData,
        preview: e.target?.result as string,
        thumbnail: this.generateThumbnail(e.target?.result as string)
      };
      this.selectedImages.push(preview);
    };
    reader.readAsDataURL(fileData.file);
  }

  private generateThumbnail(imageSrc: string): string {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
    
    img.onload = () => {
      canvas.width = 200;
      canvas.height = 200;
      ctx?.drawImage(img, 0, 0, 200, 200);
    };
    
    img.src = imageSrc;
    return canvas.toDataURL('image/jpeg', 0.8);
  }

  removeImage(index: number): void {
    this.selectedImages.splice(index, 1);
  }
}

interface FileWithPreview extends FileUploadMetadata {
  preview: string;
  thumbnail: string;
}