fst-ngx-file-uploader

NgxContentBuilder Library for Angular 14

This library was generated with Angular CLI.

Installation

npm install fst-ngx-file-uploader@latest

Import the styles in your main stylesheet:

@import '../node_modules/fst-ngx-file-uploader/scss/ngx-file-uploader.component';

Import the module:

import { NgxFileUploaderModule } from 'ngx-file-uploader';

@NgModule({
	declarations: [
		AppComponent,
	],
	imports: [
		BrowserModule,
		NgxFileUploaderModule,
	],
	providers: [],
	bootstrap: [AppComponent]
})
export class AppModule { }

Usage

import awsConfig from './amplifyConfiguration';

export class SomeComponent {
	getUploadedData(files: FileElement[]) {
		// eslint-disable-next-line no-console
		console.log('GET uploaded data from emit: ', files);
	}

	getLog(event: any) {
		// eslint-disable-next-line no-console
		console.log('Get log data:', event);
	}

	getMessages(event: any) {
		// eslint-disable-next-line no-console
		console.log('Get message', event);
	}
}

<Ngx-FileUploader
	[config]="fileUploaderConfig"
	[awsConfig]="awsConfig"
	[files]="uploadedFiles" 
	(uploadedData)="getUploadedData($event)"
	(log)="getLog($event)"
	(messages)="getMessages($event)"
></Ngx-FileUploader>

Example config data

this.uploadedFiles = [
	{
		"done": true,
		"enablePreview": true,
		"key": "456.jpg",
		"mimeType": "image/jpg",
		"name": "456.jpg",
		"path": "products/",
		"size": "1.82 MB",
		"url": "https://image.shutterstock.com/shutterstock/photos/1037719192/display_1500/stock-vector-default-ui-image-placeholder-for-wireframes-for-apps-and-websites-1037719192.jpg"
	},
	{
		"done": true,
		"enablePreview": true,
		"key": "455.jpg",
		"mimeType": "image/jpg",
		"name": "455.jpg",
		"path": "products/",
		"size": "1.82 MB",
		"url": "https://image.shutterstock.com/image-vector/no-image-vector-symbol-missing-600w-1310632172.jpg"
	}
];

this.fileUploaderConfig = {
	bucketPathStorage: 'fst/test',
	customClass: 'icon icon--cloud',
	enableExt: ['jpg', 'gif', 'png'],
	maxFiles: 0, //if 0 or not set - files are not limited
}