@ng-prime-extensions/px-uploader/index.d.ts

PrimeNG uploader extension

import { HttpHeaders, HttpClient } from '@angular/common/http';
import * as i0 from '@angular/core';
import { InjectionToken, TemplateRef, PipeTransform, OnChanges, AfterViewInit, OnDestroy, EventEmitter, ChangeDetectorRef, SimpleChanges } from '@angular/core';
import * as rxjs from 'rxjs';
import { Subscription } from 'rxjs';
import { ControlValueAccessor } from '@angular/forms';
import { PrimeNG } from 'primeng/config';

interface PxEndpointConfig {
    url: string;
    requestMethod?: string;
    headers?: HttpHeaders | {
        [p: string]: string | string[];
    } | Promise<HttpHeaders | {
        [p: string]: string | string[];
    }>;
}
interface PxFile<T = any> {
    name: string;
    /**
     * bytes
     */
    size?: number;
    /**
     * A string containing the file's MIME type, or an empty string if the type could not be determined.
     */
    type?: string;
    imagePreviewUrl?: string;
    /**
     * Always set if the uploaded file is an image
     */
    imageSize?: {
        height: number;
        width: number;
    };
    /**
     * Custom data attached to this file(by default the response body from the save endpoint).
     */
    metaData?: T;
    /**
     * Allow/Disallow the deletion of this file after upload
     */
    allowDelete?: boolean;
    /**
     * Used internally
     */
    _internal?: {
        /**
         * Determines if this file has a recoverable error (temporary loss of connection, server down temporarily, etc.)
         */
        canRetryUpload?: boolean;
        isUploading?: boolean;
        /**
         * File to be uploaded
         */
        uploadedFile?: File;
        uploadError?: string;
        httpSubscription?: Subscription;
        uploadProgress?: number;
    };
}
interface PxImageSize {
    width?: number;
    height?: number;
    /**
     * Whether the image should have these exact sizes
     */
    strict?: boolean;
}
declare enum PxUploaderIntl {
    NO_FILES_MSG = 0,
    UNKNOWN_ERROR = 1,
    INVALID_EXTENSION = 2,
    MAX_SIZE_EXCEEDED = 3,
    ALLOWED_EXTENSIONS = 4,
    MAX_FILE_SIZE = 5,
    IMAGE_SIZE_CHECK_FAILED = 6,
    IMAGE_SIZE_CHECK_TEXT = 7
}
declare const PX_UPLOADER_INTL: InjectionToken<Record<PxUploaderIntl, string>>;
interface PxUploaderIcons {
    retryUploadButton?: string;
    removeFileButton?: string;
    uploadButton?: string;
    fileStatusIconUploading?: string;
    fileStatusIconError?: string;
    fileStatusIconQueued?: string;
}
interface PxUploaderButtons {
    uploadButton?: TemplateRef<any>;
    removeFileButton?: TemplateRef<any>;
    retryUploadButton?: TemplateRef<any>;
}

declare class PxFileSizePipe implements PipeTransform {
    private readonly units;
    constructor();
    /**
     * Converts bytes to a human-readable string
     * @param bytes
     * @param threshold Threshold after which the unit is increased. e.g. 1024B -> 1KB
     * @param digits The number of fraction digits shown. E.g. 2.25MB
     */
    transform(bytes: number, threshold?: number, digits?: number): string;
    static ɵfac: i0.ɵɵFactoryDeclaration<PxFileSizePipe, never>;
    static ɵpipe: i0.ɵɵPipeDeclaration<PxFileSizePipe, "pxFileSize", true>;
}

