@ryan-fitchett/file-uploads v0.0.2

Drag and Drop files

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

npm i @ryan-fitchett/file-uploads

Usage

Getting Started

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

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

Styles are imported from

@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'.

<div ngRFFileDragDropZone></div>

Inputs and Outputs

Using the directive adds the following inputs & outputs to 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

<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.

<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.

public upload<T>(url: string, file: FileSummaryFile): Observable<HttpEvent<T>>;