ngx-filezone v1.1.0

NgxFilezone

Module provides file input UI with image and video previews

see live example

API

Directives

Filezone

Selector: [filezone]
Exported as: filezone
File input interface.
Reacts for users clicks within of all the host element bounding rect (if not restricted by FilezoneButton) and drag-n-drop events carrying files (if not restricted by FilezoneDropArea)

To prevent additional change detection launch all output events of the filezone will be emitted when you subscribe on them only but the 'filechange' event.

Inputs

Outputs

Properties

Methods

FilezoneDropArea

Selector: [fzDropArea]
Constrains area of the filezone which reacts for drag-n-drop events. Must be within the filezone element

FilezoneButton

Selector: [fzButton]
Constrains area of the filezone which reacts for click events. Must be within the filezone element

Pipes

FileSizePipe

Name: filesize
Transforms numeric value representing size of file in bytes to readable string (3 MB, 2.56 KB, ect.)

SafePipe

Name: safeurl
Transforms url string to SafeUrl value

Interfaces

IFileProperties

Interface | Data | Type | Description | | ---------- | ---------- | ------------------------------------------------------ | | duration | string | Duration of the file (video or audio type only) | | extention | string | Extention of the file | | name | string | Name of the file | | resolution | string | Resolution of the file (video or image type only) | | size | number | Size of the file in bytes | | type | string | Media type of the file | | url | string | Represents the file preview (video or image type only) |

IFileError

Interface

FileErrorCode

Enumeration

Services

PreviewService

Singletone. Has one method getFileProperties which returns file media data with preview (if availiable and file format supported by modern browsers).

Service has global queue and works with each file you wish to get parameters from sequentially throughout the app

getFileProperties(file: File, width?: number, height?: number) => Promise<IFileProperties> | Parameter | Description | | -------------- | ------------------------------------------------------------------------- | | file: File | File you want to get properties from | | width: number | Width (in pixels) of the preview you want to get. Default 250 | | height: number | Height (in pixels) of the preview you want to get. Default equal to width |

Utilities

convertFileSizeToString(value: number) => string
Transforms value in bytes to readable string

convertFileSizeToBytes(value: string) => number
Converting string representing size of file (4 MB, 5.35 KB, etc) to numeric value

secondsToTimeString(time: number) => string
Transforms numeric value in seconds to HH:MM:SS string or MM:SS if hours is equal to 0

The convertFileSizeToString and convertFileSizeToBytes functions use base 2 (binary) system where 1KB equal to 1024 bytes

Usage

see live example

1. Register the module within module you wish

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxFilezoneModule } from 'ngx-filezone';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    NgxFilezoneModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Create your markup

<div #fz="filezone" filezone 
[accept]="'image/*, .mp4'" [sizeLimit]="'9mb'" [limitOfFiles]="10"
[class.highlighted]="fz.windowHasDraggingEvent">
    <button fzButton>Upload files</button>
    <span>or drop them here</span>
    <section fzDropArea>
        <span>DROP YOUR FILES HERE</span>
    </section>
</div>

3. Style it

.fz-button {
  border: none;
  background: none;
  padding: 0.5em;
  cursor: pointer;
  font-family: "Segoe UI", sans-serif;
  position: relative;
  color: white;
  border: #858585;
  border-width: 1px;
  border-style: solid;
  background: #707070;
}
.fz-button:focus {
  outline: none;
}
.fz-button:hover {
  background: #111111;
}

.filezone {
  font-family: "Segoe UI", sans-serif;
  color: gray;
  position: relative;
  min-height: 10em;
  min-width: 90vw;
  border: #5c5c5c;
  border-radius: 0.5em;
  border-style: dashed;
  border-width: 3px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.filezone.highlighted .fz-drop-area {
  display: flex;
}

.fz-drop-area {
  display: none;
  position: absolute;
  border-radius: 0.3em;
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  background: #426c59;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}