@intrada-dashboard/ng-files v0.6.0
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