# @nabeelvalley/angularfileinput

> A Simple drag and drop file input for Angular

Latest version **0.2.3** (published 2018-07-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nabeelvalley/angularfileinput
pnpm add @nabeelvalley/angularfileinput
yarn add @nabeelvalley/angularfileinput
bun add @nabeelvalley/angularfileinput
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2018-07-26 |
| First published | 2018-07-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Nabeel Valley |
| Maintainers | nabeelvalley |
| Keywords | file, upload, angular |

## Links

- npm: https://www.npmjs.com/package/@nabeelvalley/angularfileinput
- Repository: https://github.com/nabeelvalley/AngularFileInput
- Homepage: https://github.com/nabeelvalley/AngularFileInput#readme
- Issues: https://github.com/nabeelvalley/AngularFileInput/issues
- npm.io page: https://npm.io/package/@nabeelvalley/angularfileinput

## Alternatives

- [unionfs](https://npm.io/package/unionfs.md) — 2.2M weekly downloads
- [path-starts-with](https://npm.io/package/path-starts-with.md) — 35.9K weekly downloads
- [redzip](https://npm.io/package/redzip.md) — 1.2K weekly downloads
- [vscode-anymatch](https://npm.io/package/vscode-anymatch.md) — 848 weekly downloads
- [@ledgerhq/coin-filecoin](https://npm.io/package/@ledgerhq/coin-filecoin.md) — 793 weekly downloads

## Recent versions

- 0.2.3 (latest) — 2018-07-26
- 0.2.2 — 2018-07-23
- 0.2.1 — 2018-07-19
- 0.2.0 — 2018-07-19
- 0.1.1 — 2018-07-17
- 0.1.0 — 2018-07-17

## README

# AngularFileInput
A simple drag and drop file input for Angular. Currently only supports single file uploads.

The npm package can be found [here](https://www.npmjs.com/package/@nabeelvalley/angularfileinput)

## Usage
### AppModule
Include the following in your project's NgModule declarations:

```typescript
...
@NgModule({
  declarations: [
    ...
	FileInput
  ],
  ...
```

## File Input Component
### Input
The Component has two main inputs, one for the accepted file types and the other for the display text, which are by default set to "*", and "Click or Drag to Upload a File" respectively.

```typescript
  @Input('accepts') accepts : string = "*";
  @Input('displayText') displayText : string = "Click or Drag to Upload a File";
```

Alternatively the styling on the component can be passed in by means of an HTML inline style set as the following input: 

```
  @Input("styles")
  styles: string =
    "height : 100px; width : 100%; padding : 20px;";
```

### Outputs
The Component has two output events, the File Metadata as a `File` and the File Data as a `Uint8Array`, these must be handled by the parent component.

```typescript
  @Output() fileMetaSet = new EventEmitter<File>();
  @Output() fileDataSet = new EventEmitter<Uint8Array>();
```

## Parent Component
### HTML
The Component should be included in the HTML for the parent component with an accepted file type and event handlers for the `fileDataSetSet` and `fileMetaSetSet` events.

```html
<file-input [accepts]="'image/*'" (fileDataSet)="setfileDataSet($event)" (fileMetaSet)="setfileMetaSet($event)"></file-input>
```

```typescript
  setfileMetaSet(event: File){
    this.fileMeta = event;
  }

  setfileDataSet(event: Uint8Array){
    this.fileData = event;
  }
```

---
_Source: https://npm.io/package/@nabeelvalley/angularfileinput · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._