mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
#46 upload component
This commit is contained in:
@@ -0,0 +1,115 @@
|
||||
|
||||
.file-dialog {
|
||||
display: none;
|
||||
-webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .2);
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .2);
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
-webkit-transition-delay: 0s;
|
||||
transition-delay: 0s;
|
||||
opacity: 1;
|
||||
-webkit-transition: transform .15s cubic-bezier(0.4, 0.0, 1, 1), opacity .15s cubic-bezier(0.4, 0.0, 1, 1), visibility 0ms linear .15s;
|
||||
transition: transform .15s cubic-bezier(0.4, 0.0, 1, 1), opacity .15s cubic-bezier(0.4, 0.0, 1, 1), visibility 0ms linear .15s;
|
||||
bottom: 0px;
|
||||
left: auto;
|
||||
max-height: 350px;
|
||||
overflow: visible;
|
||||
right: 24px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.file-dialog .header {
|
||||
width: 900px;
|
||||
background-color: #0c79bf;
|
||||
border: 1px transparent solid;
|
||||
-moz-border-radius-topleft: 2px;
|
||||
-webkit-border-top-left-radius: 2px;
|
||||
border-top-left-radius: 2px;
|
||||
-moz-border-radius-topright: 2px;
|
||||
-webkit-border-top-right-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
bottom: 0px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
padding: 0px 10px 0px 10px;
|
||||
}
|
||||
|
||||
.file-dialog .header .title {
|
||||
float: left;
|
||||
min-width: 200px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.file-dialog .header .buttons {
|
||||
float: right;
|
||||
padding: 10px 10px 10px 10px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.file-dialog .header .close-button {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.file-dialog .header .close-button:hover {
|
||||
border: 1px solid white;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.file-dialog .header .minimize-button {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
margin-right: 10px;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.up {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.down {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.active .up {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.active .down {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-dialog .header .minimize-button:hover {
|
||||
border: 1px solid white;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.file-dialog .body-dialog {
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-top: -4px;
|
||||
border-bottom: 1px solid #C0C0C0;
|
||||
border-right: 1px solid #C0C0C0;
|
||||
border-left: 1px solid #C0C0C0;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
28
ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.d.ts
vendored
Normal file
28
ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.d.ts
vendored
Normal file
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ElementRef } from 'angular2/core';
|
||||
import { FileModel } from '../models/file.model';
|
||||
export declare class FileUploadingDialogComponent {
|
||||
el: ElementRef;
|
||||
filesUploadingList: FileModel[];
|
||||
_isDialogActive: boolean;
|
||||
_isDialogMinimized: boolean;
|
||||
constructor(el: ElementRef);
|
||||
toggleDialog($event: any): void;
|
||||
showDialog(): void;
|
||||
toggleDialogMinimize($event: any): void;
|
||||
}
|
@@ -0,0 +1,20 @@
|
||||
<div class="file-dialog" [ngClass]="{show: _isDialogActive}">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
{{filesUploadingList.length}} uploads complete
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="minimize-button" [ngClass]="{active: _isDialogMinimized}" (click)="toggleDialogMinimize($event)">
|
||||
<i class="material-icons down">keyboard_arrow_down</i>
|
||||
<i class="material-icons up">keyboard_arrow_up</i>
|
||||
</div>
|
||||
|
||||
<div class="close-button" (click)="toggleDialog($event)">
|
||||
<i class="material-icons">clear</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-dialog" [ngClass]="{hide: _isDialogMinimized}">
|
||||
<alfresco-file-uploading-list [filesUploadingList]="filesUploadingList"></alfresco-file-uploading-list>
|
||||
</div>
|
||||
</div>
|
@@ -0,0 +1,77 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
System.register(['angular2/core', './file-uploading-list.component'], function(exports_1, context_1) {
|
||||
"use strict";
|
||||
var __moduleName = context_1 && context_1.id;
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1, file_uploading_list_component_1;
|
||||
var FileUploadingDialogComponent;
|
||||
return {
|
||||
setters:[
|
||||
function (core_1_1) {
|
||||
core_1 = core_1_1;
|
||||
},
|
||||
function (file_uploading_list_component_1_1) {
|
||||
file_uploading_list_component_1 = file_uploading_list_component_1_1;
|
||||
}],
|
||||
execute: function() {
|
||||
FileUploadingDialogComponent = (function () {
|
||||
function FileUploadingDialogComponent(el) {
|
||||
this.el = el;
|
||||
this._isDialogActive = false;
|
||||
this._isDialogMinimized = false;
|
||||
console.log('FileUploadingDialogComponent constructor', el);
|
||||
}
|
||||
FileUploadingDialogComponent.prototype.toggleDialog = function ($event) {
|
||||
this._isDialogActive = !this._isDialogActive;
|
||||
};
|
||||
FileUploadingDialogComponent.prototype.showDialog = function () {
|
||||
this._isDialogActive = true;
|
||||
};
|
||||
FileUploadingDialogComponent.prototype.toggleDialogMinimize = function ($event) {
|
||||
this._isDialogMinimized = !this._isDialogMinimized;
|
||||
};
|
||||
__decorate([
|
||||
core_1.Input(),
|
||||
__metadata('design:type', Array)
|
||||
], FileUploadingDialogComponent.prototype, "filesUploadingList", void 0);
|
||||
FileUploadingDialogComponent = __decorate([
|
||||
core_1.Component({
|
||||
selector: 'file-uploading-dialog',
|
||||
moduleId: __moduleName,
|
||||
directives: [file_uploading_list_component_1.FileUploadingListComponent],
|
||||
templateUrl: './file-uploading-dialog.component.html',
|
||||
styleUrls: ['./file-uploading-dialog.component.css'],
|
||||
host: { '[class.dialog-show]': 'toggleDialog' }
|
||||
}),
|
||||
__metadata('design:paramtypes', [core_1.ElementRef])
|
||||
], FileUploadingDialogComponent);
|
||||
return FileUploadingDialogComponent;
|
||||
}());
|
||||
exports_1("FileUploadingDialogComponent", FileUploadingDialogComponent);
|
||||
}
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=file-uploading-dialog.component.js.map
|
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"file-uploading-dialog.component.js","sourceRoot":"","sources":["file-uploading-dialog.component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;;;;;;;;;;;;;;;;;;YAiBH;gBASI,sCAAmB,EAAa;oBAAb,OAAE,GAAF,EAAE,CAAW;oBAJhC,oBAAe,GAAW,KAAK,CAAC;oBAEhC,uBAAkB,GAAW,KAAK,CAAC;oBAG/B,OAAO,CAAC,GAAG,CAAC,0CAA0C,EAAE,EAAE,CAAC,CAAC;gBAChE,CAAC;gBAED,mDAAY,GAAZ,UAAa,MAAM;oBACf,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;gBACjD,CAAC;gBAED,iDAAU,GAAV;oBACI,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;gBAChC,CAAC;gBAED,2DAAoB,GAApB,UAAqB,MAAM;oBACvB,IAAI,CAAC,kBAAkB,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC;gBACvD,CAAC;gBArBD;oBAAC,YAAK,EAAE;;wFAAA;gBAVZ;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,uBAAuB;wBACjC,QAAQ,EAAE,YAAY;wBACtB,UAAU,EAAE,CAAC,0DAA0B,CAAC;wBACxC,WAAW,EAAE,wCAAwC;wBACrD,SAAS,EAAE,CAAC,uCAAuC,CAAC;wBACpD,IAAI,EAAE,EAAC,qBAAqB,EAAE,cAAc,EAAC;qBAChD,CAAC;;gDAAA;gBAyBF,mCAAC;YAAD,CAAC,AAxBD,IAwBC;YAxBD,uEAwBC,CAAA"}
|
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
|
||||
import {Component, ElementRef, Input} from 'angular2/core';
|
||||
import {FileModel} from '../models/file.model';
|
||||
import {FileUploadingListComponent} from './file-uploading-list.component';
|
||||
|
||||
declare let __moduleName:string;
|
||||
|
||||
@Component({
|
||||
selector: 'file-uploading-dialog',
|
||||
moduleId: __moduleName,
|
||||
directives: [FileUploadingListComponent],
|
||||
templateUrl: './file-uploading-dialog.component.html',
|
||||
styleUrls: ['./file-uploading-dialog.component.css'],
|
||||
host: {'[class.dialog-show]': 'toggleDialog'}
|
||||
})
|
||||
export class FileUploadingDialogComponent {
|
||||
|
||||
@Input()
|
||||
filesUploadingList:FileModel [];
|
||||
|
||||
_isDialogActive:boolean = false;
|
||||
|
||||
_isDialogMinimized:boolean = false;
|
||||
|
||||
constructor(public el:ElementRef) {
|
||||
console.log('FileUploadingDialogComponent constructor', el);
|
||||
}
|
||||
|
||||
toggleDialog($event) {
|
||||
this._isDialogActive = !this._isDialogActive;
|
||||
}
|
||||
|
||||
showDialog() {
|
||||
this._isDialogActive = true;
|
||||
}
|
||||
|
||||
toggleDialogMinimize($event) {
|
||||
this._isDialogMinimized = !this._isDialogMinimized;
|
||||
}
|
||||
}
|
@@ -0,0 +1,8 @@
|
||||
.mdl-data-table {
|
||||
width: 100%;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
}
|
24
ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.d.ts
vendored
Normal file
24
ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.d.ts
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ElementRef } from 'angular2/core';
|
||||
import { FileModel } from '../models/file.model';
|
||||
export declare class FileUploadingListComponent {
|
||||
el: ElementRef;
|
||||
filesUploadingList: FileModel[];
|
||||
constructor(el: ElementRef);
|
||||
abort(id: any): void;
|
||||
}
|
@@ -0,0 +1,22 @@
|
||||
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
|
||||
<tbody>
|
||||
<tr *ngFor="#file of filesUploadingList">
|
||||
<td class="mdl-data-table__cell--non-numeric">{{file.name}}</td>
|
||||
<td _ngcontent-hvq-3="">
|
||||
<div _ngcontent-hvq-3="" class="mdl-progress mdl-js-progress is-upgraded" id="{{file.id}}"
|
||||
data-upgraded=",MaterialProgress">
|
||||
<div class="progressbar bar bar1" style="width: {{file.progress.percent}}%;"></div>
|
||||
<div class="bufferbar bar bar2" style="width: 100%;"></div>
|
||||
<div class="auxbar bar bar3" style="width: 0%;"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="mdl-data-table__cell--non-numeric">{{file.size}}</td>
|
||||
<td>
|
||||
<span *ngIf="file.done && !file.abort"><i class="material-icons">done</i></span>
|
||||
<span *ngIf="file.uploading" (click)="abort(file.id)" class="cursor" ><i class="material-icons">play_arrow</i></span>
|
||||
<span *ngIf="file.abort"><i class="material-icons">remove_circle</i></span>
|
||||
<span *ngIf="!file.abort && !file.uploading && !file.done"><i class="material-icons">pause</i></span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
System.register(['angular2/core'], function(exports_1, context_1) {
|
||||
"use strict";
|
||||
var __moduleName = context_1 && context_1.id;
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1;
|
||||
var FileUploadingListComponent;
|
||||
return {
|
||||
setters:[
|
||||
function (core_1_1) {
|
||||
core_1 = core_1_1;
|
||||
}],
|
||||
execute: function() {
|
||||
FileUploadingListComponent = (function () {
|
||||
function FileUploadingListComponent(el) {
|
||||
this.el = el;
|
||||
console.log('filesUploadingList constructor', el);
|
||||
setInterval(function () {
|
||||
console.log('Check for async update from drag directive');
|
||||
}, 1000);
|
||||
}
|
||||
FileUploadingListComponent.prototype.abort = function (id) {
|
||||
var file = this.filesUploadingList.filter(function (uploadingFileModel) {
|
||||
return uploadingFileModel.id == id;
|
||||
});
|
||||
file[0].setAbort();
|
||||
};
|
||||
__decorate([
|
||||
core_1.Input(),
|
||||
__metadata('design:type', Array)
|
||||
], FileUploadingListComponent.prototype, "filesUploadingList", void 0);
|
||||
FileUploadingListComponent = __decorate([
|
||||
core_1.Component({
|
||||
selector: 'alfresco-file-uploading-list',
|
||||
moduleId: __moduleName,
|
||||
templateUrl: './file-uploading-list.component.html',
|
||||
styleUrls: ['./file-uploading-list.component.css']
|
||||
}),
|
||||
__metadata('design:paramtypes', [core_1.ElementRef])
|
||||
], FileUploadingListComponent);
|
||||
return FileUploadingListComponent;
|
||||
}());
|
||||
exports_1("FileUploadingListComponent", FileUploadingListComponent);
|
||||
}
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=file-uploading-list.component.js.map
|
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"file-uploading-list.component.js","sourceRoot":"","sources":["file-uploading-list.component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;;;;;;;;;;;;;;;YAcH;gBAKI,oCAAmB,EAAa;oBAAb,OAAE,GAAF,EAAE,CAAW;oBAC5B,OAAO,CAAC,GAAG,CAAC,gCAAgC,EAAE,EAAE,CAAC,CAAC;oBAElD,WAAW,CAAC;wBACR,OAAO,CAAC,GAAG,CAAC,4CAA4C,CAAC,CAAC;oBAC9D,CAAC,EAAE,IAAI,CAAC,CAAC;gBACb,CAAC;gBAED,0CAAK,GAAL,UAAM,EAAE;oBACJ,IAAI,IAAI,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,UAAC,kBAAkB;wBACzD,MAAM,CAAC,kBAAkB,CAAC,EAAE,IAAI,EAAE,CAAC;oBACvC,CAAC,CAAC,CAAC;oBACH,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;gBACvB,CAAC;gBAhBD;oBAAC,YAAK,EAAE;;sFAAA;gBARZ;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,8BAA8B;wBACxC,QAAQ,EAAE,YAAY;wBACtB,WAAW,EAAE,sCAAsC;wBACnD,SAAS,EAAE,CAAC,qCAAqC,CAAC;qBACrD,CAAC;;8CAAA;gBAoBF,iCAAC;YAAD,CAAC,AAnBD,IAmBC;YAnBD,mEAmBC,CAAA"}
|
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
|
||||
import {Component, ElementRef, Input} from 'angular2/core';
|
||||
import {FileModel} from '../models/file.model';
|
||||
|
||||
declare let __moduleName:string;
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-file-uploading-list',
|
||||
moduleId: __moduleName,
|
||||
templateUrl: './file-uploading-list.component.html',
|
||||
styleUrls: ['./file-uploading-list.component.css']
|
||||
})
|
||||
export class FileUploadingListComponent {
|
||||
|
||||
@Input()
|
||||
filesUploadingList:FileModel [];
|
||||
|
||||
constructor(public el:ElementRef) {
|
||||
console.log('filesUploadingList constructor', el);
|
||||
|
||||
setInterval(() => {
|
||||
console.log('Check for async update from drag directive');
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
abort(id):void {
|
||||
let file = this.filesUploadingList.filter((uploadingFileModel) => {
|
||||
return uploadingFileModel.id == id;
|
||||
});
|
||||
file[0].setAbort();
|
||||
}
|
||||
}
|
@@ -0,0 +1,35 @@
|
||||
.mdl-button--file input {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.mdl-textfield--file .mdl-textfield__input {
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
.mdl-textfield--file .mdl-button--file {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.upload-border {
|
||||
vertical-align: middle;
|
||||
color: #555;
|
||||
padding: 20px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
display: inline-block;
|
||||
border: 3px dashed #555;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input-focus {
|
||||
color: #2196F3;
|
||||
border: 3px dashed #2196F3;
|
||||
}
|
31
ng2-components/ng2-alfresco-upload/src/components/upload.component.d.ts
vendored
Normal file
31
ng2-components/ng2-alfresco-upload/src/components/upload.component.d.ts
vendored
Normal file
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ElementRef } from 'angular2/core';
|
||||
import { FileModel } from '../models/file.model';
|
||||
import { FileUploadingDialogComponent } from './file-uploading-dialog.component';
|
||||
export declare class UploadComponent {
|
||||
el: ElementRef;
|
||||
private _uploaderService;
|
||||
method: string;
|
||||
undoNotificationBar: any;
|
||||
fileUploadingDialogComponent: FileUploadingDialogComponent;
|
||||
filesUploadingList: FileModel[];
|
||||
constructor(el: ElementRef);
|
||||
onFilesAdded(files: any): void;
|
||||
showUndoNotificationBar(latestFilesAdded: any): void;
|
||||
showDialog(): void;
|
||||
}
|
@@ -0,0 +1,52 @@
|
||||
<br>
|
||||
|
||||
<!--upload buttons-->
|
||||
|
||||
<form>
|
||||
<div class="mdl-button mdl-js-button mdl-button--raised mdl-button--file">
|
||||
<i class="material-icons">file_upload</i> Upload<input file-select type="file" name="uploadFiles" id="uploadFiles"
|
||||
multiple="multiple"
|
||||
accept=".jpg,.gif,.png,.svg,.mp4"
|
||||
(onFilesAdded)="onFilesAdded($event)"
|
||||
#uploadFiles>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="mdl-button mdl-js-button mdl-button--raised mdl-button--file">
|
||||
<i class="material-icons">file_upload</i> Upload Folder<input file-select type="file" name="uploadFiles" id="uploadFolder"
|
||||
multiple="multiple"
|
||||
accept=".jpg,.gif,.png,.svg"
|
||||
(onFilesAdded)="onFilesAdded($event)"
|
||||
webkitdirectory directory
|
||||
multiple #uploadFiles>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div file-draggable id='UploadBorder' class="upload-border" (onFilesAdded)="onFilesAdded($event)"
|
||||
dropzone="" webkitdropzone="copy file:image/png file:image/gif file:image/jpeg" #droparea>
|
||||
Drop Area
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<!--show dialog-->
|
||||
<br>
|
||||
|
||||
<button type="button" (click)="showDialog($event)" class="mdl-button mdl-js-button mdl-button--raised show-modal">Show
|
||||
Dialog
|
||||
</button>
|
||||
|
||||
<file-uploading-dialog [filesUploadingList]="filesUploadingList" #fileUploadingDialog></file-uploading-dialog>
|
||||
|
||||
<!--show snackbar-->
|
||||
|
||||
|
||||
<div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar" #undoNotificationBar>
|
||||
<div class="mdl-snackbar__text"></div>
|
||||
<button class="mdl-snackbar__action" type="button"></button>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<br>
|
@@ -0,0 +1,122 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
System.register(['angular2/core', '../services/upload.service', './file-uploading-dialog.component', '../directives/file-select.directive', '../directives/file-draggable.directive'], function(exports_1, context_1) {
|
||||
"use strict";
|
||||
var __moduleName = context_1 && context_1.id;
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1, upload_service_1, file_uploading_dialog_component_1, file_select_directive_1, file_draggable_directive_1;
|
||||
var UploadComponent;
|
||||
return {
|
||||
setters:[
|
||||
function (core_1_1) {
|
||||
core_1 = core_1_1;
|
||||
},
|
||||
function (upload_service_1_1) {
|
||||
upload_service_1 = upload_service_1_1;
|
||||
},
|
||||
function (file_uploading_dialog_component_1_1) {
|
||||
file_uploading_dialog_component_1 = file_uploading_dialog_component_1_1;
|
||||
},
|
||||
function (file_select_directive_1_1) {
|
||||
file_select_directive_1 = file_select_directive_1_1;
|
||||
},
|
||||
function (file_draggable_directive_1_1) {
|
||||
file_draggable_directive_1 = file_draggable_directive_1_1;
|
||||
}],
|
||||
execute: function() {
|
||||
UploadComponent = (function () {
|
||||
function UploadComponent(el) {
|
||||
this.el = el;
|
||||
this.method = 'GET';
|
||||
this.filesUploadingList = [];
|
||||
console.log('UploadComponent constructor', el);
|
||||
this._uploaderService = new upload_service_1.UploadService({
|
||||
url: 'http://192.168.99.100:8080/alfresco/service/api/upload',
|
||||
withCredentials: true,
|
||||
authToken: btoa('admin:admin'),
|
||||
authTokenPrefix: 'Basic',
|
||||
fieldName: 'filedata',
|
||||
formFields: {
|
||||
siteid: 'swsdp',
|
||||
containerid: 'documentLibrary'
|
||||
}
|
||||
});
|
||||
}
|
||||
UploadComponent.prototype.onFilesAdded = function (files) {
|
||||
var latestFilesAdded = [];
|
||||
if (componentHandler) {
|
||||
componentHandler.upgradeAllRegistered();
|
||||
}
|
||||
if (files.length) {
|
||||
latestFilesAdded = this._uploaderService.addToQueue(files);
|
||||
this.filesUploadingList = this._uploaderService.getQueue();
|
||||
this.showDialog();
|
||||
this.showUndoNotificationBar(latestFilesAdded);
|
||||
}
|
||||
};
|
||||
UploadComponent.prototype.showUndoNotificationBar = function (latestFilesAdded) {
|
||||
this.snackbarContainer.nativeElement.MaterialSnackbar.showSnackbar({
|
||||
message: 'Upload in progress...',
|
||||
timeout: 5000,
|
||||
actionHandler: function () {
|
||||
latestFilesAdded.forEach(function (uploadingFileModel) {
|
||||
uploadingFileModel.setAbort();
|
||||
});
|
||||
},
|
||||
actionText: 'Undo'
|
||||
});
|
||||
};
|
||||
UploadComponent.prototype.showDialog = function () {
|
||||
this.fileUploadingDialogComponent.showDialog();
|
||||
};
|
||||
__decorate([
|
||||
core_1.Input(),
|
||||
__metadata('design:type', String)
|
||||
], UploadComponent.prototype, "method", void 0);
|
||||
__decorate([
|
||||
core_1.ViewChild('undoNotificationBar'),
|
||||
__metadata('design:type', Object)
|
||||
], UploadComponent.prototype, "undoNotificationBar", void 0);
|
||||
__decorate([
|
||||
core_1.ViewChild('fileUploadingDialog'),
|
||||
__metadata('design:type', file_uploading_dialog_component_1.FileUploadingDialogComponent)
|
||||
], UploadComponent.prototype, "fileUploadingDialogComponent", void 0);
|
||||
UploadComponent = __decorate([
|
||||
core_1.Component({
|
||||
selector: 'alfresco-upload',
|
||||
moduleId: __moduleName,
|
||||
directives: [file_select_directive_1.FileSelectDirective, file_draggable_directive_1.FileDraggableDirective, file_uploading_dialog_component_1.FileUploadingDialogComponent],
|
||||
templateUrl: './upload.component.html',
|
||||
styleUrls: ['./upload.component.css']
|
||||
}),
|
||||
__metadata('design:paramtypes', [core_1.ElementRef])
|
||||
], UploadComponent);
|
||||
return UploadComponent;
|
||||
}());
|
||||
exports_1("UploadComponent", UploadComponent);
|
||||
}
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=upload.component.js.map
|
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"upload.component.js","sourceRoot":"","sources":["upload.component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAqBH;gBAeI,yBAAmB,EAAa;oBAAb,OAAE,GAAF,EAAE,CAAW;oBAVhC,WAAM,GAAU,KAAK,CAAC;oBAQtB,uBAAkB,GAAgB,EAAE,CAAC;oBAGjC,OAAO,CAAC,GAAG,CAAC,6BAA6B,EAAE,EAAE,CAAC,CAAC;oBAE/C,IAAI,CAAC,gBAAgB,GAAG,IAAI,8BAAa,CAAC;wBACtC,GAAG,EAAE,wDAAwD;wBAC7D,eAAe,EAAE,IAAI;wBACrB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC;wBAC9B,eAAe,EAAE,OAAO;wBACxB,SAAS,EAAE,UAAU;wBACrB,UAAU,EAAE;4BACR,MAAM,EAAE,OAAO;4BACf,WAAW,EAAE,iBAAiB;yBACjC;qBACJ,CAAC,CAAC;gBACP,CAAC;gBAED,sCAAY,GAAZ,UAAa,KAAK;oBACd,IAAI,gBAAgB,GAAgB,EAAE,CAAC;oBACvC,EAAE,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC;wBACnB,gBAAgB,CAAC,oBAAoB,EAAE,CAAC;oBAC5C,CAAC;oBAED,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;wBACf,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;wBAC3D,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC;wBAC3D,IAAI,CAAC,UAAU,EAAE,CAAC;wBAClB,IAAI,CAAC,uBAAuB,CAAC,gBAAgB,CAAC,CAAC;oBACnD,CAAC;gBACL,CAAC;gBAED,iDAAuB,GAAvB,UAAwB,gBAAgB;oBACpC,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,gBAAgB,CAAC,YAAY,CAAC;wBAC/D,OAAO,EAAE,uBAAuB;wBAChC,OAAO,EAAE,IAAI;wBACb,aAAa,EAAE;4BACX,gBAAgB,CAAC,OAAO,CAAC,UAAC,kBAAkB;gCACxC,kBAAkB,CAAC,QAAQ,EAAE,CAAC;4BAClC,CAAC,CAAC,CAAC;wBACP,CAAC;wBACD,UAAU,EAAE,MAAM;qBACrB,CAAC,CAAC;gBACP,CAAC;gBAED,oCAAU,GAAV;oBACI,IAAI,CAAC,4BAA4B,CAAC,UAAU,EAAE,CAAC;gBACnD,CAAC;gBAxDD;oBAAC,YAAK,EAAE;;+DAAA;gBAGR;oBAAC,gBAAS,CAAC,qBAAqB,CAAC;;4EAAA;gBAGjC;oBAAC,gBAAS,CAAC,qBAAqB,CAAC;;qFAAA;gBAjBrC;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,iBAAiB;wBAC3B,QAAQ,EAAE,YAAY;wBACtB,UAAU,EAAE,CAAC,2CAAmB,EAAE,iDAAsB,EAAE,8DAA4B,CAAC;wBACvF,WAAW,EAAE,yBAAyB;wBACtC,SAAS,EAAE,CAAC,wBAAwB,CAAC;qBACxC,CAAC;;mCAAA;gBA8DF,sBAAC;YAAD,CAAC,AA7DD,IA6DC;YA7DD,6CA6DC,CAAA"}
|
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
|
||||
import {Component, Input, ViewChild, ElementRef} from 'angular2/core';
|
||||
import {UploadService} from '../services/upload.service';
|
||||
import {FileModel} from '../models/file.model';
|
||||
import {FileUploadingDialogComponent} from './file-uploading-dialog.component';
|
||||
import {FileSelectDirective} from '../directives/file-select.directive';
|
||||
import {FileDraggableDirective} from '../directives/file-draggable.directive';
|
||||
|
||||
declare let componentHandler;
|
||||
declare let dialogPolyfill;
|
||||
declare let __moduleName:string;
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-upload',
|
||||
moduleId: __moduleName,
|
||||
directives: [FileSelectDirective, FileDraggableDirective, FileUploadingDialogComponent],
|
||||
templateUrl: './upload.component.html',
|
||||
styleUrls: ['./upload.component.css']
|
||||
})
|
||||
export class UploadComponent {
|
||||
|
||||
private _uploaderService:UploadService;
|
||||
|
||||
@Input()
|
||||
method:string = 'GET';
|
||||
|
||||
@ViewChild('undoNotificationBar')
|
||||
undoNotificationBar;
|
||||
|
||||
@ViewChild('fileUploadingDialog')
|
||||
fileUploadingDialogComponent:FileUploadingDialogComponent;
|
||||
|
||||
filesUploadingList:FileModel [] = [];
|
||||
|
||||
constructor(public el:ElementRef) {
|
||||
console.log('UploadComponent constructor', el);
|
||||
|
||||
this._uploaderService = new UploadService({
|
||||
url: 'http://192.168.99.100:8080/alfresco/service/api/upload',
|
||||
withCredentials: true,
|
||||
authToken: btoa('admin:admin'),
|
||||
authTokenPrefix: 'Basic',
|
||||
fieldName: 'filedata',
|
||||
formFields: {
|
||||
siteid: 'swsdp',
|
||||
containerid: 'documentLibrary'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onFilesAdded(files):void {
|
||||
let latestFilesAdded:FileModel [] = [];
|
||||
if (componentHandler) {
|
||||
componentHandler.upgradeAllRegistered();
|
||||
}
|
||||
|
||||
if (files.length) {
|
||||
latestFilesAdded = this._uploaderService.addToQueue(files);
|
||||
this.filesUploadingList = this._uploaderService.getQueue();
|
||||
this.showDialog();
|
||||
this.showUndoNotificationBar(latestFilesAdded);
|
||||
}
|
||||
}
|
||||
|
||||
showUndoNotificationBar(latestFilesAdded){
|
||||
this.snackbarContainer.nativeElement.MaterialSnackbar.showSnackbar({
|
||||
message: 'Upload in progress...',
|
||||
timeout: 5000,
|
||||
actionHandler: function () {
|
||||
latestFilesAdded.forEach((uploadingFileModel) => {
|
||||
uploadingFileModel.setAbort();
|
||||
});
|
||||
},
|
||||
actionText: 'Undo'
|
||||
});
|
||||
}
|
||||
|
||||
showDialog():void {
|
||||
this.fileUploadingDialogComponent.showDialog();
|
||||
}
|
||||
}
|
29
ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.d.ts
vendored
Normal file
29
ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.d.ts
vendored
Normal file
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ElementRef, EventEmitter } from 'angular2/core';
|
||||
export declare class FileDraggableDirective {
|
||||
el: ElementRef;
|
||||
onFilesAdded: EventEmitter<any>;
|
||||
files: File[];
|
||||
private _inputFocusClass;
|
||||
constructor(el: ElementRef);
|
||||
private _onDropFiles($event);
|
||||
private _traverseFileTree(item, x);
|
||||
private _onDragEnter($event);
|
||||
private _onDragLeave($event);
|
||||
private _preventDefault($event);
|
||||
}
|
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
System.register(['angular2/core'], function(exports_1, context_1) {
|
||||
"use strict";
|
||||
var __moduleName = context_1 && context_1.id;
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1;
|
||||
var FileDraggableDirective;
|
||||
return {
|
||||
setters:[
|
||||
function (core_1_1) {
|
||||
core_1 = core_1_1;
|
||||
}],
|
||||
execute: function() {
|
||||
FileDraggableDirective = (function () {
|
||||
function FileDraggableDirective(el) {
|
||||
this.el = el;
|
||||
this.onFilesAdded = new core_1.EventEmitter();
|
||||
this._inputFocusClass = false;
|
||||
console.log('FileDraggableComponent constructor', el);
|
||||
}
|
||||
FileDraggableDirective.prototype._onDropFiles = function ($event) {
|
||||
this._preventDefault($event);
|
||||
var items = $event.dataTransfer.items;
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var item = items[i].webkitGetAsEntry();
|
||||
if (item) {
|
||||
this._traverseFileTree(item, -1);
|
||||
}
|
||||
else {
|
||||
var dt = $event.dataTransfer;
|
||||
var files = dt.files;
|
||||
this.onFilesAdded.emit(files);
|
||||
}
|
||||
}
|
||||
this.onFilesAdded.emit([]);
|
||||
this._inputFocusClass = false;
|
||||
};
|
||||
FileDraggableDirective.prototype._traverseFileTree = function (item, x) {
|
||||
if (item.isFile) {
|
||||
var self_1 = this;
|
||||
item.file(function (file) {
|
||||
self_1.onFilesAdded.emit([file]);
|
||||
});
|
||||
}
|
||||
else {
|
||||
if (item.isDirectory) {
|
||||
var self_2 = this;
|
||||
var dirReader = item.createReader();
|
||||
dirReader.readEntries(function (entries) {
|
||||
for (var i = 0; i < entries.length; i++) {
|
||||
self_2._traverseFileTree(entries[i], i);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
FileDraggableDirective.prototype._onDragEnter = function ($event) {
|
||||
this._preventDefault($event);
|
||||
this._inputFocusClass = true;
|
||||
};
|
||||
FileDraggableDirective.prototype._onDragLeave = function ($event) {
|
||||
this._preventDefault($event);
|
||||
this._inputFocusClass = false;
|
||||
};
|
||||
FileDraggableDirective.prototype._preventDefault = function ($event) {
|
||||
$event.stopPropagation();
|
||||
$event.preventDefault();
|
||||
};
|
||||
__decorate([
|
||||
core_1.Output(),
|
||||
__metadata('design:type', core_1.EventEmitter)
|
||||
], FileDraggableDirective.prototype, "onFilesAdded", void 0);
|
||||
FileDraggableDirective = __decorate([
|
||||
core_1.Directive({
|
||||
selector: '[file-draggable]',
|
||||
host: {
|
||||
'(drop)': '_onDropFiles($event)',
|
||||
'(dragenter)': '_onDragEnter($event)',
|
||||
'(dragleave)': '_onDragLeave($event)',
|
||||
'(dragover)': '_preventDefault($event)',
|
||||
'[class.input-focus]': '_inputFocusClass'
|
||||
}
|
||||
}),
|
||||
__metadata('design:paramtypes', [core_1.ElementRef])
|
||||
], FileDraggableDirective);
|
||||
return FileDraggableDirective;
|
||||
}());
|
||||
exports_1("FileDraggableDirective", FileDraggableDirective);
|
||||
}
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=file-draggable.directive.js.map
|
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"file-draggable.directive.js","sourceRoot":"","sources":["file-draggable.directive.ts"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,94 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {Directive, ElementRef, EventEmitter, Output} from 'angular2/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[file-draggable]',
|
||||
host: {
|
||||
'(drop)': '_onDropFiles($event)',
|
||||
'(dragenter)': '_onDragEnter($event)',
|
||||
'(dragleave)': '_onDragLeave($event)',
|
||||
'(dragover)': '_preventDefault($event)',
|
||||
'[class.input-focus]': '_inputFocusClass'
|
||||
}
|
||||
})
|
||||
export class FileDraggableDirective {
|
||||
@Output()
|
||||
onFilesAdded:EventEmitter<any> = new EventEmitter();
|
||||
files:File [];
|
||||
private _inputFocusClass:boolean = false;
|
||||
|
||||
constructor(public el:ElementRef) {
|
||||
console.log('FileDraggableComponent constructor', el);
|
||||
}
|
||||
|
||||
private _onDropFiles($event):void {
|
||||
this._preventDefault($event);
|
||||
|
||||
var items = $event.dataTransfer.items;
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var item = items[i].webkitGetAsEntry();
|
||||
if (item) {
|
||||
this._traverseFileTree(item, -1);
|
||||
} else {
|
||||
let dt = $event.dataTransfer;
|
||||
let files = dt.files;
|
||||
this.onFilesAdded.emit(files);
|
||||
}
|
||||
}
|
||||
this.onFilesAdded.emit([]);
|
||||
|
||||
this._inputFocusClass = false;
|
||||
}
|
||||
|
||||
private _traverseFileTree(item, x):void {
|
||||
if (item.isFile) {
|
||||
let self = this;
|
||||
item.file(function (file) {
|
||||
self.onFilesAdded.emit([file]);
|
||||
});
|
||||
} else {
|
||||
if (item.isDirectory) {
|
||||
let self = this;
|
||||
let dirReader = item.createReader();
|
||||
dirReader.readEntries(function (entries) {
|
||||
for (var i = 0; i < entries.length; i++) {
|
||||
self._traverseFileTree(entries[i], i);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private _onDragEnter($event):void {
|
||||
this._preventDefault($event);
|
||||
|
||||
this._inputFocusClass = true;
|
||||
}
|
||||
|
||||
private _onDragLeave($event):void {
|
||||
this._preventDefault($event);
|
||||
|
||||
this._inputFocusClass = false;
|
||||
}
|
||||
|
||||
private _preventDefault($event):void {
|
||||
$event.stopPropagation();
|
||||
$event.preventDefault();
|
||||
}
|
||||
}
|
23
ng2-components/ng2-alfresco-upload/src/directives/file-select.directive.d.ts
vendored
Normal file
23
ng2-components/ng2-alfresco-upload/src/directives/file-select.directive.d.ts
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ElementRef, EventEmitter } from 'angular2/core';
|
||||
export declare class FileSelectDirective {
|
||||
el: ElementRef;
|
||||
onFilesAdded: EventEmitter<any>;
|
||||
constructor(el: ElementRef);
|
||||
private _onAdd();
|
||||
}
|
@@ -0,0 +1,64 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
System.register(['angular2/core'], function(exports_1, context_1) {
|
||||
"use strict";
|
||||
var __moduleName = context_1 && context_1.id;
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1;
|
||||
var FileSelectDirective;
|
||||
return {
|
||||
setters:[
|
||||
function (core_1_1) {
|
||||
core_1 = core_1_1;
|
||||
}],
|
||||
execute: function() {
|
||||
FileSelectDirective = (function () {
|
||||
function FileSelectDirective(el) {
|
||||
this.el = el;
|
||||
this.onFilesAdded = new core_1.EventEmitter();
|
||||
console.log('FileSelectComponent constructor', el);
|
||||
}
|
||||
FileSelectDirective.prototype._onAdd = function () {
|
||||
var files = this.el.nativeElement.files;
|
||||
this.onFilesAdded.emit(files);
|
||||
};
|
||||
__decorate([
|
||||
core_1.Output(),
|
||||
__metadata('design:type', core_1.EventEmitter)
|
||||
], FileSelectDirective.prototype, "onFilesAdded", void 0);
|
||||
FileSelectDirective = __decorate([
|
||||
core_1.Directive({
|
||||
selector: '[file-select]',
|
||||
host: { '(change)': '_onAdd()' }
|
||||
}),
|
||||
__metadata('design:paramtypes', [core_1.ElementRef])
|
||||
], FileSelectDirective);
|
||||
return FileSelectDirective;
|
||||
}());
|
||||
exports_1("FileSelectDirective", FileSelectDirective);
|
||||
}
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=file-select.directive.js.map
|
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"file-select.directive.js","sourceRoot":"","sources":["file-select.directive.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;;;;;;;;;;;;;;;YAQH;gBAKI,6BAAmB,EAAa;oBAAb,OAAE,GAAF,EAAE,CAAW;oBAFhC,iBAAY,GAAqB,IAAI,mBAAY,EAAE,CAAC;oBAGhD,OAAO,CAAC,GAAG,CAAC,iCAAiC,EAAE,EAAE,CAAC,CAAC;gBACvD,CAAC;gBAEO,oCAAM,GAAd;oBACI,IAAI,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC;oBACxC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAClC,CAAC;gBAVD;oBAAC,aAAM,EAAE;;yEAAA;gBANb;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,eAAe;wBACzB,IAAI,EAAE,EAAC,UAAU,EAAE,UAAU,EAAC;qBACjC,CAAC;;uCAAA;gBAcF,0BAAC;YAAD,CAAC,AAbD,IAaC;YAbD,qDAaC,CAAA"}
|
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {Directive, ElementRef, EventEmitter, Output} from 'angular2/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[file-select]',
|
||||
host: {'(change)': '_onAdd()'}
|
||||
})
|
||||
export class FileSelectDirective {
|
||||
|
||||
@Output()
|
||||
onFilesAdded:EventEmitter<any> = new EventEmitter();
|
||||
|
||||
constructor(public el:ElementRef) {
|
||||
console.log('FileSelectComponent constructor', el);
|
||||
}
|
||||
|
||||
private _onAdd():void {
|
||||
let files = this.el.nativeElement.files;
|
||||
this.onFilesAdded.emit(files);
|
||||
}
|
||||
}
|
40
ng2-components/ng2-alfresco-upload/src/models/file.model.d.ts
vendored
Normal file
40
ng2-components/ng2-alfresco-upload/src/models/file.model.d.ts
vendored
Normal file
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
export declare class FileModel {
|
||||
id: string;
|
||||
status: number;
|
||||
statusText: string;
|
||||
progress: Object;
|
||||
name: string;
|
||||
size: string;
|
||||
response: string;
|
||||
done: boolean;
|
||||
error: boolean;
|
||||
abort: boolean;
|
||||
uploading: boolean;
|
||||
file: any;
|
||||
_xmlHttpRequest: XMLHttpRequest;
|
||||
constructor(file: any);
|
||||
setProgres(progress: any): void;
|
||||
setError(): void;
|
||||
setUploading(): void;
|
||||
setXMLHttpRequest(xmlHttpRequest: XMLHttpRequest): void;
|
||||
setAbort(): void;
|
||||
onFinished(status: number, statusText: string, response: string): void;
|
||||
private _getFileSize(sizeinbytes);
|
||||
private _generateId();
|
||||
}
|
88
ng2-components/ng2-alfresco-upload/src/models/file.model.js
Normal file
88
ng2-components/ng2-alfresco-upload/src/models/file.model.js
Normal file
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
System.register([], function(exports_1, context_1) {
|
||||
"use strict";
|
||||
var __moduleName = context_1 && context_1.id;
|
||||
var FileModel;
|
||||
return {
|
||||
setters:[],
|
||||
execute: function() {
|
||||
FileModel = (function () {
|
||||
function FileModel(file) {
|
||||
this.done = false;
|
||||
this.error = false;
|
||||
this.abort = false;
|
||||
this.uploading = false;
|
||||
this.file = file;
|
||||
this.id = this._generateId();
|
||||
this.name = file.name;
|
||||
this.size = this._getFileSize(file.size);
|
||||
this.progress = {
|
||||
loaded: 0,
|
||||
total: 0,
|
||||
percent: 0
|
||||
};
|
||||
}
|
||||
FileModel.prototype.setProgres = function (progress) {
|
||||
this.progress = progress;
|
||||
};
|
||||
FileModel.prototype.setError = function () {
|
||||
this.error = true;
|
||||
};
|
||||
FileModel.prototype.setUploading = function () {
|
||||
this.uploading = true;
|
||||
};
|
||||
FileModel.prototype.setXMLHttpRequest = function (xmlHttpRequest) {
|
||||
this._xmlHttpRequest = xmlHttpRequest;
|
||||
};
|
||||
FileModel.prototype.setAbort = function () {
|
||||
if (!this.done && !this.error) {
|
||||
this.abort = true;
|
||||
this.uploading = false;
|
||||
this._xmlHttpRequest.abort();
|
||||
}
|
||||
};
|
||||
FileModel.prototype.onFinished = function (status, statusText, response) {
|
||||
this.status = status;
|
||||
this.statusText = statusText;
|
||||
this.response = response;
|
||||
this.done = true;
|
||||
this.uploading = false;
|
||||
};
|
||||
FileModel.prototype._getFileSize = function (sizeinbytes) {
|
||||
var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
|
||||
var size = sizeinbytes;
|
||||
var i = 0;
|
||||
while (size > 900) {
|
||||
size /= 1000;
|
||||
i++;
|
||||
}
|
||||
return Math.round((Math.round(size * 100) / 100)) + ' ' + fSExt[i];
|
||||
};
|
||||
FileModel.prototype._generateId = function () {
|
||||
return 'uploading-' + 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
||||
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
|
||||
return v.toString(16);
|
||||
});
|
||||
};
|
||||
return FileModel;
|
||||
}());
|
||||
exports_1("FileModel", FileModel);
|
||||
}
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=file.model.js.map
|
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"file.model.js","sourceRoot":"","sources":["file.model.ts"],"names":[],"mappings":"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"}
|
95
ng2-components/ng2-alfresco-upload/src/models/file.model.ts
Normal file
95
ng2-components/ng2-alfresco-upload/src/models/file.model.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
|
||||
export class FileModel {
|
||||
id:string;
|
||||
status:number;
|
||||
statusText:string;
|
||||
progress:Object;
|
||||
name:string;
|
||||
size:string;
|
||||
response:string;
|
||||
done:boolean = false;
|
||||
error:boolean = false;
|
||||
abort:boolean = false;
|
||||
uploading:boolean = false;
|
||||
file:any;
|
||||
_xmlHttpRequest:XMLHttpRequest;
|
||||
|
||||
constructor(file:any) {
|
||||
this.file = file;
|
||||
this.id = this._generateId();
|
||||
this.name = file.name;
|
||||
this.size = this._getFileSize(file.size);
|
||||
this.progress = {
|
||||
loaded: 0,
|
||||
total: 0,
|
||||
percent: 0
|
||||
};
|
||||
}
|
||||
|
||||
setProgres(progress:any):void {
|
||||
this.progress = progress;
|
||||
}
|
||||
|
||||
setError():void {
|
||||
this.error = true;
|
||||
}
|
||||
|
||||
setUploading(){
|
||||
this.uploading = true;
|
||||
}
|
||||
|
||||
setXMLHttpRequest(xmlHttpRequest:XMLHttpRequest){
|
||||
this._xmlHttpRequest = xmlHttpRequest;
|
||||
}
|
||||
|
||||
setAbort():void {
|
||||
if(!this.done && !this.error){
|
||||
this.abort = true;
|
||||
this.uploading = false;
|
||||
this._xmlHttpRequest.abort();
|
||||
}
|
||||
}
|
||||
|
||||
onFinished(status:number, statusText:string, response:string):void {
|
||||
this.status = status;
|
||||
this.statusText = statusText;
|
||||
this.response = response;
|
||||
this.done = true;
|
||||
this.uploading = false;
|
||||
}
|
||||
|
||||
private _getFileSize(sizeinbytes):string {
|
||||
let fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
|
||||
let size = sizeinbytes;
|
||||
let i = 0;
|
||||
while (size > 900) {
|
||||
size /= 1000;
|
||||
i++;
|
||||
}
|
||||
return Math.round((Math.round(size * 100) / 100)) + ' ' + fSExt[i];
|
||||
}
|
||||
|
||||
private _generateId():string {
|
||||
return 'uploading-' + 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
||||
let r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
}
|
33
ng2-components/ng2-alfresco-upload/src/services/upload.service.d.ts
vendored
Normal file
33
ng2-components/ng2-alfresco-upload/src/services/upload.service.d.ts
vendored
Normal file
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { FileModel } from '../models/file.model';
|
||||
export declare class UploadService {
|
||||
private _url;
|
||||
private _method;
|
||||
private _authTokenPrefix;
|
||||
private _authToken;
|
||||
private _fieldName;
|
||||
private _formFields;
|
||||
private _withCredentials;
|
||||
_queue: FileModel[];
|
||||
constructor(options: any);
|
||||
addToQueue(files: any[]): FileModel[];
|
||||
private _uploadFilesInTheQueue();
|
||||
uploadFile(uploadingFileModel: any): void;
|
||||
getQueue(): FileModel[];
|
||||
private _isFile(file);
|
||||
}
|
@@ -0,0 +1,117 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
System.register(['../models/file.model'], function(exports_1, context_1) {
|
||||
"use strict";
|
||||
var __moduleName = context_1 && context_1.id;
|
||||
var file_model_1;
|
||||
var UploadService;
|
||||
return {
|
||||
setters:[
|
||||
function (file_model_1_1) {
|
||||
file_model_1 = file_model_1_1;
|
||||
}],
|
||||
execute: function() {
|
||||
UploadService = (function () {
|
||||
function UploadService(options) {
|
||||
this._method = 'POST';
|
||||
this._authTokenPrefix = 'Basic';
|
||||
this._authToken = undefined;
|
||||
this._fieldName = 'file';
|
||||
this._formFields = {};
|
||||
this._queue = [];
|
||||
console.log('UploadService constructor');
|
||||
this._withCredentials = options.withCredentials != null ? options.withCredentials : this._withCredentials;
|
||||
this._url = options.url != null ? options.url : this._url;
|
||||
this._authTokenPrefix = options.authTokenPrefix != null ? options.authTokenPrefix : this._authTokenPrefix;
|
||||
this._authToken = options.authToken != null ? options.authToken : this._authToken;
|
||||
this._fieldName = options.fieldName != null ? options.fieldName : this._fieldName;
|
||||
this._formFields = options.formFields != null ? options.formFields : this._formFields;
|
||||
}
|
||||
UploadService.prototype.addToQueue = function (files) {
|
||||
var latestFilesAdded = [];
|
||||
for (var _i = 0, files_1 = files; _i < files_1.length; _i++) {
|
||||
var file = files_1[_i];
|
||||
if (this._isFile(file)) {
|
||||
var uploadingFileModel = new file_model_1.FileModel(file);
|
||||
latestFilesAdded.push(uploadingFileModel);
|
||||
this._queue.push(uploadingFileModel);
|
||||
}
|
||||
}
|
||||
this._uploadFilesInTheQueue();
|
||||
return latestFilesAdded;
|
||||
};
|
||||
UploadService.prototype._uploadFilesInTheQueue = function () {
|
||||
var _this = this;
|
||||
var filesToUpload = this._queue.filter(function (uploadingFileModel) {
|
||||
return !uploadingFileModel.uploading && !uploadingFileModel.done && !uploadingFileModel.abort && !uploadingFileModel.error;
|
||||
});
|
||||
filesToUpload.forEach(function (uploadingFileModel) {
|
||||
uploadingFileModel.setUploading();
|
||||
_this.uploadFile(uploadingFileModel);
|
||||
});
|
||||
};
|
||||
;
|
||||
UploadService.prototype.uploadFile = function (uploadingFileModel) {
|
||||
var _this = this;
|
||||
var form = new FormData();
|
||||
form.append(this._fieldName, uploadingFileModel.file, uploadingFileModel.name);
|
||||
Object.keys(this._formFields).forEach(function (key) {
|
||||
form.append(key, _this._formFields[key]);
|
||||
});
|
||||
var xmlHttpRequest = new XMLHttpRequest();
|
||||
uploadingFileModel.setXMLHttpRequest(xmlHttpRequest);
|
||||
xmlHttpRequest.upload.onprogress = function (e) {
|
||||
if (e.lengthComputable) {
|
||||
var percent = Math.round(e.loaded / e.total * 100);
|
||||
uploadingFileModel.setProgres({
|
||||
total: e.total,
|
||||
loaded: e.loaded,
|
||||
percent: percent
|
||||
});
|
||||
}
|
||||
};
|
||||
xmlHttpRequest.upload.onabort = function (e) {
|
||||
uploadingFileModel.setAbort();
|
||||
};
|
||||
xmlHttpRequest.upload.onerror = function (e) {
|
||||
uploadingFileModel.setError();
|
||||
};
|
||||
xmlHttpRequest.onreadystatechange = function () {
|
||||
if (xmlHttpRequest.readyState === XMLHttpRequest.DONE) {
|
||||
uploadingFileModel.onFinished(xmlHttpRequest.status, xmlHttpRequest.statusText, xmlHttpRequest.response);
|
||||
}
|
||||
};
|
||||
xmlHttpRequest.open(this._method, this._url, true);
|
||||
xmlHttpRequest.withCredentials = this._withCredentials;
|
||||
if (this._authToken) {
|
||||
xmlHttpRequest.setRequestHeader('Authorization', this._authTokenPrefix + " " + this._authToken);
|
||||
}
|
||||
xmlHttpRequest.send(form);
|
||||
};
|
||||
UploadService.prototype.getQueue = function () {
|
||||
return this._queue;
|
||||
};
|
||||
UploadService.prototype._isFile = function (file) {
|
||||
return file !== null && (file instanceof Blob || (file.name && file.size));
|
||||
};
|
||||
return UploadService;
|
||||
}());
|
||||
exports_1("UploadService", UploadService);
|
||||
}
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=upload.service.js.map
|
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"upload.service.js","sourceRoot":"","sources":["upload.service.ts"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,124 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
|
||||
import {FileModel} from '../models/file.model';
|
||||
|
||||
export class UploadService {
|
||||
private _url:string;
|
||||
private _method:string = 'POST';
|
||||
private _authTokenPrefix:string = 'Basic';
|
||||
private _authToken:string = undefined;
|
||||
private _fieldName:string = 'file';
|
||||
private _formFields:Object = {};
|
||||
private _withCredentials:boolean;
|
||||
|
||||
_queue:FileModel[] = [];
|
||||
|
||||
constructor(options:any) {
|
||||
console.log('UploadService constructor');
|
||||
|
||||
this._withCredentials = options.withCredentials != null ? options.withCredentials : this._withCredentials;
|
||||
this._url = options.url != null ? options.url : this._url;
|
||||
this._authTokenPrefix = options.authTokenPrefix != null ? options.authTokenPrefix : this._authTokenPrefix;
|
||||
this._authToken = options.authToken != null ? options.authToken : this._authToken;
|
||||
this._fieldName = options.fieldName != null ? options.fieldName : this._fieldName;
|
||||
this._formFields = options.formFields != null ? options.formFields : this._formFields;
|
||||
}
|
||||
|
||||
addToQueue(files:any[]):FileModel[] {
|
||||
let latestFilesAdded:FileModel[] = [];
|
||||
|
||||
for (let file of files) {
|
||||
if (this._isFile(file)) {
|
||||
let uploadingFileModel = new FileModel(file)
|
||||
latestFilesAdded.push(uploadingFileModel)
|
||||
this._queue.push(uploadingFileModel);
|
||||
}
|
||||
}
|
||||
this._uploadFilesInTheQueue();
|
||||
|
||||
return latestFilesAdded;
|
||||
}
|
||||
|
||||
private _uploadFilesInTheQueue():void {
|
||||
let filesToUpload = this._queue.filter((uploadingFileModel) => {
|
||||
return !uploadingFileModel.uploading && !uploadingFileModel.done && !uploadingFileModel.abort && !uploadingFileModel.error;
|
||||
});
|
||||
filesToUpload.forEach((uploadingFileModel) => {
|
||||
uploadingFileModel.setUploading();
|
||||
this.uploadFile(uploadingFileModel);
|
||||
});
|
||||
};
|
||||
|
||||
uploadFile(uploadingFileModel:any):void {
|
||||
let form = new FormData();
|
||||
form.append(this._fieldName, uploadingFileModel.file, uploadingFileModel.name);
|
||||
Object.keys(this._formFields).forEach((key) => {
|
||||
form.append(key, this._formFields[key]);
|
||||
});
|
||||
|
||||
let xmlHttpRequest = new XMLHttpRequest();
|
||||
uploadingFileModel.setXMLHttpRequest(xmlHttpRequest);
|
||||
|
||||
xmlHttpRequest.upload.onprogress = (e) => {
|
||||
if (e.lengthComputable) {
|
||||
let percent = Math.round(e.loaded / e.total * 100);
|
||||
uploadingFileModel.setProgres({
|
||||
total: e.total,
|
||||
loaded: e.loaded,
|
||||
percent: percent
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
xmlHttpRequest.upload.onabort = (e) => {
|
||||
uploadingFileModel.setAbort();
|
||||
};
|
||||
|
||||
xmlHttpRequest.upload.onerror = (e) => {
|
||||
uploadingFileModel.setError();
|
||||
};
|
||||
|
||||
xmlHttpRequest.onreadystatechange = () => {
|
||||
if (xmlHttpRequest.readyState === XMLHttpRequest.DONE) {
|
||||
uploadingFileModel.onFinished(
|
||||
xmlHttpRequest.status,
|
||||
xmlHttpRequest.statusText,
|
||||
xmlHttpRequest.response
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
xmlHttpRequest.open(this._method, this._url, true);
|
||||
xmlHttpRequest.withCredentials = this._withCredentials;
|
||||
|
||||
if (this._authToken) {
|
||||
xmlHttpRequest.setRequestHeader('Authorization', `${this._authTokenPrefix} ${this._authToken}`);
|
||||
}
|
||||
|
||||
xmlHttpRequest.send(form);
|
||||
}
|
||||
|
||||
getQueue():FileModel[] {
|
||||
return this._queue;
|
||||
}
|
||||
|
||||
private _isFile(file:any):boolean {
|
||||
return file !== null && (file instanceof Blob || (file.name && file.size));
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user