npm package: @ryan-fitchett/file-uploads
Description: <p align="center">   <a href="#badge">     <img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square">   </a> </p>
Latest version: 0.0.2

# Drag and Drop files

<p align="center">
  <a href="#badge">
    <img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square">
  </a>
</p>

# Overview

This package contains a Drag and Drop file directive and File Uploader component for Angular written by Ryan Fitchett.

This package contains 3 main features:

1. Drag and Drop Directive
2. Drag and Drop Component
3. File Upload/Download Service

# Installation

```shell
npm i @ryan-fitchett/file-uploads
```

# Usage

## Getting Started

```typescript
import { FileModule } from '@ryan-fitchett/file-uploads';

@NgModule({
  ...
  imports: [FileModule, ...],
  ...
})
export class YourAppModule {}
```

Styles are imported from
```scss
@import '~@ryan-fitchett/file-uploads/src/file-styles.scss';
```

## Drag and Drop Directive

---

### How to use the directive?

This directive allows you to convert any existing html into a Drag and Drop zone by using the selector 'ngRFFileDragDropZone'.

```html
<div ngRFFileDragDropZone></div>
```

### Inputs and Outputs

Using the directive adds the following inputs & outputs to the element:

| Type   | Name               | Usage                                                                                                |
| ------ | ------------------ | ---------------------------------------------------------------------------------------------------- |
| Input  | extensionWhitelist | Array of file extensions of which to allow. Default value is empty which allows ALL file extensions. |
| Output | filesChanged       | Array of _new_ files dropped into the element.                                                       |

### How to change the styling whilst the element has files dragged over the top?

When the element has files dragged over the top the directive will add the class '_drop-zone-active_', which can be used to apply custom styles.

## Drag and Drop component

---

The Drag and Drop component is designed to provide a more rounded package which encapsulate the directive above. The component can be used via

```html
<ngRF-file-drag-drop></ngRF-file-drag-drop>
```

### Inputs and Outputs

The component defines the following inputs & outputs:
| Type | Name | Usage |
| --- | --- | --- |
| Input | files | An array of _files_ which have been dropped into the component. |
| Output | filesChanged | Reverse binding for the files input. Emits when the files collection is changed.

By default the component comes with some styling which includes

- Label indicating this is a file drop area
- Shows the list of files dropped into the component + upload status

Both of these can be override by passing custom templates using the following directives.

```html
<ngRF-file-drag-drop>
  <!--
    Custom Template to replace the drop zone label 
  -->
  <ng-template ngRFFileDragDropZoneLabelTemplate></ng-template>

  <!--
    Custom Template to replace the view for each file. 
    The specific information about each file is exposed in the template context
    and can be accessed via let-file.
  -->
  <ng-template ngRFFileDragDropZoneCardTemplate let-file></ng-template>
</ngRF-file-drag-drop>
```

## File Upload/Download Service

To assist in uploading & downloading files from the server I've also created a service to make the process as easy as possible.

### Upload
The service handles the the progress events to update the Status and UploadProgress for the given file.
```typescript
public upload<T>(url: string, file: FileSummaryFile): Observable<HttpEvent<T>>;
```