Skip to content

Commit

Permalink
Add more doc.
Browse files Browse the repository at this point in the history
  • Loading branch information
WilliamRClark committed Jun 2, 2021
1 parent d9fc7b6 commit 8445e04
Showing 1 changed file with 30 additions and 16 deletions.
46 changes: 30 additions & 16 deletions component/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,38 @@ This is a local file browse web component that you can integrate into your websi

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.1.

## Usage

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 browse component. The browser will resize to the parent container courtesy of Bootstrap responsive magic:

```html
<file-browse></file-browse>
```

To integrate the file-browse component into your own app, import ngx-file-select.js, and styles.css into your web app. Additionally, you will need to reference the copy of Bootstrap 4.

```html
<link href="styles.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="ngx-file-select.js"></script>
```


## Development server
If you want to run this locally, first run:
```bash
npm install
npm run build
```

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
Once built, you can run `ng serve` for a local dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Expand All @@ -29,18 +58,3 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac

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
<file-browse></file-browse>
```

0 comments on commit 8445e04

Please sign in to comment.