diff --git a/README.md b/README.md index f0a4d44..311dc09 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,8 @@ # NgxFileSelect +This is a local file browse web component that you can integrate into your website. + + This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.1. ## Development server @@ -25,3 +28,19 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac ## Further help To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). + + +## Custom Components + +The file-browse custom component is exported from this library. The goal of this component is to select files from your local filesystem, and return the result to anyone who is listening. Anywhere in your code, you can add the following text to listen: + +```javascript + window.addEventListener('fselect', (event) => { + alert('File selected: ' + JSON.stringify(event.detail)) + }) +``` +And add the following tag to display the listener: + +```html + +``` diff --git a/doc/FileBrowseComponent.png b/doc/FileBrowseComponent.png new file mode 100644 index 0000000..a95b5fd Binary files /dev/null and b/doc/FileBrowseComponent.png differ diff --git a/src/app/file-browse/file-browse.component.ts b/src/app/file-browse/file-browse.component.ts index 87667ca..32c67a5 100644 --- a/src/app/file-browse/file-browse.component.ts +++ b/src/app/file-browse/file-browse.component.ts @@ -1,4 +1,4 @@ -import { Component, Injector, OnInit } from '@angular/core'; +import { Component, EventEmitter, Output, Injector, OnInit } from '@angular/core'; import { createCustomElement } from '@angular/elements'; import { FileServiceService } from '../services/file-service.service'; @@ -46,12 +46,14 @@ export class FileBrowseComponent implements OnInit { // Compute the full path. if (this.selectedFile) { console.log('file selected: ' + this.rootPath + this.getCurrentPath() + '/' + this.selectedFile.name); - let event = new CustomEvent("file-select", { + // Dispatch using window custom event so we can listen from anywhere. + let event = new CustomEvent("fselect", { detail: { path: this.rootPath + this.getCurrentPath() + '/' + this.selectedFile.name } }); window.dispatchEvent(event); + } }