Merge pull request #135 from aberezkin/development

1.0.0-rc1

README.md

@@ -1,6 +1,6 @@
 # Image Upload Module
 [![Build Status](https://travis-ci.org/aberezkin/ng2-image-upload.svg?branch=master)](https://travis-ci.org/aberezkin/ng2-image-upload)
 
-This angular 2 library provides a light-weight component that handles file-drop, image previewing and image uploading.
+This angular library provides a light-weight component that handles file-drop, image previewing and image uploading.
 
 ### [Demo & Readme](https://aberezkin.github.io/ng2-image-upload/)

demo/src/app/app.component.html

@@ -10,10 +10,10 @@
 
 <div class="jumbotron jumbotron-fluid text-center">
   <h1 class="display-3">
-    Angular 2 Image Upload
+    Angular Image Upload
   </h1>
   <p class="lead">
-    Angular 2 component for image uploading
+    Angular component for image uploading
   </p>
 </div>
 

demo/src/app/demo/components/basic/basic.component.html

@@ -1,4 +1,4 @@
-<h4 class="mb-3">Basic Usage</h4>
+<h4 class="mb-3 mt-3">Basic Usage</h4>
 
 <image-upload url="https://httpbin.org/status/200"></image-upload>
 
@@ -10,8 +10,8 @@ <h5 class="mb-3 mt-3">With headers</h5>
 
 <pre><code class="language-markup"><![CDATA[<image-upload url="https://httpbin.org/status/200" [headers]="myHeaders"></image-upload>]]></code></pre>
 
-<pre><code class="language-typescript"><![CDATA[myHeaders: Header[] = [
-    { header: 'ThisLibrary', value: 'COOL' },
-    { header: 'FriesWithThat', value: 'YES' }
-];]]>
+<pre><code class="language-typescript"><![CDATA[myHeaders: { [name: string]: any } = {
+  'Authorization': 'MyToken',
+  'Another Header': 'AnotherValue'
+};]]>
 </code></pre>

demo/src/app/demo/components/basic/basic.component.ts

@@ -1,13 +1,12 @@
 import { Component } from '@angular/core';
-import { Header } from '../../../../lib/image.service';
 
 @Component({
   selector: 'basic',
   templateUrl: './basic.component.html'
 })
 export class BasicExampleComponent {
-  myHeaders: Header[] = [
-    { header: 'ThisLibrary', value: 'COOL' },
-    { header: 'FriesWithThat', value: 'YES' }
-  ];
+  myHeaders: { [name: string]: any } = {
+    'Authorization': 'MyToken',
+    'Another Header': 'AnotherValue'
+  };
 }

demo/src/app/demo/components/customise/customise.component.html

@@ -1,9 +1,10 @@
-<h4 class="mb-3">Custom Labels</h4>
+<h4 class="mb-3 mt-5">Custom Labels</h4>
 
-<image-upload url="https://httpbin.org/status/200" buttonCaption="PRESS ME AAAAAAAAAH" dropBoxMessage="DROP ON ME AAAAAAAAAH"></image-upload>
+<image-upload url="https://httpbin.org/status/200" buttonCaption="PRESS ME AAAAAAAAAH" dropBoxMessage="DROP ON ME AAAAAAAAAH" clearButtonCaption="CLEAR ME AAAAAAAAAH"></image-upload>
 
 <pre><code class="language-markup"><![CDATA[<image-upload
   url="https://httpbin.org/status/200"
   buttonCaption="PRESS ME AAAAAAAAAH"
-  dropBoxMessage="DROP ON ME AAAAAAAAAH">
+  dropBoxMessage="DROP ON ME AAAAAAAAAH"
+  clearButtonCaption="CLEAR ME AAAAAAAAAH">
 </image-upload>]]></code></pre>

demo/src/app/demo/components/demo.component.html

@@ -1,10 +1,8 @@
-<div class="container" highlight-js-content=".highlight">
+<div class="container mb-5" highlight-js-content=".highlight">
   <basic></basic>
-  <div class="mt-3"></div>
   <filter></filter>
-  <div class="mt-3"></div>
   <customise></customise>
-  <div class="mt-3"></div>
   <events></events>
-  <div class="mt-5"></div>
+  <styles></styles>
+  <uploaded></uploaded>
 </div>

demo/src/app/demo/components/events/events.component.html

@@ -1,27 +1,27 @@
-<h4 class="mb-3">Events</h4>
+<h4 class="mb-3 mt-5">Events</h4>
 
 <image-upload url="https://httpbin.org/status/200"
-              (onFileUploadFinish)="imageFinishedUploading($event)"
-              (onRemove)="imageRemoved($event)"
-              (isPending)="uploadStateChange($event)">
+              (removed)="onRemoved($event)"
+              (uploadFinished)="onUploadFinished($event)"
+              (uploadStateChanged)="onUploadStateChanged($event)">
 </image-upload>
 
 <pre><code class="language-markup"><![CDATA[<image-upload
   url="https://httpbin.org/status/200"
-  (onFileUploadFinish)="imageFinishedUploading($event)"
-  (onRemove)="imageRemoved($event)"
-  (isPending)="uploadStateChange($event)">
+  (removed)="onRemoved($event)"
+  (uploadFinished)="onUploadFinished($event)"
+  (uploadStateChanged)="onUploadStateChanged($event)">
 </image-upload>]]></code></pre>
 
 <pre><code class="language-typescript"><![CDATA[imageFinishedUploading(file: FileHolder) {
   console.log(JSON.stringify(file.serverResponse));
 }
 
-imageRemoved(file: FileHolder) {
+onRemoved(file: FileHolder) {
   // do some stuff with the removed file.
 }
 
-uploadStateChange(state: boolean) {
+onUploadStateChanged(state: boolean) {
   console.log(JSON.stringify(state));
 }]]>
 </code></pre>

demo/src/app/demo/components/events/events.component.ts

@@ -6,15 +6,15 @@ import { FileHolder } from '../../../../lib/image-upload/image-upload.component'
   templateUrl: './events.component.html'
 })
 export class EventsComponent {
-  imageFinishedUploading(file: FileHolder) {
+  onUploadFinished(file: FileHolder) {
     console.log(JSON.stringify(file.serverResponse));
   }
 
-  imageRemoved(file: FileHolder) {
+  onRemoved(file: FileHolder) {
     // do some stuff with the removed file.
   }
 
-  uploadStateChange(state: boolean) {
+  onUploadStateChanged(state: boolean) {
     console.log(JSON.stringify(state));
   }
 }

demo/src/app/demo/components/filter/filter.component.html

@@ -1,5 +1,25 @@
-<h4 class="mb-3">Limit and filter images</h4>
+<h4 class="mb-3 mt-5">Limit and filter images</h4>
 
 <image-upload url="https://httpbin.org/status/200" [max]="2" [extensions]="['jpeg','png']"></image-upload>
 
 <pre><code class="language-markup"><![CDATA[<image-upload url="https://httpbin.org/status/200" [max]="2" [extensions]="['jpeg','png']"></image-upload>]]></code></pre>
+
+<h5 class="mb-3 mt-3">Manual filtering and editing</h5>
+
+<image-upload url="https://httpbin.org/status/200" [beforeUpload]="onBeforeUpload"></image-upload>
+
+<pre><code class="language-markup"><![CDATA[<image-upload url="https://httpbin.org/status/200" [beforeUpload]="onBeforeUpload"></image-upload>]]></code></pre>
+
+<pre><code class="language-typescript"><![CDATA[private fileCounter = 0;
+
+onBeforeUpload = (metadata: UploadMetadata) => {
+  if (this.fileCounter % 2 === 0) {
+    metadata.abort = true;
+  } else {
+    // mutate the file or replace it entirely - metadata.file
+    metadata.url = 'http://somewhereelse.com'
+  }
+
+  this.fileCounter++;
+  return metadata;
+};]]></code></pre>

demo/src/app/demo/components/filter/filter.component.ts

@@ -1,9 +1,22 @@
 import { Component } from '@angular/core';
+import { UploadMetadata } from '../../../../lib/image-upload/before-upload.interface';
 
 @Component({
   selector: 'filter',
   templateUrl: './filter.component.html'
 })
 export class FilterExampleComponent {
+  private fileCounter = 0;
 
+  onBeforeUpload = (metadata: UploadMetadata) => {
+    if (this.fileCounter % 2 === 0) {
+      metadata.abort = true;
+    } else {
+      // mutate the file or replace it entirely - metadata.file
+      metadata.url = 'http://somewhereelse.com';
+    }
+
+    this.fileCounter++;
+    return metadata;
+  };
 }

demo/src/app/demo/components/style/style.component.html

@@ -0,0 +1,65 @@
+<h4 class="mb-3 mt-5">Styles</h4>
+
+<h5 class="mb-3 mt-3">Custom CSS Class</h5>
+
+<image-upload url="https://httpbin.org/status/200" class="customClass"></image-upload>
+
+<pre><code class="language-markup"><![CDATA[<image-upload url="https://httpbin.org/status/200" class="customClass"></image-upload>]]></code></pre>
+
+<pre><code class="language-css"><![CDATA[.customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+}
+
+.customClass .img-ul-upload {
+    background-color: #000 !important;
+}
+
+.customClass .img-ul-clear {
+    background-color: #B819BB !important;
+}
+
+.customClass .img-ul-drag-box-msg {
+    color: purple !important;
+}
+
+.customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+}
+]]></code></pre>
+
+<h5 class="mb-3 mt-3">Custom Style</h5>
+
+<image-upload url="https://httpbin.org/status/200" [style]="customStyle"></image-upload>
+
+<pre><code class="language-markup"><![CDATA[<image-upload url="https://httpbin.org/status/200" [style]="customStyle"></image-upload>]]></code></pre>
+
+<pre><code class="language-typescript"><![CDATA[customStyle = {
+    selectButton: {
+      "background-color": "yellow",
+      "border-radius": "25px",
+      "color": "#000"
+    },
+    clearButton: {
+      "background-color": "#FFF",
+      "border-radius": "25px",
+      "color": "#000",
+      "margin-left": "10px"
+    },
+    layout: {
+      "background-color": "purple",
+      "border-radius": "25px",
+      "color": "#FFF",
+      "font-size": "15px",
+      "margin": "10px",
+      "padding-top": "5px",
+      "width": "500px"
+    },
+    previewPanel: {
+      "background-color": "#894489",
+      "border-radius": "0 0 25px 25px",
+    }
+  }
+]]></code></pre>

demo/src/app/demo/components/style/style.component.ts

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'styles',
+  templateUrl: './style.component.html'
+})
+export class StyleComponent {
+  customStyle = {
+    selectButton: {
+      'background-color': 'yellow',
+      'border-radius': '25px',
+      'color': '#000'
+    },
+    clearButton: {
+      'background-color': '#FFF',
+      'border-radius': '25px',
+      'color': '#000',
+      'margin-left': '10px'
+    },
+    layout: {
+      'background-color': 'purple',
+      'border-radius': '25px',
+      'border': 'none',
+      'color': '#FFF',
+      'font-size': '15px',
+      'margin': '10px',
+      'padding-top': '5px',
+      'width': '500px'
+    },
+    previewPanel: {
+      'background-color': '#894489',
+      'border-radius': '0 0 25px 25px'
+    }
+  };
+}

demo/src/app/demo/components/uploaded/uploaded.component.html

@@ -0,0 +1,9 @@
+<h4 class="mb-3 mt-3">Uploaded Usage</h4>
+
+<image-upload
+    url="https://httpbin.org/status/200"
+    [uploadedFiles]="images"
+    (removed)="onRemoved($event)"
+></image-upload>
+
+<pre><code class="language-markup"><![CDATA[<image-upload url="https://httpbin.org/status/200" [uploadedFiles]="images"></image-upload>]]></code></pre>

demo/src/app/demo/components/uploaded/uploaded.component.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'uploaded',
+  templateUrl: './uploaded.component.html'
+})
+export class UploadedExampleComponent {
+  myHeaders: { [name: string]: any } = {
+    'Authorization': 'MyToken',
+    'Another Header': 'AnotherValue'
+  };
+
+  images = [];
+
+  onRemoved(event){
+    console.log(event);
+  }
+
+  ngOnInit(){
+    setTimeout(()=>{
+      this.images = [
+        'https://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2016/10/11/14/beats-logo-1200-80.jpg',
+        'https://s-media-cache-ak0.pinimg.com/originals/68/fb/c7/68fbc7bc9eb8c530c6e804c4109ec647.jpg',
+        {fileName: 'google-image.jpg', url: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'}
+      ];
+    }, 1000);
+  }
+}

demo/src/app/demo/demo.module.ts

@@ -6,14 +6,18 @@ import { CustomiseComponent } from './components/customise/customise.component';
 import { DemoComponent } from './components/demo.component';
 import { EventsComponent } from './components/events/events.component';
 import { FilterExampleComponent } from './components/filter/filter.component';
+import { StyleComponent } from './components/style/style.component';
+import {UploadedExampleComponent} from "./components/uploaded/uploaded.component";
 
 @NgModule({
   declarations: [
     DemoComponent,
     BasicExampleComponent,
     FilterExampleComponent,
     CustomiseComponent,
-    EventsComponent
+    EventsComponent,
+    StyleComponent,
+    UploadedExampleComponent
   ],
   imports: [
     ImageUploadModule