Nurturing Palpable Magnificence

    @ngx-file-upload/ui
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.1 • Public • Published

    ngx file upload / ui

    npm Codacy Badge DeepScan grade codecov dependencies Status youtube how tow

    Angular 12 components for @ ngx-file-upload / core to create a UI. All components were packed in separate modules which can be integrated and used separately as required.

    Angular 9

    Use ngx-file-upload/ui v2.2.1.

    This package is build with angular 9 and typescript ^3.7.5 which is not supported by angular 8 by default. Typings for 3.5.5 and 3.7.5 are diffrent, if u want use this package in Angular 8 Project update your Angular 8 Project to Typescript ^3.7.5.

    We also change all namespaces to have NgxFileUpload as prefix @see breaking change 1.1.2 to 2.0.0

    Angular 8

    Use ngx-file-upload/ui v1.1.2, compiled with typescript 3.5.x which is used default by angular 8.

    @dependencies

    npm

    @Install

    npm i --save @ngx-file-upload/ui @ngx-file-upload/core

    Language Support

    To add a specific language to @ngx-file-upload/ui components create a new language file where you define custom translations which will only work for predefined components we provide with @ngx-file-upload/ui.

    import { NGX_FILE_UPLOAD_UI_I18N, NgxFileUploadUiI18n } from "@ngx-file-upload/ui";
    
    /** 
     * define translation json data all sections are optional
     * if not set it will take default value
     */
    const ngxFileUploadI18n: NgxFileUploadUiI18n = {
        common: {
            SELECT_FILES: "Select File"
        },
        item: {
            UPLOADED: "uploaded"
        },
        toolbar: {
            CLEAN_UP: "Remove invalid and completed",
            REMOVE_ALL: "Remove all",
            UPLOADS: "Progessing File Uploads",
            UPLOAD_ALL: "Upload All"
        }
    };
    
    @NgModule({
        ...
        providers: [
            ...
            /** 
             * @optional bind language data to injection token 
             * if not provided it will use default text labels
             */
            { provide: NGX_FILE_UPLOAD_UI_I18N, useValue: ngxFileUploadI18n },
            ...
    })
    export class AppModule {
    }

    Read Docs for more Informations: Language Support

    @Modules

    NgxFileUploadUiModule

    containing all UI modules, should imported if all resources should be used.


    NgxFileUploadUiCommonModule

    Includes following Pipes

    • StateToStringPipe - converts NgxFileUploadState to string value
    • FileSizePipe - converts file size into human readable value
    • IsCancelAblePipe - returns true if upload can canceled

    app.module.ts

    import { NgModule } from "@angular/core";
    import { CommonModule } from "@angular/common";
    import { NgxFileUploadCoreModule } from "@ngx-file-upload/core";
    import { NgxFileUploadUiCommonModule } from "@ngx-file-upload/ui";
    
    @NgModule({
        imports: [
            CommonModule,
            NgxFileUploadCoreModule
            NgxFileUploadUiCommonModule,
        ])],
        declarations: [...],
        entryComponents: [...],
        providers: [],
    })
    export class AppModule { }

    app.component.html

    <ul>
        <!-- array of UploadRequests -->
        <li *ngFor="upload of uploads">
            <div>State: {{upload.data.state | stateToString }}</div>
            <div>Uploaded: {{upload.data.uploaded | fileSize }}</div>
            <div>Size: {{upload.data.size | fileSize }}</div>
            <button [disabled]="!(upload.data.state | isCancelAble)">Cancel</div>
        </li>
    </ul>

    Read Docs for more Informations: Pipes


    NgxFileUploadUiProgressbarModule

    Contains progress bars for visualization of the upload progress.

    CircleProgressbar

    ngx-file-upload/ui/progressbar-circle

    Circle Progressbar which can be split into parts with gap or display completly as one. Can be animated by css.

    Progressbar

    ngx-file-upload/ui/progressbar-circle

    Progressbar which can be split into parts with gap or display completly as one. Could not animated via css but animation is included and can turned off.

    Read Docs for more Informations: ProgressbarModule


    NgxFileUploadUiItemModule

    ngx-file-upload/ui/upload-item

    Contains customize able upload item

    app.module.ts

    import { NgModule } from "@angular/core";
    import { CommonModule } from "@angular/common";
    import { NgxFileUploadCoreModule } from "@ngx-file-upload/core";
    import { NgxFileUploadUiItemModule } from "@ngx-file-upload/ui";
    
    @NgModule({
        imports: [
            CommonModule,
            NgxFileUploadCoreModule
            NgxFileUploadUiItemModule,
        ])],
        declarations: [...],
        entryComponents: [...],
        providers: [],
    })
    export class AppModule { }

    app.component.html

    <ul>
        <!-- array of UploadRequests -->
        <li *ngFor="upload of uploads" class="upload-item">
            <ngx-file-upload-ui--item [upload]="upload">
            </ngx-file-upload-ui--item>
        </li>
    </ul>

    Read Docs for more Informations: Upload Item


    NgxFileUploadUiToolbarModule

    ngx-file-upload/ui/toolbar

    Contains UploadToolbar for visualisation of current upload progress and control to start, stop or clean up uploads.

    app.module.ts

    import { NgModule } from "@angular/core";
    import { CommonModule } from "@angular/common";
    import { NgxFileUploadCoreModule } from "@ngx-file-upload/core";
    import { NgxFileUploadUiToolbarModule } from "@ngx-file-upload/ui";
    
    @NgModule({
        imports: [
            CommonModule,
            NgxFileUploadCoreModule
            NgxFileUploadUiToolbarModule,
        ])],
        declarations: [...],
        entryComponents: [...],
        providers: [],
    })
    export class AppModule { }

    app.component.html

    <ngx-file-upload-ui--toolbar [storage]="uploadStorage"></ngx-file-upload-ui--toolbar>
    <ul>
        <!-- array of UploadRequests -->
        <li *ngFor="upload of uploads" class="upload-item">
            <!-- display upload data -->
        </li>
    </ul>

    NgxFileUploadUiFileBrowserModule

    Simple directive for browse or drop files.

    import { NgModule } from "@angular/core";
    import { CommonModule } from "@angular/common";
    import { NgxFileUploadCoreModule } from "@ngx-file-upload/core";
    import { NgxFileUploadUiFileBrowserModule } from "@ngx-file-upload/ui";
    
    @NgModule({
        imports: [
            CommonModule,
            NgxFileUploadCoreModule
            NgxFileUploadUiFileBrowserModule,
        ])],
        declarations: [...],
        entryComponents: [...],
        providers: [],
    })
    export class AppModule { }

    app.component.html

    <div ngxFileUpload (add)="dropFiles($event)">
        <div class="file-browser">
            <span>Drop or Browse</span>
        </div>
    </div>

    Read Docs for more Informations: Upload File Browser


    @Demo

    Demo can be found here.

    @Credits

    Special thanks for code reviews, great improvements and ideas to

    alt Konrad Mattheis
    Konrad Mattheis
    Thomas Haenig
    Thomas Haenig
    alt Alexander Görlich
    Alexander Görlich

    Author

    Ralf Hannuschka Github

    Install

    npm i @ngx-file-upload/ui

    DownloadsWeekly Downloads

    50

    Version

    5.0.1

    License

    MIT

    Unpacked Size

    946 kB

    Total Files

    48

    Last publish

    Collaborators

    • r-hannuschka