Ng-files - Angular Intrada File Integration

This package provides Angular components to integrate with Intrada File. This package is for internal use only and should not be used by non-Q-FREE employees.

Installation

Run npm i @intrada-dashboard/ng-files to install the latest version.

How to Use

Registering the module

import {NgModule} from '@angular/core';
import {NgIdModule} from '@intrada-dashboard/ng-id';
import {NgFilesModule} from '@intrada-dashboard/ng-files';

@NgModule({
    imports: [
        NgIdModule.forRoot({
            // ...
            tokenURLs: [
                'https://files.q-free.nl/api' // <== Add the Intrada Files API to the token URL
            ],
            // ...
        }),

        NgFilesModule.forRoot({
            fileApiEndpoint: 'https://files.q-free.nl/api/v1'
        }) // <== Load the NgFilesModule
    ],
})
export class AppModule {
}

Using the FileService

You can use the file service to receive information from the Files API.

import {Component} from '@angular/core';
import {FileService} from '@intrada-dashboard/ng-files';

@Component()
export class AppComponent {
    constructor(
        readonly fileService: FileService,
    ) {
        // Retrieve information regarding a single file based on the IDs
        fileService.getFile(id, password);
        // Receive a list of files that are accessible with the current token

        fileService.getFiles();
        // Receive the contents of one or multiple files
        fileService.downloadFile(id|ids, password);

        // Receive an URL where the user can download the file. This is the recommended way of letting the user download
        // a file.
        fileService.createDownloadUrl(id|ids, password);
        
        // Delete a single file
        fileService.deleteFile(id);
    }
}

Uploading new files with the UploadService

import {Component} from '@angular/core';
import {UploadService, UploadStatus} from '@intrada-dashboard/ng-files';

@Component()
export class AppComponent {
    constructor(
        readonly uploadService: UploadService,
    ) {
        // A DOM File to upload
        file: File = null;
        
        // Whether we should only match this file with previous uploads that have not been completed
        previousUploadsOnly = false;
        
        // The key of the upload. The key is used for matching incomplete uploads. All previously started uploads
        // can only be matched with this file if the key is identical
        key = 'app.upload';
        
        uploadService.createUpload(file, previousUploadsOnly, key).subscribe(upload => {
        
            upload.observable.subscribe(
                // On status change
                () => console.log(`Upload - ${upload.percentage}`),
                // On error
                error => console.error(`An error occurred: ${error}`),
                // The upload has finished
                () => {
                    const uploadedFile = upload.file;
                    // ..;
                })

            upload.start();
        });   
    }
}

The file input component

To simplify the file upload management, you can use the file input component:

import {FileSelection, validateFileSelection} from '@intrada-dashboard/ng-files';

// ...
const fileSelection = new FileSelection({
  items: [], // The selected items
  multiple: true, // Whether multiple files can be uploaded
  disabled: false, // Whether the input is disabled
  accept: ['image/*', '.txt'], // Which files are accepted, this can mime types of file extensions
  browseExistingFiles: false, // Browse existing files - this should currently be disabled as this is still a WIP.
  acceptPreviousUploads: true, // Accept uploads that have been started previously but have not been accepted
  key: 'app.upload' // The key, as explained previously
});

<intrada-files-input [(ngModel)]="fileSelection"></intrada-files-input>

You can find all the selected files in fileSelection.items, all the uploaded files are in fileSelection.files.

If you want to use an Angular form validator, you can use validateFileSelection(required: boolean). This validator will only regard the input as valid if there are no uploads in progress or failed uploads: only uploaded files are allowed. If required is set to false, an empty selection is accepted as well.

Tiles

Lastly, you can use a tile to display a file:

<intrada-files-tile
    (deselect)="deselect($event) //The user deselects the file (only possible is true)" 
    (restore)="restore($event) //The user wants to restore a previous upload (only possible if edit is true)"
    [item]="file // The file object"
    [edit]="true"
    [loadThumbnail]="true // Show a thumbnail for uploaded images"
    [downloadButton]="true //Show the download button. Only possible if the file has been uploaded and edit is false">
</intrada-files-tile>

If you do not have the file object already, you can also use the intrada-files-tile-async component to present the file. This component will handle all the loading for you:

<intrada-files-tile
    (deselect)="deselect($event) //The user deselects the file (only possible is true)" 
    (restore)="restore($event) //The user wants to restore a previous upload (only possible if edit is true)"
    [id]="1 // the ID of the file to present"
    [edit]="true"
    [loadThumbnail]="true // Show a thumbnail for uploaded images"
    [downloadButton]="true //Show the download button. Only possible if the file has been uploaded and edit is false">
</intrada-files-tile>

Thumbnail

To simply disable a thumbnail of the file, you can use the following component:

<intrada-files-thumbnail [file]="file // The file to show a thumbnail of"></intrada-files-thumbnail>

Keep in mind that this only works with images