angular2-image-upload - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

lib/image-upload/image-upload.component.d.ts

@@ -20,2 +20,4 @@ import { EventEmitter, OnInit } from '@angular/core';
     maxFileSize: number;
+    withCredentials: boolean;
+    partName: string;
     isPending: EventEmitter<boolean>;
@@ -22,0 +24,0 @@ onFileUploadFinish: EventEmitter<FileHolder>;

lib/image-upload/image-upload.component.js

@@ -18,2 +18,3 @@ "use strict";
         this.preview = true;
+        this.withCredentials = false;
         this.isPending = new core_1.EventEmitter();
@@ -91,3 +92,3 @@ this.onFileUploadFinish = new core_1.EventEmitter();
             this.imageService
-                .postImage(this.url, fileHolder.file, this.headers)
+                .postImage(this.url, fileHolder.file, this.headers, this.partName, this.withCredentials)
                 .subscribe(function (response) { return _this.onResponse(response, fileHolder); }, function (error) {
@@ -123,2 +124,4 @@ _this.onResponse(error, fileHolder);
     'maxFileSize': [{ type: core_1.Input },],
+    'withCredentials': [{ type: core_1.Input },],
+    'partName': [{ type: core_1.Input },],
     'isPending': [{ type: core_1.Output },],
@@ -125,0 +128,0 @@ 'onFileUploadFinish': [{ type: core_1.Output },],

lib/image-upload/image-upload.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"FileHolder":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"error","message":"Could not resolve type","line":7,"character":47,"context":{"typeName":"File"}}]}]}},"ImageUploadComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"image-upload","template":"\n    <div class=\"image-upload\"\n         fileDrop\n         [accept]=\"['image/*']\"\n         (isFileOver)=\"fileOver($event)\"\n         (fileDrop)=\"fileChange($event)\"\n         [ngClass]=\"{'file-is-over': isFileOver}\"\n    >\n      <div class=\"file-upload hr-inline-group\">\n        <label class=\"upload-button\">\n          <span [innerText]=\"buttonCaption\"></span>\n          <input\n            type=\"file\"\n            accept=\"image/*\"\n            multiple (change)=\"fileChange(input.files)\"\n            #input>\n        </label>\n\n        <div class=\"drag-box-message\" [innerText]=\"dropBoxMessage\"></div>\n      </div>\n\n      <p class=\"file-too-large\" *ngIf=\"showFileTooLargeMessage\" [innerText]=\"fileTooLargeMessage\">\n      </p>\n\n      <div *ngIf=\"preview\" class=\"image-container hr-inline-group\">\n        <div\n          class=\"image\"\n          *ngFor=\"let file of files\"\n          [ngStyle]=\"{'background-image': 'url('+ file.src +')'}\"\n        >\n          <div *ngIf=\"file.pending\" class=\"loading-overlay\">\n            <div class=\"spinningCircle\"></div>\n          </div>\n          <div *ngIf=\"!file.pending\" class=\"x-mark\" (click)=\"deleteFile(file)\">\n            <span class=\"close\"></span>\n          </div>\n        </div>\n      </div>\n    </div>","styles":["\n    .image-upload {\n      --common-radius: 3px;\n      --active-color: #33CC99;\n      position: relative;\n      border-radius: var(--common-radius);\n      border: #d0d0d0 dashed 1px;\n      font-family: sans-serif;\n    }\n\n    .file-is-over {\n      border-color: var(--active-color);\n      border-style: solid;\n    }\n\n    .hr-inline-group:after {\n      display: table;\n      clear: both;\n      content: \"\";\n    }\n\n    .file-upload {\n      padding: 16px;\n      background-color: #f8f8f8;\n    }\n\n    .drag-box-message {\n      float: left;\n      display: inline-block;\n      margin-left: 12px;\n      padding-top: 14px;\n      color: #9b9b9b;\n      font-weight: 600;\n    }\n\n    label.upload-button input[type=file] {\n      display: none;\n      position: fixed;\n      top: -99999px;\n    }\n\n    .upload-button {\n      cursor: pointer;\n      background-color: var(--active-color);\n      padding: 10px;\n      color: white;\n      font-size: 1.25em;\n      font-weight: 500;\n      text-transform: uppercase;\n      display: inline-block;\n      float: left;\n\n      -webkit-box-shadow: 2px 2px 4px 0px rgba(148, 148, 148, 0.6);\n      -moz-box-shadow: 2px 2px 4px 0px rgba(148, 148, 148, 0.6);\n      box-shadow: 2px 2px 4px 0px rgba(148, 148, 148, 0.6);\n    }\n\n    .upload-button:active span {\n      position: relative;\n      display: block;\n      top: 1px;\n    }\n\n    .image-container {\n      background-color: #fdfdfd;\n      padding: 0 10px 0 10px;\n    }\n\n    .image {\n      float: left;\n      display: inline-block;\n      margin: 6px;\n      width: 86px;\n      height: 86px;\n      background: center center no-repeat;\n      background-size: contain;\n      position: relative;\n    }\n\n    .x-mark {\n      width: 20px;\n      height: 20px;\n      text-align: center;\n      cursor: pointer;\n      border-radius: 2px;\n      float: right;\n      background-color: black;\n      opacity: .7;\n      color: white;\n      margin: 2px;\n    }\n\n    .close {\n      width: 20px;\n      height: 20px;\n      opacity: .7;\n      position: relative;\n      padding-right: 3px;\n    }\n\n    .x-mark:hover .close {\n      opacity: 1;\n    }\n\n    .close:before, .close:after {\n      border-radius: 2px;\n      position: absolute;\n      content: '';\n      height: 16px;\n      width: 2px;\n      top: 2px;\n      background-color: #FFFFFF;\n    }\n\n    .close:before {\n      transform: rotate(45deg);\n    }\n\n    .close:after {\n      transform: rotate(-45deg);\n    }\n\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      background-color: black;\n      opacity: .7;\n    }\n\n    .spinningCircle {\n      height: 30px;\n      width: 30px;\n      margin: auto;\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      border-radius: 50%;\n      border: 3px solid rgba(255, 255, 255, 0);\n      border-top: 3px solid white;\n      border-right: 3px solid white;\n      -webkit-animation: spinner 2s infinite cubic-bezier(0.085, 0.625, 0.855, 0.360);\n      animation: spinner 2s infinite cubic-bezier(0.085, 0.625, 0.855, 0.360);\n    }\n\n    .file-too-large {\n      color: red;\n      padding: 0 15px;\n    }\n\n    @-webkit-keyframes spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg);\n      }\n      100% {\n        -webkit-transform: rotate(360deg);\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg);\n      }\n      100% {\n        -webkit-transform: rotate(360deg);\n        transform: rotate(360deg);\n\n      }\n    }"]}]}],"members":{"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"url":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"headers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"preview":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxFileSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isPending":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onFileUploadFinish":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onRemove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"buttonCaption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dropBoxMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fileTooLargeMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../image.service","name":"ImageService"}]}],"ngOnInit":[{"__symbolic":"method"}],"fileChange":[{"__symbolic":"method"}],"deleteFile":[{"__symbolic":"method"}],"fileOver":[{"__symbolic":"method"}],"uploadFiles":[{"__symbolic":"method"}],"onResponse":[{"__symbolic":"method"}],"uploadSingleFile":[{"__symbolic":"method"}],"countRemainingSlots":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"FileHolder":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"error","message":"Could not resolve type","line":7,"character":47,"context":{"typeName":"File"}}]}]}},"ImageUploadComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"image-upload","template":"\n    <div class=\"image-upload\"\n         fileDrop\n         [accept]=\"['image/*']\"\n         (isFileOver)=\"fileOver($event)\"\n         (fileDrop)=\"fileChange($event)\"\n         [ngClass]=\"{'file-is-over': isFileOver}\"\n    >\n      <div class=\"file-upload hr-inline-group\">\n        <label class=\"upload-button\">\n          <span [innerText]=\"buttonCaption\"></span>\n          <input\n            type=\"file\"\n            accept=\"image/*\"\n            multiple (change)=\"fileChange(input.files)\"\n            #input>\n        </label>\n\n        <div class=\"drag-box-message\" [innerText]=\"dropBoxMessage\"></div>\n      </div>\n\n      <p class=\"file-too-large\" *ngIf=\"showFileTooLargeMessage\" [innerText]=\"fileTooLargeMessage\">\n      </p>\n\n      <div *ngIf=\"preview\" class=\"image-container hr-inline-group\">\n        <div\n          class=\"image\"\n          *ngFor=\"let file of files\"\n          [ngStyle]=\"{'background-image': 'url('+ file.src +')'}\"\n        >\n          <div *ngIf=\"file.pending\" class=\"loading-overlay\">\n            <div class=\"spinningCircle\"></div>\n          </div>\n          <div *ngIf=\"!file.pending\" class=\"x-mark\" (click)=\"deleteFile(file)\">\n            <span class=\"close\"></span>\n          </div>\n        </div>\n      </div>\n    </div>","styles":["\n    .image-upload {\n      --common-radius: 3px;\n      --active-color: #33CC99;\n      position: relative;\n      border-radius: var(--common-radius);\n      border: #d0d0d0 dashed 1px;\n      font-family: sans-serif;\n    }\n\n    .file-is-over {\n      border-color: var(--active-color);\n      border-style: solid;\n    }\n\n    .hr-inline-group:after {\n      display: table;\n      clear: both;\n      content: \"\";\n    }\n\n    .file-upload {\n      padding: 16px;\n      background-color: #f8f8f8;\n    }\n\n    .drag-box-message {\n      float: left;\n      display: inline-block;\n      margin-left: 12px;\n      padding-top: 14px;\n      color: #9b9b9b;\n      font-weight: 600;\n    }\n\n    label.upload-button input[type=file] {\n      display: none;\n      position: fixed;\n      top: -99999px;\n    }\n\n    .upload-button {\n      cursor: pointer;\n      background-color: var(--active-color);\n      padding: 10px;\n      color: white;\n      font-size: 1.25em;\n      font-weight: 500;\n      text-transform: uppercase;\n      display: inline-block;\n      float: left;\n\n      -webkit-box-shadow: 2px 2px 4px 0px rgba(148, 148, 148, 0.6);\n      -moz-box-shadow: 2px 2px 4px 0px rgba(148, 148, 148, 0.6);\n      box-shadow: 2px 2px 4px 0px rgba(148, 148, 148, 0.6);\n    }\n\n    .upload-button:active span {\n      position: relative;\n      display: block;\n      top: 1px;\n    }\n\n    .image-container {\n      background-color: #fdfdfd;\n      padding: 0 10px 0 10px;\n    }\n\n    .image {\n      float: left;\n      display: inline-block;\n      margin: 6px;\n      width: 86px;\n      height: 86px;\n      background: center center no-repeat;\n      background-size: contain;\n      position: relative;\n    }\n\n    .x-mark {\n      width: 20px;\n      height: 20px;\n      text-align: center;\n      cursor: pointer;\n      border-radius: 2px;\n      float: right;\n      background-color: black;\n      opacity: .7;\n      color: white;\n      margin: 2px;\n    }\n\n    .close {\n      width: 20px;\n      height: 20px;\n      opacity: .7;\n      position: relative;\n      padding-right: 3px;\n    }\n\n    .x-mark:hover .close {\n      opacity: 1;\n    }\n\n    .close:before, .close:after {\n      border-radius: 2px;\n      position: absolute;\n      content: '';\n      height: 16px;\n      width: 2px;\n      top: 2px;\n      background-color: #FFFFFF;\n    }\n\n    .close:before {\n      transform: rotate(45deg);\n    }\n\n    .close:after {\n      transform: rotate(-45deg);\n    }\n\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      background-color: black;\n      opacity: .7;\n    }\n\n    .spinningCircle {\n      height: 30px;\n      width: 30px;\n      margin: auto;\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      border-radius: 50%;\n      border: 3px solid rgba(255, 255, 255, 0);\n      border-top: 3px solid white;\n      border-right: 3px solid white;\n      -webkit-animation: spinner 2s infinite cubic-bezier(0.085, 0.625, 0.855, 0.360);\n      animation: spinner 2s infinite cubic-bezier(0.085, 0.625, 0.855, 0.360);\n    }\n\n    .file-too-large {\n      color: red;\n      padding: 0 15px;\n    }\n\n    @-webkit-keyframes spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg);\n      }\n      100% {\n        -webkit-transform: rotate(360deg);\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg);\n      }\n      100% {\n        -webkit-transform: rotate(360deg);\n        transform: rotate(360deg);\n\n      }\n    }"]}]}],"members":{"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"url":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"headers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"preview":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxFileSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isPending":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onFileUploadFinish":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onRemove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"buttonCaption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dropBoxMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fileTooLargeMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../image.service","name":"ImageService"}]}],"ngOnInit":[{"__symbolic":"method"}],"fileChange":[{"__symbolic":"method"}],"deleteFile":[{"__symbolic":"method"}],"fileOver":[{"__symbolic":"method"}],"uploadFiles":[{"__symbolic":"method"}],"onResponse":[{"__symbolic":"method"}],"uploadSingleFile":[{"__symbolic":"method"}],"countRemainingSlots":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"FileHolder":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"error","message":"Could not resolve type","line":7,"character":47,"context":{"typeName":"File"}}]}]}},"ImageUploadComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"image-upload","template":"\n    <div class=\"image-upload\"\n         fileDrop\n         [accept]=\"['image/*']\"\n         (isFileOver)=\"fileOver($event)\"\n         (fileDrop)=\"fileChange($event)\"\n         [ngClass]=\"{'file-is-over': isFileOver}\"\n    >\n      <div class=\"file-upload hr-inline-group\">\n        <label class=\"upload-button\">\n          <span [innerText]=\"buttonCaption\"></span>\n          <input\n            type=\"file\"\n            accept=\"image/*\"\n            multiple (change)=\"fileChange(input.files)\"\n            #input>\n        </label>\n\n        <div class=\"drag-box-message\" [innerText]=\"dropBoxMessage\"></div>\n      </div>\n\n      <p class=\"file-too-large\" *ngIf=\"showFileTooLargeMessage\" [innerText]=\"fileTooLargeMessage\">\n      </p>\n\n      <div *ngIf=\"preview\" class=\"image-container hr-inline-group\">\n        <div\n          class=\"image\"\n          *ngFor=\"let file of files\"\n          [ngStyle]=\"{'background-image': 'url('+ file.src +')'}\"\n        >\n          <div *ngIf=\"file.pending\" class=\"loading-overlay\">\n            <div class=\"spinningCircle\"></div>\n          </div>\n          <div *ngIf=\"!file.pending\" class=\"x-mark\" (click)=\"deleteFile(file)\">\n            <span class=\"close\"></span>\n          </div>\n        </div>\n      </div>\n    </div>","styles":["\n    .image-upload {\n      --common-radius: 3px;\n      --active-color: #33CC99;\n      position: relative;\n      border-radius: var(--common-radius);\n      border: #d0d0d0 dashed 1px;\n      font-family: sans-serif;\n    }\n\n    .file-is-over {\n      border-color: var(--active-color);\n      border-style: solid;\n    }\n\n    .hr-inline-group:after {\n      display: table;\n      clear: both;\n      content: \"\";\n    }\n\n    .file-upload {\n      padding: 16px;\n      background-color: #f8f8f8;\n    }\n\n    .drag-box-message {\n      float: left;\n      display: inline-block;\n      margin-left: 12px;\n      padding-top: 14px;\n      color: #9b9b9b;\n      font-weight: 600;\n    }\n\n    label.upload-button input[type=file] {\n      display: none;\n      position: fixed;\n      top: -99999px;\n    }\n\n    .upload-button {\n      cursor: pointer;\n      background-color: var(--active-color);\n      padding: 10px;\n      color: white;\n      font-size: 1.25em;\n      font-weight: 500;\n      text-transform: uppercase;\n      display: inline-block;\n      float: left;\n\n      -webkit-box-shadow: 2px 2px 4px 0px rgba(148, 148, 148, 0.6);\n      -moz-box-shadow: 2px 2px 4px 0px rgba(148, 148, 148, 0.6);\n      box-shadow: 2px 2px 4px 0px rgba(148, 148, 148, 0.6);\n    }\n\n    .upload-button:active span {\n      position: relative;\n      display: block;\n      top: 1px;\n    }\n\n    .image-container {\n      background-color: #fdfdfd;\n      padding: 0 10px 0 10px;\n    }\n\n    .image {\n      float: left;\n      display: inline-block;\n      margin: 6px;\n      width: 86px;\n      height: 86px;\n      background: center center no-repeat;\n      background-size: contain;\n      position: relative;\n    }\n\n    .x-mark {\n      width: 20px;\n      height: 20px;\n      text-align: center;\n      cursor: pointer;\n      border-radius: 2px;\n      float: right;\n      background-color: black;\n      opacity: .7;\n      color: white;\n      margin: 2px;\n    }\n\n    .close {\n      width: 20px;\n      height: 20px;\n      opacity: .7;\n      position: relative;\n      padding-right: 3px;\n    }\n\n    .x-mark:hover .close {\n      opacity: 1;\n    }\n\n    .close:before, .close:after {\n      border-radius: 2px;\n      position: absolute;\n      content: '';\n      height: 16px;\n      width: 2px;\n      top: 2px;\n      background-color: #FFFFFF;\n    }\n\n    .close:before {\n      transform: rotate(45deg);\n    }\n\n    .close:after {\n      transform: rotate(-45deg);\n    }\n\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      background-color: black;\n      opacity: .7;\n    }\n\n    .spinningCircle {\n      height: 30px;\n      width: 30px;\n      margin: auto;\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      border-radius: 50%;\n      border: 3px solid rgba(255, 255, 255, 0);\n      border-top: 3px solid white;\n      border-right: 3px solid white;\n      -webkit-animation: spinner 2s infinite cubic-bezier(0.085, 0.625, 0.855, 0.360);\n      animation: spinner 2s infinite cubic-bezier(0.085, 0.625, 0.855, 0.360);\n    }\n\n    .file-too-large {\n      color: red;\n      padding: 0 15px;\n    }\n\n    @-webkit-keyframes spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg);\n      }\n      100% {\n        -webkit-transform: rotate(360deg);\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg);\n      }\n      100% {\n        -webkit-transform: rotate(360deg);\n        transform: rotate(360deg);\n\n      }\n    }"]}]}],"members":{"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"url":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"headers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"preview":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxFileSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"withCredentials":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"partName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isPending":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onFileUploadFinish":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onRemove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"buttonCaption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dropBoxMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fileTooLargeMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../image.service","name":"ImageService"}]}],"ngOnInit":[{"__symbolic":"method"}],"fileChange":[{"__symbolic":"method"}],"deleteFile":[{"__symbolic":"method"}],"fileOver":[{"__symbolic":"method"}],"uploadFiles":[{"__symbolic":"method"}],"onResponse":[{"__symbolic":"method"}],"uploadSingleFile":[{"__symbolic":"method"}],"countRemainingSlots":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"FileHolder":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"error","message":"Could not resolve type","line":7,"character":47,"context":{"typeName":"File"}}]}]}},"ImageUploadComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"image-upload","template":"\n    <div class=\"image-upload\"\n         fileDrop\n         [accept]=\"['image/*']\"\n         (isFileOver)=\"fileOver($event)\"\n         (fileDrop)=\"fileChange($event)\"\n         [ngClass]=\"{'file-is-over': isFileOver}\"\n    >\n      <div class=\"file-upload hr-inline-group\">\n        <label class=\"upload-button\">\n          <span [innerText]=\"buttonCaption\"></span>\n          <input\n            type=\"file\"\n            accept=\"image/*\"\n            multiple (change)=\"fileChange(input.files)\"\n            #input>\n        </label>\n\n        <div class=\"drag-box-message\" [innerText]=\"dropBoxMessage\"></div>\n      </div>\n\n      <p class=\"file-too-large\" *ngIf=\"showFileTooLargeMessage\" [innerText]=\"fileTooLargeMessage\">\n      </p>\n\n      <div *ngIf=\"preview\" class=\"image-container hr-inline-group\">\n        <div\n          class=\"image\"\n          *ngFor=\"let file of files\"\n          [ngStyle]=\"{'background-image': 'url('+ file.src +')'}\"\n        >\n          <div *ngIf=\"file.pending\" class=\"loading-overlay\">\n            <div class=\"spinningCircle\"></div>\n          </div>\n          <div *ngIf=\"!file.pending\" class=\"x-mark\" (click)=\"deleteFile(file)\">\n            <span class=\"close\"></span>\n          </div>\n        </div>\n      </div>\n    </div>","styles":["\n    .image-upload {\n      --common-radius: 3px;\n      --active-color: #33CC99;\n      position: relative;\n      border-radius: var(--common-radius);\n      border: #d0d0d0 dashed 1px;\n      font-family: sans-serif;\n    }\n\n    .file-is-over {\n      border-color: var(--active-color);\n      border-style: solid;\n    }\n\n    .hr-inline-group:after {\n      display: table;\n      clear: both;\n      content: \"\";\n    }\n\n    .file-upload {\n      padding: 16px;\n      background-color: #f8f8f8;\n    }\n\n    .drag-box-message {\n      float: left;\n      display: inline-block;\n      margin-left: 12px;\n      padding-top: 14px;\n      color: #9b9b9b;\n      font-weight: 600;\n    }\n\n    label.upload-button input[type=file] {\n      display: none;\n      position: fixed;\n      top: -99999px;\n    }\n\n    .upload-button {\n      cursor: pointer;\n      background-color: var(--active-color);\n      padding: 10px;\n      color: white;\n      font-size: 1.25em;\n      font-weight: 500;\n      text-transform: uppercase;\n      display: inline-block;\n      float: left;\n\n      -webkit-box-shadow: 2px 2px 4px 0px rgba(148, 148, 148, 0.6);\n      -moz-box-shadow: 2px 2px 4px 0px rgba(148, 148, 148, 0.6);\n      box-shadow: 2px 2px 4px 0px rgba(148, 148, 148, 0.6);\n    }\n\n    .upload-button:active span {\n      position: relative;\n      display: block;\n      top: 1px;\n    }\n\n    .image-container {\n      background-color: #fdfdfd;\n      padding: 0 10px 0 10px;\n    }\n\n    .image {\n      float: left;\n      display: inline-block;\n      margin: 6px;\n      width: 86px;\n      height: 86px;\n      background: center center no-repeat;\n      background-size: contain;\n      position: relative;\n    }\n\n    .x-mark {\n      width: 20px;\n      height: 20px;\n      text-align: center;\n      cursor: pointer;\n      border-radius: 2px;\n      float: right;\n      background-color: black;\n      opacity: .7;\n      color: white;\n      margin: 2px;\n    }\n\n    .close {\n      width: 20px;\n      height: 20px;\n      opacity: .7;\n      position: relative;\n      padding-right: 3px;\n    }\n\n    .x-mark:hover .close {\n      opacity: 1;\n    }\n\n    .close:before, .close:after {\n      border-radius: 2px;\n      position: absolute;\n      content: '';\n      height: 16px;\n      width: 2px;\n      top: 2px;\n      background-color: #FFFFFF;\n    }\n\n    .close:before {\n      transform: rotate(45deg);\n    }\n\n    .close:after {\n      transform: rotate(-45deg);\n    }\n\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      background-color: black;\n      opacity: .7;\n    }\n\n    .spinningCircle {\n      height: 30px;\n      width: 30px;\n      margin: auto;\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      border-radius: 50%;\n      border: 3px solid rgba(255, 255, 255, 0);\n      border-top: 3px solid white;\n      border-right: 3px solid white;\n      -webkit-animation: spinner 2s infinite cubic-bezier(0.085, 0.625, 0.855, 0.360);\n      animation: spinner 2s infinite cubic-bezier(0.085, 0.625, 0.855, 0.360);\n    }\n\n    .file-too-large {\n      color: red;\n      padding: 0 15px;\n    }\n\n    @-webkit-keyframes spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg);\n      }\n      100% {\n        -webkit-transform: rotate(360deg);\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg);\n      }\n      100% {\n        -webkit-transform: rotate(360deg);\n        transform: rotate(360deg);\n\n      }\n    }"]}]}],"members":{"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"url":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"headers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"preview":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxFileSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"withCredentials":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"partName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isPending":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onFileUploadFinish":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onRemove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"buttonCaption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dropBoxMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fileTooLargeMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../image.service","name":"ImageService"}]}],"ngOnInit":[{"__symbolic":"method"}],"fileChange":[{"__symbolic":"method"}],"deleteFile":[{"__symbolic":"method"}],"fileOver":[{"__symbolic":"method"}],"uploadFiles":[{"__symbolic":"method"}],"onResponse":[{"__symbolic":"method"}],"uploadSingleFile":[{"__symbolic":"method"}],"countRemainingSlots":[{"__symbolic":"method"}]}}}}]

lib/image.service.d.ts

@@ -0,1 +1,3 @@
+import { Http, Response } from "@angular/http";
+import { Observable } from "rxjs/Observable";
 export interface Header {
@@ -6,3 +8,5 @@ header: string;
 export declare class ImageService {
-    postImage(url: string, image: File, headers?: Header[]): any;
+    private http;
+    constructor(http: Http);
+    postImage(url: string, image: File, headers?: Header[], partName?: string, withCredentials?: boolean): Observable<Response>;
 }

lib/image.service.js

 "use strict";
 var core_1 = require("@angular/core");
-var Observable_1 = require("rxjs/Observable");
+var http_1 = require("@angular/http");
 var ImageService = (function () {
-    function ImageService() {
+    function ImageService(http) {
+        this.http = http;
     }
-    ImageService.prototype.postImage = function (url, image, headers) {
+    ImageService.prototype.postImage = function (url, image, headers, partName, withCredentials) {
+        if (partName === void 0) { partName = 'image'; }
         if (!url || url === '') {
             throw new Error('Url is not set! Please set it before doing queries');
         }
-        return Observable_1.Observable.create(function (observer) {
-            var formData = new FormData();
-            var xhr = new XMLHttpRequest();
-            formData.append('image', image);
-            xhr.onreadystatechange = function () {
-                if (xhr.readyState === 4) {
-                    if (xhr.status === 200) {
-                        observer.next({ response: xhr.response, status: xhr.status });
-                        observer.complete();
-                    }
-                    else {
-                        observer.error({ response: xhr.response, status: xhr.status });
-                    }
-                }
-            };
-            xhr.open('POST', url, true);
-            if (headers)
-                for (var _i = 0, headers_1 = headers; _i < headers_1.length; _i++) {
-                    var header = headers_1[_i];
-                    xhr.setRequestHeader(header.header, header.value);
-                }
-            xhr.send(formData);
-        });
+        var options = new http_1.RequestOptions();
+        if (withCredentials) {
+            options.withCredentials = withCredentials;
+        }
+        if (headers) {
+            for (var _i = 0, headers_1 = headers; _i < headers_1.length; _i++) {
+                var header = headers_1[_i];
+                options.headers.append(header.header, header.value);
+            }
+        }
+        var formData = new FormData();
+        formData.append(partName, image);
+        return this.http.post(url, formData, options);
     };
@@ -40,4 +32,6 @@ return ImageService;
 ];
-ImageService.ctorParameters = function () { return []; };
+ImageService.ctorParameters = function () { return [
+    { type: http_1.Http, },
+]; };
 exports.ImageService = ImageService;
 //# sourceMappingURL=image.service.js.map

lib/image.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"Header":{"__symbolic":"interface"},"ImageService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"postImage":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"Header":{"__symbolic":"interface"},"ImageService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"postImage":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"Header":{"__symbolic":"interface"},"ImageService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/http","name":"Http"}]}],"postImage":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"Header":{"__symbolic":"interface"},"ImageService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/http","name":"Http"}]}],"postImage":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "name": "angular2-image-upload",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "An angular component that uploads images using native browser upload or drag-n-drop.",
@@ -36,2 +36,3 @@ "main": "index.js",
     "@angular/common": "^2.4.9 || ^4.0.0",
+    "@angular/http": "^2.4.9 || ^4.0.0",
     "rxjs": "^5.0.0-rc.2"
@@ -45,2 +46,3 @@ },
     "@angular/language-service": "^4.0.0",
+    "@angular/http": "^4.0.0",
     "@types/core-js": "^0.9.34",
@@ -47,0 +49,0 @@ "rxjs": "^5.0.0-rc.2",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57932

increased by1.57%

Lines of code

360

increased by0.84%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

9

increased by12.5%

No dependency changes