declare class PxUploaderComponent implements ControlValueAccessor, OnChanges, AfterViewInit, OnDestroy {
    private readonly http;
    private readonly changeDetector;
    protected primeNGConfig: PrimeNG;
    /**
     * Endpoint that handles the upload.
     */
    saveEndpoint: PxEndpointConfig;
    /**
     * Endpoint that handles file removal.
     */
    deleteEndpoint: PxEndpointConfig;
    /**
     * Uploader label.
     */
    label: string;
    /**
     * Allow multiple files?
     */
    multiple: boolean;
    /**
     * Determines how the added files are rendered.
     */
    displayAs: 'list' | 'grid';
    /**
     * A list of allowed file extensions(lowercase), if empty the extension check is skipped.
     * Example: ['txt', 'xlsx', ...]
     */
    allowedExtensions: string[];
    /**
     * Maximum file size in bytes. Default: 5MB.
     */
    maxFileSize: number;
    /**
     * How many files should we upload in parallel?
     */
    maxParallelUploads: number;
    /**
     * Whether to show a preview when the uploaded file is an image.
     */
    showImagePreview: boolean;
    /**
     * Limits the maximum width and/or height of uploaded images.
     * For example, you can check if the uploaded image has a width of exactly 100
     * by passing [maxImageSize]="{width: 100, strict: true}" or just limit the maximum by removing the 'strict' property.
     */
    maxImageSize?: PxImageSize;
    /**
     * Overwrite the default icons used.
     */
    icons?: PxUploaderIcons;
    /**
     * Overwrite the default buttons used.
     */
    buttons?: PxUploaderButtons;
    /**
     * Additional message to be displayed to the user.
     */
    infoMessage?: string;
    /**
     * Displays the file name
     */
    showFileName: boolean;
    /**
     * Displays the file size in human-readable form
     */
    showFileSize: boolean;
    /**
     * If the file is an image, displays the image height and width
     */
    showImageSize: boolean;
    /**
     * Event triggered when all the files in the upload queue are uploaded.
     */
    uploadFinished: EventEmitter<PxFile<any> | PxFile<any>[] | null>;
    protected _value: PxFile[];
    protected filesQueue: PxFile[];
    protected maxImageSizeText: string;
    protected allowedExtensionsText: string;
    protected hasFiles: boolean;
    protected dragoverEventActive: boolean;
    protected readonly intl: Record<PxUploaderIntl, string>;
    protected readonly PxUploaderIntl: typeof PxUploaderIntl;
    protected _disabled: boolean;
    private readonly fileInput;
    private onChange;
    private onTouched;
    private isTouched;
    private isAngularFormValue;
    private uploadingFilesCount;
    private processingUploadQueue;
    private viewInit;
    constructor(http: HttpClient, changeDetector: ChangeDetectorRef, primeNGConfig: PrimeNG, intl?: Record<PxUploaderIntl, string>);
    ngOnChanges(changes: SimpleChanges): void;
    ngAfterViewInit(): void;
    /**
     * Opens the file input dialog.
     */
    openFilesInput(): void;
    /**
     * Will always be null if there are no files (regardless of multiple attribute)
     */
    get value(): null | PxFile | PxFile[];
    set value(value: PxFile[] | PxFile | null);
    get disabled(): boolean;
    set disabled(state: boolean);
    setDisabledState(isDisabled: boolean): void;
    writeValue(value: any): void;
    registerOnChange(onChange: any): void;
    registerOnTouched(onTouched: any): void;
    protected onFilesAdded(addedFiles: FileList): void;
    protected processUploadQueue(): Promise<void>;
    protected uploadFile(queuedPxFile: PxFile): Promise<rxjs.Subscription>;
    protected removeFileFromQueue(fileIndex: number): void;
    /**
     * Removes an uploaded file by index
     * @param fileIndex
     */
    protected removeFile(fileIndex: number): Promise<void>;
    protected onDragEnter(evt: DragEvent): void;
    protected onDragover(evt: DragEvent): void;
    protected onDragLeave(evt: DragEvent): void;
    protected onFilesDropped(evt: DragEvent): void;
    protected getRetryUploadFn(queuedFileIndex: number): () => void;
    protected getRemoveFileFn(isQueued: boolean, fileIndex: number): () => void;
    protected getOpenFilesInputFn(): () => any;
    private checkFile;
    private checkImage;
    private setPxFileError;
    private getImageDetails;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<PxUploaderComponent, [null, null, null, { optional: true; }]>;
    static ɵcmp: i0.ɵɵComponentDeclaration<PxUploaderComponent, "px-uploader", never, { "saveEndpoint": { "alias": "saveEndpoint"; "required": true; }; "deleteEndpoint": { "alias": "deleteEndpoint"; "required": false; }; "label": { "alias": "label"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "displayAs": { "alias": "displayAs"; "required": false; }; "allowedExtensions": { "alias": "allowedExtensions"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "maxParallelUploads": { "alias": "maxParallelUploads"; "required": false; }; "showImagePreview": { "alias": "showImagePreview"; "required": false; }; "maxImageSize": { "alias": "maxImageSize"; "required": false; }; "icons": { "alias": "icons"; "required": false; }; "buttons": { "alias": "buttons"; "required": false; }; "infoMessage": { "alias": "infoMessage"; "required": false; }; "showFileName": { "alias": "showFileName"; "required": false; }; "showFileSize": { "alias": "showFileSize"; "required": false; }; "showImageSize": { "alias": "showImageSize"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "uploadFinished": "uploadFinished"; }, never, never, true, never>;
}

export { PX_UPLOADER_INTL, PxFileSizePipe, PxUploaderComponent, PxUploaderIntl };
export type { PxEndpointConfig, PxFile, PxImageSize, PxUploaderButtons, PxUploaderIcons };