Skip to content

Commit

Permalink
feat(dockerfile): add Dockerfile and update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@jkuri
jkuri committed Jan 1, 2019
1 parent 1a3a063 commit c87a2f2
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 266 deletions.
4 changes: 4 additions & 0 deletions .dockerignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
node_modules/
.abstruse.yml
e2e/
dist/
11 changes: 11 additions & 0 deletions Dockerfile
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
FROM node:11-alpine

COPY . /app

WORKDIR /app

RUN npm install && npm run build:prod

ENTRYPOINT [ "node", "/app/dist/api/index.js" ]

EXPOSE 4900
287 changes: 21 additions & 266 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,294 +2,49 @@

[![AbstruseCI](https://ci.bleenco.io/badge/11)](https://ci.bleenco.io/repo/11)

Angular 6 File Uploader
<img src="https://user-images.githubusercontent.com/1796022/50571605-f35deb80-0dae-11e9-94b5-dd23fa5cd4b9.png" width="300">

http://ngx-uploader.com
Angular 2+ File Uploader

#### <a name="question"></a> Got a Question or Problem?

Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [Stack Overflow](https://stackoverflow.com) where the questions should be tagged with tag `ngx-uploader`.

To save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Overflow.
https://ngx-uploader.com

## Installation

1. Add `ngx-uploader` module as dependency to your project.
Add `ngx-uploader` module as dependency to your project.

```console
npm install ngx-uploader --save
```

2. Include `NgxUploaderModule` into your main AppModule or in module where you will use it.

```ts
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxUploaderModule } from 'ngx-uploader';

@NgModule({
imports: [
BrowserModule,
NgxUploaderModule
],
declarations: [ AppComponent ]
})
export class AppModule {}
```

**or** include `NgxUploaderModule` into your SharedModule. This could be usefull if your project has nested Modules.

```ts
// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxUploaderModule } from 'ngx-uploader';
...

@NgModule({
imports: [
CommonModule,
NgxUploaderModule,
...
],
exports: [
CommonModule,
NgxUploaderModule,
...
],
...
})
export class SharedModule {
}
```

```ts
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from './shared.module';
or using `yarn`:

@NgModule({
imports: [
BrowserModule,
SharedModule
],
declarations: [ AppComponent ]
})
export class AppModule {}

````


## Data Structures of Events and Uploaded Files

```ts
export interface UploaderOptions {
concurrency: number; // number of files uploaded at the same time
allowedContentTypes?: string[]; // content types allowed (default *)
maxUploads?: number; // max number of files the user can upload
}
export interface UploadProgress {
status: UploadStatus; // current status of upload for specific file (Queue | Uploading | Done | Canceled)
data?: {
percentage: number; // percentage of upload already completed
speed: number; // current upload speed per second in bytes
speedHuman: string; // current upload speed per second in human readable form,
eta: number; // estimated time remaining in seconds
etaHuman: string; // estimated time remaining in human readable format
};
}
export interface UploadFile {
id: string; // unique id of uploaded file instance
fileIndex: number; // fileIndex in internal ngx-uploader array of files
lastModifiedDate: Date; // last modify date of the file (Date object)
name: string; // original name of the file
size: number; // size of the file in bytes
type: string; // mime type of the file
form: FormData; // FormData object (you can append extra data per file, to this object)
progress: UploadProgress;
response?: any; // response when upload is done (parsed JSON or string)
responseStatus?: number; // response status code when upload is done
responseHeaders?: { [key: string]: string }; // response headers when upload is done
}
// output events emitted by ngx-uploader
export interface UploadOutput {
type: 'addedToQueue' | 'allAddedToQueue' | 'uploading' | 'done' | 'removed' | 'start' | 'cancelled' | 'dragOver' | 'dragOut' | 'drop';
file?: UploadFile;
nativeFile?: File; // native javascript File object, can be used to process uploaded files in other libraries
}
// input events that user can emit to ngx-uploader
export interface UploadInput {
type: 'uploadAll' | 'uploadFile' | 'cancel' | 'cancelAll' | 'remove' | 'removeAll';
url?: string; // URL to upload file to
method?: string; // method (POST | PUT)
id?: string; // unique id of uploaded file
fieldName?: string; // field name (default 'file')
fileIndex?: number; // fileIndex in internal ngx-uploader array of files
file?: UploadFile; // uploading file
data?: { [key: string]: string | Blob }; // custom data sent with the file
headers?: { [key: string]: string }; // custom headers
includeWebKitFormBoundary?: boolean; // If false, only the file is send trough xhr.send (WebKitFormBoundary is omit)
concurrency?: number; // concurrency of how many files can be uploaded in parallel (default is 0 which means unlimited)
withCredentials?: boolean; // apply withCredentials option
}
```console
yarn add ngx-uploader
```

## Upload Restrictions

With version 4.2.1 we've introduced restrictions for Content-Types.
To not break the behaviour of previous releases, there are no restrictions by default at all.
- [app.module.ts](https://github.com/bleenco/ngx-uploader/blob/master/src/app/app.module.ts) is a sample how to to include `ngx-uploader` into your project.
- [app.component.ts](https://raw.githubusercontent.com/bleenco/ngx-uploader/master/src/app/app.component.ts) defines example how to handle events in component or service.
- [app.component.html](https://raw.githubusercontent.com/bleenco/ngx-uploader/master/src/app/app.component.html) represents HTML template with usage examples of `ngFileDrop` and `ngFileSelect` directives.

Look at [app-home.component.ts](https://github.com/bleenco/ngx-uploader/blob/master/src/components/app-home/app-home.component.ts) for an example of Content-Type restriction.
## Running demo on local machine

If you want to toast a message for the rejected file, add this to your onUploadOutput method.
### Building demo source code

```ts
onUploadOutput(output: UploadOutput): void {
....
} else if (output.type === 'rejected' && typeof output.file !== 'undefined') {
// console.log(output.file.name + ' rejected');
}
...
```

## Token Authorization
If you have to upload files with Token Authorization, you can set the header in startUpload as follows.

```ts
startUpload(): void {
let token = this.myToken; // <---- get token
const event: UploadInput = {
type: 'uploadAll',
url: 'http://ngx-uploader.com/upload',
method: 'POST',
headers: { 'Authorization': 'JWT ' + token }, // <---- set headers
data: { foo: 'bar' },
includeWebKitFormBoundary: true // <---- set WebKitFormBoundary
};
this.uploadInput.emit(event);
}
```console
npm run build:prod
node dist/api/index.js
```

## Example

**You can always run working example by cloning this repository, building project with `yarn build:prod` and running server with `node ./dist-app/api/index.js`.**

### Component Code

```ts
import { Component, EventEmitter } from '@angular/core';
import { UploadOutput, UploadInput, UploadFile, humanizeBytes, UploaderOptions } from 'ngx-uploader';
@Component({
selector: 'app-home',
templateUrl: 'app-home.component.html'
})
export class AppHomeComponent {
options: UploaderOptions;
formData: FormData;
files: UploadFile[];
uploadInput: EventEmitter<UploadInput>;
humanizeBytes: Function;
dragOver: boolean;
constructor() {
this.options = { concurrency: 1, maxUploads: 3 };
this.files = []; // local uploading files array
this.uploadInput = new EventEmitter<UploadInput>(); // input events, we use this to emit data to ngx-uploader
this.humanizeBytes = humanizeBytes;
}
Then open your browser at `http://localhost:4900`.

onUploadOutput(output: UploadOutput): void {
switch (output.type) {
case 'allAddedToQueue':
// uncomment this if you want to auto upload files when added
// const event: UploadInput = {
// type: 'uploadAll',
// url: '/upload',
// method: 'POST',
// data: { foo: 'bar' }
// };
// this.uploadInput.emit(event);
break;
case 'addedToQueue':
if (typeof output.file !== 'undefined') {
this.files.push(output.file);
}
break;
case 'uploading':
if (typeof output.file !== 'undefined') {
// update current data in files array for uploading file
const index = this.files.findIndex((file) => typeof output.file !== 'undefined' && file.id === output.file.id);
this.files[index] = output.file;
}
break;
case 'removed':
// remove file from array when removed
this.files = this.files.filter((file: UploadFile) => file !== output.file);
break;
case 'dragOver':
this.dragOver = true;
break;
case 'dragOut':
case 'drop':
this.dragOver = false;
break;
case 'done':
// The file is downloaded
break;
}
}
### Running demo using Docker

startUpload(): void {
const event: UploadInput = {
type: 'uploadAll',
url: 'http://ngx-uploader.com/upload',
method: 'POST',
data: { foo: 'bar' }
};
this.uploadInput.emit(event);
}
cancelUpload(id: string): void {
this.uploadInput.emit({ type: 'cancel', id: id });
}
removeFile(id: string): void {
this.uploadInput.emit({ type: 'remove', id: id });
}
removeAllFiles(): void {
this.uploadInput.emit({ type: 'removeAll' });
}
}
```console
docker build -t ngx-uploader .
docker run -it --rm -p 4900:4900 ngx-uploader
```

### Template Code

For whole template code please check [here](https://github.com/bleenco/ngx-uploader/blob/master/src/components/app-home/app-home.component.html).

```html
<div class="drop-container" ngFileDrop [options]="options" (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" [ngClass]="{ 'is-drop-over': dragOver }">
<h1>Drag &amp; Drop</h1>
</div>
<label class="upload-button">
<input type="file" ngFileSelect [options]="options" (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple>
or choose file(s)
</label>
<button type="button" class="start-upload-btn" (click)="startUpload()">
Start Upload
</button>
```
Again, you are ready to open your browser at `http://localhost:4900`.

### LICENCE

Expand Down

0 comments on commit c87a2f2

Please sign in to comment.