mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
File upload + Rest API
This commit is contained in:
mauriziovitale84
parent
d62a085c90
commit
748a49db98
1
demo-shell-ng2/.gitignore
vendored
1
demo-shell-ng2/.gitignore
vendored
@ -1,5 +1,6 @@
|
||||
typings/
|
||||
node_modules/
|
||||
bower_components/
|
||||
*.js
|
||||
*.js.map
|
||||
.idea
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
|
||||
<side-menu #actionMenu title="Actions">
|
||||
<div class="p-10">
|
||||
<file-upload accept="{{accept}}" dropaction="inside" droppable="{{droppable}}" target="{{target}}" multi="false" >Choose File</file-upload>
|
||||
|
||||
<button type="button" class="btn btn-success btn-block">
|
||||
Upload <i class="fa fa-plus"></i>
|
||||
</button>
|
||||
|
||||
@ -27,6 +27,11 @@ import {Page2View} from "./components/page2.view";
|
||||
])
|
||||
export class AppComponent {
|
||||
|
||||
target: string = 'http://192.168.99.100:8080/alfresco/service/api/upload';
|
||||
multi: string = 'true';
|
||||
accept: string ='image/*';
|
||||
droppable: boolean = false;
|
||||
|
||||
constructor(
|
||||
public auth: Authentication,
|
||||
public router: Router
|
||||
|
||||
28
demo-shell-ng2/bower.json
Normal file
28
demo-shell-ng2/bower.json
Normal file
@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "angular2-quickstart",
|
||||
"description": "",
|
||||
"main": "",
|
||||
"authors": [
|
||||
"mauriziovitale84 <maurizio.vitale@alfresco.com>"
|
||||
],
|
||||
"license": "ISC",
|
||||
"homepage": "https://github.com/Alfresco/dev-platform-webcomponents",
|
||||
"moduleType": [
|
||||
"node"
|
||||
],
|
||||
"private": true,
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"polymer": "~1.4.0",
|
||||
"webcomponentsjs": "~0.7.21",
|
||||
"paper-button": "~1.0.11",
|
||||
"paper-progress": "~1.0.9",
|
||||
"iron-icons": "~1.1.3"
|
||||
}
|
||||
}
|
||||
@ -12,6 +12,17 @@
|
||||
<!-- Custom theme -->
|
||||
<link rel="stylesheet" href="app/css/theme/navbar.css">
|
||||
|
||||
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script>
|
||||
/* this script must run before Polymer is imported */
|
||||
window.Polymer = {
|
||||
dom: 'shadow',
|
||||
lazyRegister: true
|
||||
};
|
||||
</script>
|
||||
|
||||
<!--ALFRESCO CUSTOM WEBCOMPONENTS-->
|
||||
<link rel="import" href="webcomponents/file-upload/file-upload.html">
|
||||
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- IE required polyfills, in this exact order -->
|
||||
|
||||
33
demo-shell-ng2/webcomponents/bower.json
Executable file
33
demo-shell-ng2/webcomponents/bower.json
Executable file
@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "file-upload",
|
||||
"version": "1.6.4",
|
||||
"authors": [
|
||||
"Winston Howes <winstonhowes@gmail.com>"
|
||||
],
|
||||
"description": "An element for using ajax to upload files.",
|
||||
"keywords": [
|
||||
"web-component",
|
||||
"web-components",
|
||||
"polymer",
|
||||
"file",
|
||||
"ajax",
|
||||
"upload"
|
||||
],
|
||||
"main": "file-upload.html",
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/winhowes/file-upload/",
|
||||
"ignore": [
|
||||
"/.*",
|
||||
"/test/",
|
||||
"/demo/",
|
||||
"/bower_components/"
|
||||
],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0",
|
||||
"paper-progress": "PolymerElements/paper-progress#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"web-component-tester": "*"
|
||||
}
|
||||
}
|
||||
43
demo-shell-ng2/webcomponents/file-upload/.bower.json
Normal file
43
demo-shell-ng2/webcomponents/file-upload/.bower.json
Normal file
@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "file-upload",
|
||||
"version": "1.6.4",
|
||||
"authors": [
|
||||
"Winston Howes <winstonhowes@gmail.com>"
|
||||
],
|
||||
"description": "An element for using ajax to upload files.",
|
||||
"keywords": [
|
||||
"web-component",
|
||||
"web-components",
|
||||
"polymer",
|
||||
"file",
|
||||
"ajax",
|
||||
"upload"
|
||||
],
|
||||
"main": "file-upload.html",
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/winhowes/file-upload/",
|
||||
"ignore": [
|
||||
"/.*",
|
||||
"/test/",
|
||||
"/demo/",
|
||||
"/bower_components/"
|
||||
],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0",
|
||||
"paper-progress": "PolymerElements/paper-progress#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"web-component-tester": "*"
|
||||
},
|
||||
"_release": "1.6.4",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.6.4",
|
||||
"commit": "eeaa8d62ac0d7ae2f5adb9531c427bfba3952f1c"
|
||||
},
|
||||
"_source": "git://github.com/winhowes/file-upload.git",
|
||||
"_target": "~1.6.4",
|
||||
"_originalSource": "file-upload",
|
||||
"_direct": true
|
||||
}
|
||||
21
demo-shell-ng2/webcomponents/file-upload/LICENSE
Normal file
21
demo-shell-ng2/webcomponents/file-upload/LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015 Winston Howes
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
10
demo-shell-ng2/webcomponents/file-upload/README.md
Executable file
10
demo-shell-ng2/webcomponents/file-upload/README.md
Executable file
@ -0,0 +1,10 @@
|
||||
# Introduction
|
||||
This repository contains an element for file uploads using ajax. It supports multi-file selection as well as optional drop zones for drag-and-drop. The element is designed for use in Polymer 1.0.
|
||||
|
||||
Check out the demo and docs here: https://winhowes.github.io/file-upload/components/file-upload/.
|
||||
|
||||
# Installation
|
||||
To install simply run:
|
||||
```
|
||||
bower install --save file-upload
|
||||
```
|
||||
509
demo-shell-ng2/webcomponents/file-upload/file-upload.html
Executable file
509
demo-shell-ng2/webcomponents/file-upload/file-upload.html
Executable file
@ -0,0 +1,509 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 Winston Howes. All rights reserved.
|
||||
This code may only be used under the MIT license found at https://github.com/winhowes/file-upload/blob/master/LICENSE
|
||||
-->
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
|
||||
<!--
|
||||
An element providing a solution to no problem in particular.
|
||||
|
||||
Example:
|
||||
|
||||
<file-upload target="/path/to/destination"></file-upload>
|
||||
|
||||
@demo
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
|
||||
<link rel="import" href="../../bower_components/paper-progress/paper-progress.html">
|
||||
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
|
||||
|
||||
<dom-module id="file-upload">
|
||||
|
||||
<style type="text/css">
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.enabled {
|
||||
border: 1px dashed #555;
|
||||
@apply(--file-upload-upload-border-enabled);
|
||||
}
|
||||
|
||||
.hover {
|
||||
opacity: .7;
|
||||
border: 1px dashed #111;
|
||||
@apply(--file-upload-upload-border-hover);
|
||||
}
|
||||
|
||||
#UploadBorder{
|
||||
vertical-align: middle;
|
||||
color: #555;
|
||||
padding: 20px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
display: inline-block;
|
||||
@apply(--file-upload-upload-border);
|
||||
}
|
||||
|
||||
#dropArea {
|
||||
text-align: center;
|
||||
@apply(--file-upload-drop-area);
|
||||
}
|
||||
|
||||
paper-button#button {
|
||||
margin-bottom: 20px;
|
||||
@apply(--file-upload-button);
|
||||
}
|
||||
|
||||
.file {
|
||||
padding: 10px 0px;
|
||||
@apply(--file-upload-file);
|
||||
}
|
||||
|
||||
.commands {
|
||||
float: right;
|
||||
@apply(--file-upload-commands);
|
||||
}
|
||||
|
||||
.commands iron-icon:not([icon="check-circle"]) {
|
||||
cursor: pointer;
|
||||
opacity: .9;
|
||||
@apply(--file-upload-commands-faded);
|
||||
}
|
||||
|
||||
.commands iron-icon:hover {
|
||||
opacity: 1;
|
||||
@apply(--file-upload-commands-hovered);
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #f40303;
|
||||
font-size: 11px;
|
||||
margin: 2px 0px -3px;
|
||||
@apply(--file-upload-error);
|
||||
}
|
||||
|
||||
paper-progress {
|
||||
--paper-progress-active-color: #03a9f4;
|
||||
}
|
||||
|
||||
paper-progress[error] {
|
||||
--paper-progress-active-color: #f40303;
|
||||
}
|
||||
|
||||
paper-button#button {
|
||||
margin-bottom: 20px;
|
||||
background-color: aquamarine;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<paper-button id="button" icon="file-upload" class="blue" on-click="_fileClick">
|
||||
<content></content>
|
||||
</paper-button>
|
||||
<div id='UploadBorder'>
|
||||
<div id="dropArea" hidden$="{{!_shownDropText}}">{{droptext}}</div>
|
||||
<template is="dom-repeat" items="{{files}}">
|
||||
<div class="file">
|
||||
<div class="name">
|
||||
<span>{{item.name}}</span>
|
||||
<div class="commands">
|
||||
<iron-icon icon="autorenew" title="{{retryText}}" on-click="_retryUpload" hidden$="{{!item.error}}"></iron-icon>
|
||||
<iron-icon icon="cancel" title="{{removeText}}" on-click="_cancelUpload" hidden$="{{item.complete}}"></iron-icon>
|
||||
<iron-icon icon="check-circle" title="{{successText}}" hidden$="{{!item.complete}}"></iron-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="error" hidden$="{{!item.error}}">{{errorText}}</div>
|
||||
<div hidden$={{progressHidden}}>
|
||||
<paper-progress value$="{{item.progress}}" error$="{{item.error}}"></paper-progress>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<input type="file" id="fileInput" on-change="_fileChange" hidden multiple="{{multi}}" accept="{{accept}}">
|
||||
<!--<paper-toast id="toastSuccess" text="File uploaded successfully!"></paper-toast>
|
||||
<paper-toast id="toastFail" text="Error uploading file!"></paper-toast>-->
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'file-upload',
|
||||
|
||||
/**
|
||||
* Fired when a response is received status code 200.
|
||||
*
|
||||
* @event success
|
||||
*/
|
||||
/**
|
||||
* Fired when a response is received other status code.
|
||||
*
|
||||
* @event error
|
||||
*/
|
||||
/**
|
||||
* Fired when a file is about to be uploaded.
|
||||
*
|
||||
* @event before-upload
|
||||
*/
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* `target` is the target url to upload the files to.
|
||||
* Additionally by adding "<name>" in your url, it will be replaced by
|
||||
* the file name.
|
||||
*/
|
||||
target: {
|
||||
type: String,
|
||||
value: ""
|
||||
},
|
||||
|
||||
/**
|
||||
* `accept` is the set of comma separated file extensions or mime types
|
||||
* to filter as accepted.
|
||||
*/
|
||||
|
||||
accept: {
|
||||
type: String,
|
||||
value: ""
|
||||
},
|
||||
|
||||
/**
|
||||
* `progressHidden` indicates whether or not the progress bar should be hidden.
|
||||
*/
|
||||
progressHidden: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* `droppable` indicates whether or not to allow file drop.
|
||||
*/
|
||||
droppable: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer: 'init'
|
||||
},
|
||||
|
||||
/**
|
||||
* `droptext` is the text to display in the file drop area.
|
||||
*/
|
||||
droptext: {
|
||||
type: String,
|
||||
value: "Drop Files Here"
|
||||
},
|
||||
|
||||
/**
|
||||
* `multi` indicates whether or not to allow multiple files to be uploaded.
|
||||
*/
|
||||
multi: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* `files` is the list of files to be uploaded
|
||||
*/
|
||||
files: {
|
||||
type: Array,
|
||||
value: function() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* `method` is the http method to be used during upload
|
||||
*/
|
||||
method: {
|
||||
type: String,
|
||||
value: "POST"
|
||||
},
|
||||
|
||||
/**
|
||||
* `raised` indicates whether or not the button should be raised
|
||||
*/
|
||||
raised: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* `noink` indicates that the button should not have an ink effect
|
||||
*/
|
||||
noink: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* `headers` is a key value map of header names and values
|
||||
*/
|
||||
headers: {
|
||||
type: Object,
|
||||
value: {},
|
||||
},
|
||||
|
||||
/**
|
||||
* `retryText` is the text for the tooltip to retry an upload
|
||||
*/
|
||||
retryText: {
|
||||
type: String,
|
||||
value: 'Retry Upload'
|
||||
},
|
||||
|
||||
/**
|
||||
* `removeText` is the text for the tooltip to remove an upload
|
||||
*/
|
||||
removeText: {
|
||||
type: String,
|
||||
value: 'Remove'
|
||||
},
|
||||
|
||||
/**
|
||||
* `successText` is the text for the tooltip of a successful upload
|
||||
*/
|
||||
successText: {
|
||||
type: String,
|
||||
value: 'Success'
|
||||
},
|
||||
|
||||
/**
|
||||
* `errorText` is the text to display for a failed upload
|
||||
*/
|
||||
errorText: {
|
||||
type: String,
|
||||
value: 'Error uploading file...'
|
||||
},
|
||||
|
||||
/**
|
||||
* `_shownDropText` indicates whether or not the drop text should be shown
|
||||
*/
|
||||
_shownDropText: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
site: {
|
||||
type: String,
|
||||
value: 'swsdp'
|
||||
},
|
||||
|
||||
container: {
|
||||
type: String,
|
||||
value: 'documentLibrary'
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Clears the list of files
|
||||
*/
|
||||
clear: function() {
|
||||
this.set("files", []);
|
||||
this._showDropText();
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
},
|
||||
|
||||
init: function() {
|
||||
if (this.raised) {
|
||||
this.toggleAttribute("raised", true, this.$.button);
|
||||
}
|
||||
if (this.noink) {
|
||||
this.toggleAttribute("noink", true, this.$.button);
|
||||
}
|
||||
|
||||
if (this.droppable === 'true') {
|
||||
this._showDropText();
|
||||
this.setupDrop();
|
||||
} else { this._hideDropText(); }
|
||||
},
|
||||
|
||||
/**
|
||||
* A function to set up a drop area for drag-and-drop file uploads
|
||||
*/
|
||||
setupDrop: function() {
|
||||
var uploadBorder = this.$.UploadBorder;
|
||||
this.toggleClass("enabled", true, uploadBorder);
|
||||
|
||||
this.ondragover = function(e) {
|
||||
e.stopPropagation();
|
||||
this.toggleClass("hover", true, uploadBorder);
|
||||
return false;
|
||||
}
|
||||
|
||||
this.ondragleave = function() {
|
||||
this.toggleClass("hover", false, uploadBorder);
|
||||
return false;
|
||||
}
|
||||
|
||||
this.ondrop = function(event) {
|
||||
this.toggleClass("hover", false, uploadBorder);
|
||||
event.preventDefault();
|
||||
var length = event.dataTransfer.files.length;
|
||||
for (var i = 0; i < length; i++) {
|
||||
var file = event.dataTransfer.files[i];
|
||||
|
||||
// Check if multiple upload is allowed
|
||||
if (!this.multi && this.files.length !== 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if filetype is accepted
|
||||
var mimeType = ((file.type !== '') ? file.type.match(/^[^\/]*\//)[0] : null);
|
||||
var fileType = file.name.match(/\.[^\.]*$/)[0];
|
||||
if (this.accept !== '' && !(this.accept.indexOf(mimeType) > -1 || this.accept.indexOf(fileType) > -1)) {
|
||||
return;
|
||||
}
|
||||
|
||||
file.progress = 0;
|
||||
file.error = false;
|
||||
file.complete = false;
|
||||
this.push("files", file);
|
||||
this.uploadFile(file);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Clicks the invisible file input
|
||||
*/
|
||||
_fileClick: function() {
|
||||
var elem = this.$.fileInput;
|
||||
if (elem && document.createEvent) { // sanity check
|
||||
var evt = document.createEvent("MouseEvents");
|
||||
evt.initEvent("click", true, false);
|
||||
elem.dispatchEvent(evt);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Called whenever the list of selected files changes
|
||||
*/
|
||||
_fileChange: function(e) {
|
||||
var length = e.target.files.length;
|
||||
for (var i = 0; i < length; i++) {
|
||||
var file = e.target.files[i];
|
||||
file.progress = 0;
|
||||
file.error = false;
|
||||
file.complete = false;
|
||||
this.push("files", file);
|
||||
this.uploadFile(file);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Cancels the file upload for a specific file
|
||||
*
|
||||
* @param {object} a file, an element of the files array
|
||||
*/
|
||||
cancel: function(file) {
|
||||
if (file && file.xhr) {
|
||||
file.xhr.abort();
|
||||
this.splice("files", this.files.indexOf(file), 1);
|
||||
this._showDropText();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Cancels the file upload
|
||||
*
|
||||
* @param {object}, an event object
|
||||
*/
|
||||
_cancelUpload: function(e) {
|
||||
this.cancel(e.model.__data__.item);
|
||||
},
|
||||
|
||||
/**
|
||||
* Retries to upload the file
|
||||
*
|
||||
* @param {object}, an event object
|
||||
*/
|
||||
_retryUpload: function(e) {
|
||||
e.model.set("item.error", false);
|
||||
e.model.set("item.progress", 0);
|
||||
// The async helps give visual feedback of a retry occurring, even though it's less efficient.
|
||||
var self = this;
|
||||
this.async(function() {
|
||||
self.uploadFile(e.model.__data__.item);
|
||||
}, 50);
|
||||
},
|
||||
|
||||
/**
|
||||
* Whether or not to display the drop text
|
||||
*/
|
||||
_showDropText: function() {
|
||||
this.set("_shownDropText", true);
|
||||
},
|
||||
|
||||
_hideDropText: function() {
|
||||
this.set("_shownDropText", false);
|
||||
var uploadBorder = this.$.UploadBorder;
|
||||
this.toggleClass("enabled", false, uploadBorder);
|
||||
this.toggleClass("hover", false, uploadBorder);
|
||||
},
|
||||
|
||||
/**
|
||||
* Uploads a file
|
||||
*
|
||||
* @param {object} a file, an element of the files array
|
||||
*/
|
||||
uploadFile: function(file) {
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
this.fire('before-upload');
|
||||
this._showDropText();
|
||||
var prefix = "files." + this.files.indexOf(file);
|
||||
var self = this;
|
||||
|
||||
var formData = new FormData();
|
||||
formData.append("filedata", file, file.name);
|
||||
formData.append('siteid', this.site);
|
||||
formData.append('containerid', this.container);
|
||||
|
||||
var xhr = file.xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.upload.onprogress = function(e) {
|
||||
var done = e.loaded, total = e.total;
|
||||
self.set(prefix + ".progress", Math.floor((done/total)*1000)/10);
|
||||
};
|
||||
|
||||
var url = this.target.replace("<name>", file.name);
|
||||
xhr.open(this.method, url, true);
|
||||
|
||||
for (key in this.headers) {
|
||||
if (this.headers.hasOwnProperty(key)) {
|
||||
xhr.setRequestHeader(key, this.headers[key]);
|
||||
}
|
||||
}
|
||||
xhr.setRequestHeader("Authorization", 'Basic ' + btoa('admin:admin'))
|
||||
|
||||
xhr.onload = function(e) {
|
||||
if (xhr.status === 200) {
|
||||
self.fire("success", {xhr: xhr});
|
||||
self.set(prefix + ".complete", true);
|
||||
} else {
|
||||
self.set(prefix + ".error", true);
|
||||
self.set(prefix + ".complete", false);
|
||||
self.set(prefix + ".progress", 100);
|
||||
self.updateStyles();
|
||||
self.fire("error", {xhr:xhr});
|
||||
}
|
||||
};
|
||||
xhr.send(formData);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
25
demo-shell-ng2/webcomponents/file-upload/index.html
Executable file
25
demo-shell-ng2/webcomponents/file-upload/index.html
Executable file
@ -0,0 +1,25 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 Winston Howes. All rights reserved.
|
||||
This code may only be used under the MIT license found at https://github.com/winhowes/file-upload/blob/master/LICENSE
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Note: if the main element for this repository doesn't
|
||||
match the folder name, add a src="<main-component>.html" attribute,
|
||||
where <main-component>.html" is a file that imports all of the
|
||||
components you want documented. -->
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user