honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updated angular-ngofficeuifabric-file-upload to GA (#228)

This commit is contained in:
Gautam Sheth 2017-06-12 16:06:50 +05:30 committed by Vesa Juvonen
parent 9d17034205
commit 0ec4881a81
69 changed files with 33908 additions and 389 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
samples/angular-ngofficeuifabric-file-upload/README.md
View File

@ -1,50 +1,51 @@
# Spfx Webpart: File Upload using AngularJs
## Summary
File Update/Delete webpart using AngularJs and ngOfficeUIFabric with the SharePoint Framework.
![File Upload using Angular](./assets/NG File Upload.png)
Edit webpart properties to set Document library Name. Initially, It has been set to `Documents`.
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-drop5-red.svg)
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
## Solution
Solution|Author(s)
--------|---------
angular-ngofficeuifabric-file-upload | Atish Kumar Dipongkor (MVP, Office Development)
## Version history
Version|Date|Comments
-------|----|--------
1.0|November 24, 2016|Initial release
## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
---
## Minimal Path to Awesome
- Clone this repository
- in the command line run:
- `npm install`
- `tsd install`
- `gulp serve --nobrowser`
## Features
This Web Part illustrates the following concepts on top of the SharePoint Framework & AngularJs:
- `BaseService`: By injecting this Angular Service, GET, POST, UPDATE & DELETE requests can be made easily. It's a resuable service.
- `CustomFileChange`: It's a custom Angular directive. It binds the file with model on file change event.
- `IsoToDateString`: It's a custom Angular filter. It formats ISO date string to `{0:yyyy}-{0:MM}-{0:dd}` format.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-ngofficeuifabric-file-upload" />
# Spfx Webpart: File Upload using AngularJs
## Summary
File Update/Delete webpart using AngularJs and ngOfficeUIFabric with the SharePoint Framework.
![File Upload using Angular](./assets/NG File Upload.png)
Edit webpart properties to set Document library Name. Initially, It has been set to `Documents`.
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
## Solution
Solution|Author(s)
--------|---------
angular-ngofficeuifabric-file-upload | Atish Kumar Dipongkor (MVP, Office Development), Gautam Sheth(SharePoint Consultant,RapidCircle,@gautamdsheth)
## Version history
Version|Date|Comments
-------|----|--------
1.0|November 24, 2016|Initial release
2.0|May 26, 2017|GA release
## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
---
## Minimal Path to Awesome
- Clone this repository
- in the command line run:
- `npm install`
- `tsd install`
- `gulp serve --nobrowser`
## Features
This Web Part illustrates the following concepts on top of the SharePoint Framework & AngularJs:
- `BaseService`: By injecting this Angular Service, GET, POST, UPDATE & DELETE requests can be made easily. It's a resuable service.
- `CustomFileChange`: It's a custom Angular directive. It binds the file with model on file change event.
- `IsoToDateString`: It's a custom Angular filter. It formats ISO date string to `{0:yyyy}-{0:MM}-{0:dd}` format.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-ngofficeuifabric-file-upload" />

11
samples/angular-ngofficeuifabric-file-upload/config/config.json
View File

@ -6,16 +6,7 @@
"outputPath": "./dist/angular-file-upload.bundle.js"
}
],
"externals": {
"@microsoft/sp-client-base": "node_modules/@microsoft/sp-client-base/dist/sp-client-base.js",
"@microsoft/sp-client-preview": "node_modules/@microsoft/sp-client-preview/dist/sp-client-preview.js",
"@microsoft/sp-webpart-base": "node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base.js",
"@microsoft/sp-lodash-subset": "node_modules/@microsoft/sp-lodash-subset/dist/sp-lodash-subset.js",
"office-ui-fabric-react": "node_modules/office-ui-fabric-react/dist/office-ui-fabric-react.js",
"react": "node_modules/react/dist/react.min.js",
"react-dom": "node_modules/react-dom/dist/react-dom.min.js",
"react-dom/server": "node_modules/react-dom/dist/react-dom-server.min.js"
},
"externals": {},
"localizedResources": {
"angularFileUploadStrings": "webparts/angularFileUpload/loc/{locale}.js"
}

3
samples/angular-ngofficeuifabric-file-upload/config/copy-assets.json Normal file
View File

@ -0,0 +1,3 @@
{
"deployCdnPath": "temp/deploy"
}

10
samples/angular-ngofficeuifabric-file-upload/config/deploy-azure-storage.json
View File

@ -1,6 +1,6 @@
{
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "angular-file-upload",
"accessKey": "<!-- ACCESS KEY -->"
{
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "angular-file-upload",
"accessKey": "<!-- ACCESS KEY -->"
}

20
samples/angular-ngofficeuifabric-file-upload/config/package-solution.json
View File

@ -1,10 +1,10 @@
{
"solution": {
"name": "angular-file-upload-client-side-solution",
"id": "225f3995-9eb1-4b9f-80e9-e45f8fad8c4a",
"version": "1.0.0.0"
},
"paths": {
"zippedPackage": "solution/angular-file-upload.spapp"
}
}
{
"solution": {
"name": "angular-file-upload-client-side-solution",
"id": "99065c0a-9a45-4ff7-9a83-758a18881316",
"version": "1.0.0.0"
},
"paths": {
"zippedPackage": "solution/angular-file-upload.sppkg"
}
}

18
samples/angular-ngofficeuifabric-file-upload/config/serve.json
View File

@ -1,9 +1,9 @@
{
"port": 4321,
"initialPage": "https://localhost:5432/workbench",
"https": true,
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
}
{
"port": 4321,
"initialPage": "https://localhost:5432/workbench",
"https": true,
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
}

95
samples/angular-ngofficeuifabric-file-upload/config/tslint.json
View File

@ -1,51 +1,46 @@
{
// Display errors as warnings
"displayAsWarning": true,
// The TSLint task may have been configured with several custom lint rules
// before this config file is read (for example lint rules from the tslint-microsoft-contrib
// project). If true, this flag will deactivate any of these rules.
"removeExistingRules": true,
// When true, the TSLint task is configured with some default TSLint "rules.":
"useDefaultConfigAsBase": false,
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
// which are active, other than the list of rules below.
"lintConfig": {
// Opt-in to Lint rules which help to eliminate bugs in JavaScript
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"label-undefined": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-case": true,
"no-duplicate-key": false,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-unused-imports": true,
"no-unused-variable": true,
"no-unreachable": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"valid-typeof": true,
"variable-name": false,
"whitespace": false,
"prefer-const": true,
"a11y-role": true
}
}
{
// Display errors as warnings
"displayAsWarning": true,
// The TSLint task may have been configured with several custom lint rules
// before this config file is read (for example lint rules from the tslint-microsoft-contrib
// project). If true, this flag will deactivate any of these rules.
"removeExistingRules": true,
// When true, the TSLint task is configured with some default TSLint "rules.":
"useDefaultConfigAsBase": false,
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
// which are active, other than the list of rules below.
"lintConfig": {
// Opt-in to Lint rules which help to eliminate bugs in JavaScript
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-case": true,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-unused-imports": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"valid-typeof": true,
"variable-name": false,
"whitespace": false,
"prefer-const": true
}
}
}

4
samples/angular-ngofficeuifabric-file-upload/config/write-manifests.json
View File

@ -1,3 +1,3 @@
{
"cdnBasePath": "<!-- PATH TO CDN -->"
{
"cdnBasePath": "<!-- PATH TO CDN -->"
}

32671
samples/angular-ngofficeuifabric-file-upload/dist/angular-file-upload.bundle.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
samples/angular-ngofficeuifabric-file-upload/dist/angular-file-upload.bundle.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

58
samples/angular-ngofficeuifabric-file-upload/dist/e949042a-35e8-4e87-bc5a-0842f95f1e5f.manifest.json vendored Normal file
View File

@ -0,0 +1,58 @@
{
"id": "e949042a-35e8-4e87-bc5a-0842f95f1e5f",
"alias": "AngularFileUploadWebPart",
"componentType": "WebPart",
"version": "0.0.1",
"manifestVersion": 2,
"preconfiguredEntries": [
{
"groupId": "e949042a-35e8-4e87-bc5a-0842f95f1e5f",
"group": {
"default": "Under Development"
},
"title": {
"default": "(NG) File Upload"
},
"description": {
"default": "Uploading file using AngularJs (1.x)"
},
"officeFabricIconFontName": "Page",
"properties": {
"libraryTitle": "Documents",
"rowLimit": 30
}
}
],
"loaderConfig": {
"entryModuleId": "angular-file-upload.bundle",
"internalModuleBaseUrls": [
"https://localhost:4321/"
],
"scriptResources": {
"angular-file-upload.bundle": {
"type": "path",
"path": "dist/angular-file-upload.bundle.js"
},
"angularFileUploadStrings": {
"defaultPath": "lib/webparts/angularFileUpload/loc/en-us.js",
"type": "localizedPath",
"paths": {}
},
"@microsoft/sp-core-library": {
"type": "component",
"version": "1.0.0",
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b"
},
"@microsoft/sp-webpart-base": {
"type": "component",
"version": "1.0.0",
"id": "974a7777-0990-4136-8fa6-95d80114c2e0"
},
"@microsoft/sp-loader": {
"type": "component",
"version": "1.0.0",
"id": "1c6c9123-7aac-41f3-a376-3caea41ed83f"
}
}
}
}

12
samples/angular-ngofficeuifabric-file-upload/gulpfile.js vendored
View File

@ -1,6 +1,6 @@
'use strict';
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.initialize(gulp);
'use strict';
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.initialize(gulp);

1
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/AngularFileUpload.module.css Normal file
View File

@ -0,0 +1 @@
.angularFileUpload_fa6efb43 .container_fa6efb43{max-width:700px;margin:0 auto;box-shadow:0 2px 4px 0 rgba(0,0,0,.2),0 25px 50px 0 rgba(0,0,0,.1)}.angularFileUpload_fa6efb43 .row_fa6efb43{padding:20px}.angularFileUpload_fa6efb43 .listItem_fa6efb43{max-width:715px;margin:5px auto 5px auto;box-shadow:0 0 4px 0 rgba(0,0,0,.2),0 25px 50px 0 rgba(0,0,0,.1)}.angularFileUpload_fa6efb43 .button_fa6efb43{text-decoration:none}.angularFileUpload_fa6efb43 .headerBackground_fa6efb43{background:#006f94}.angularFileUpload_fa6efb43 .whiteBackground_fa6efb43{background:#fff}.angularFileUpload_fa6efb43 .textAlignCenter_fa6efb43{text-align:center}.angularFileUpload_fa6efb43 .cursorPointer_fa6efb43{cursor:pointer}

12
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/AngularFileUpload.module.scss.d.ts vendored Normal file
View File

@ -0,0 +1,12 @@
declare const styles: {
angularFileUpload: string;
container: string;
row: string;
listItem: string;
button: string;
headerBackground: string;
whiteBackground: string;
textAlignCenter: string;
cursorPointer: string;
};
export default styles;

19
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/AngularFileUpload.module.scss.js Normal file
View File

@ -0,0 +1,19 @@
"use strict";
/* tslint:disable */
require('./AngularFileUpload.module.css');
var styles = {
angularFileUpload: 'angularFileUpload_fa6efb43',
container: 'container_fa6efb43',
row: 'row_fa6efb43',
listItem: 'listItem_fa6efb43',
button: 'button_fa6efb43',
headerBackground: 'headerBackground_fa6efb43',
whiteBackground: 'whiteBackground_fa6efb43',
textAlignCenter: 'textAlignCenter_fa6efb43',
cursorPointer: 'cursorPointer_fa6efb43',
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = styles;
/* tslint:enable */
//# sourceMappingURL=AngularFileUpload.module.scss.js.map

1
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/AngularFileUpload.module.scss.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["webparts/angularFileUpload/AngularFileUpload.module.scss.ts"],"names":[],"mappings":";AAAA,oBAAoB;AACpB,OAAO,CAAC,gCAAgC,CAAC,CAAC;AAC1C,IAAM,MAAM,GAAG;IACb,iBAAiB,EAAE,4BAA4B;IAC/C,SAAS,EAAE,oBAAoB;IAC/B,GAAG,EAAE,cAAc;IACnB,QAAQ,EAAE,mBAAmB;IAC7B,MAAM,EAAE,iBAAiB;IACzB,gBAAgB,EAAE,2BAA2B;IAC7C,eAAe,EAAE,0BAA0B;IAC3C,eAAe,EAAE,0BAA0B;IAC3C,aAAa,EAAE,wBAAwB;CACxC,CAAC;;AAEF,kBAAe,MAAM,CAAC;AACtB,mBAAmB","file":"webparts/angularFileUpload/AngularFileUpload.module.scss.js","sourcesContent":["/* tslint:disable */\r\nrequire('./AngularFileUpload.module.css');\r\nconst styles = {\r\n angularFileUpload: 'angularFileUpload_fa6efb43',\r\n container: 'container_fa6efb43',\r\n row: 'row_fa6efb43',\r\n listItem: 'listItem_fa6efb43',\r\n button: 'button_fa6efb43',\r\n headerBackground: 'headerBackground_fa6efb43',\r\n whiteBackground: 'whiteBackground_fa6efb43',\r\n textAlignCenter: 'textAlignCenter_fa6efb43',\r\n cursorPointer: 'cursorPointer_fa6efb43',\r\n};\r\n\r\nexport default styles;\r\n/* tslint:enable */"],"sourceRoot":"..\\..\\..\\src"}

12
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/AngularFileUploadWebPart.d.ts vendored Normal file
View File

@ -0,0 +1,12 @@
import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart, IPropertyPaneConfiguration, IWebPartContext } from '@microsoft/sp-webpart-base';
import './app/FileUploadModule';
import { IAngularFileUploadWebPartProps } from './IAngularFileUploadWebPartProps';
export default class AngularFileUploadWebPart extends BaseClientSideWebPart<IAngularFileUploadWebPartProps> {
private $injector;
constructor(context: IWebPartContext);
render(): void;
protected readonly dataVersion: Version;
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration;
protected readonly disableReactivePropertyChanges: boolean;
}

75
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/AngularFileUploadWebPart.js vendored Normal file
View File

@ -0,0 +1,75 @@
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var sp_core_library_1 = require("@microsoft/sp-core-library");
var sp_webpart_base_1 = require("@microsoft/sp-webpart-base");
var sp_loader_1 = require("@microsoft/sp-loader");
var angular = require("angular");
require("./app/FileUploadModule");
var AngularFileUpload_module_scss_1 = require("./AngularFileUpload.module.scss");
var strings = require("angularFileUploadStrings");
var AngularFileUploadWebPart = (function (_super) {
__extends(AngularFileUploadWebPart, _super);
function AngularFileUploadWebPart(context) {
var _this = _super.call(this) || this;
sp_loader_1.SPComponentLoader.loadCss('https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.min.css');
sp_loader_1.SPComponentLoader.loadCss('https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css');
return _this;
}
AngularFileUploadWebPart.prototype.render = function () {
if (this.renderedOnce === false) {
this.domElement.innerHTML = "\n <div class=\"" + AngularFileUpload_module_scss_1.default.angularFileUpload + "\">\n <div class=\"" + AngularFileUpload_module_scss_1.default.container + "\" data-ng-controller=\"fileUploadCtrl as vm\">\n <div class=\"ms-Grid ms-fontColor-white " + AngularFileUpload_module_scss_1.default.row + " " + AngularFileUpload_module_scss_1.default.headerBackground + "\">\n <div class=\"ms-Grid-row\">\n <div class=\"ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12\">\n <h1 class=\"ms-fontSize-su ms-fontColor-white " + AngularFileUpload_module_scss_1.default.textAlignCenter + "\">Welcome to Angular File Upload!</h1>\n </div>\n </div>\n <div class=\"ms-Grid-row " + AngularFileUpload_module_scss_1.default.whiteBackground + " " + AngularFileUpload_module_scss_1.default.row + "\">\n <div class=\"ms-Grid-col ms-u-sm5 ms-u-md7 ms-u-lg7 ms-fontColor-black\"><input type=\"file\" value=\"vm.file.fileName\" data-custom-file-change=\"vm.file\" /></div>\n <div class=\"ms-Grid-col ms-u-sm2 ms-u-md2 ms-u-lg2\"><uif-spinner data-ng-if=\"vm.isUploading\"></uif-spinner></div>\n <div class=\"ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg3\"><uif-button uif-type=\"primary\" data-ng-click=\"vm.upload()\">Upload</uif-button></div>\n </div>\n\n <div class=\"ms-Grid-row\">\n <div class=\"ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12\">\n <h1 class=\"ms-fontSize-su ms-fontColor-white " + AngularFileUpload_module_scss_1.default.textAlignCenter + "\">{{vm.libraryTitle}}: Files uploaded by You</h1>\n </div>\n </div>\n\n <div class=\"ms-Grid-row " + AngularFileUpload_module_scss_1.default.whiteBackground + " " + AngularFileUpload_module_scss_1.default.row + "\">\n <div class=\"ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12\">\n <uif-spinner data-ng-if=\"vm.isRemoving\">Removing .....</uif-spinner>\n </div>\n </div>\n\n <div class=\"ms-Grid-row " + AngularFileUpload_module_scss_1.default.whiteBackground + " " + AngularFileUpload_module_scss_1.default.row + "\">\n <div class=\"ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12\">\n <uif-table>\n <uif-table-head>\n <uif-table-row>\n <uif-table-header>File Name</uif-table-header>\n <uif-table-header>Modified</uif-table-header>\n <uif-table-header>Action</uif-table-header>\n </uif-table-row>\n </uif-table-head>\n <uif-table-body>\n <uif-table-row data-ng-repeat=\"fileItem in vm.allFiles\">\n <uif-table-cell>{{fileItem.FileLeafRef}}</uif-table-cell>\n <uif-table-cell>{{fileItem.Modified | isoToDateString}}</uif-table-cell>\n <uif-table-cell><i class=\"ms-Icon ms-Icon--Delete " + AngularFileUpload_module_scss_1.default.cursorPointer + "\" aria-hidden=\"true\" data-ng-click=\"vm.deleteFile(fileItem)\"></i></uif-table-cell>\n </uif-table-row>\n </uif-table-body>\n </uif-table>\n </div>\n </div>\n </div>\n </div>\n </div>";
this.$injector = angular.bootstrap(this.domElement, ['fileUploadApp']);
}
this.$injector.get('$rootScope').$broadcast('configurationChanged', {
libraryTitle: this.properties.libraryTitle,
rowLimit: this.properties.rowLimit
});
};
Object.defineProperty(AngularFileUploadWebPart.prototype, "dataVersion", {
get: function () {
return sp_core_library_1.Version.parse('1.0');
},
enumerable: true,
configurable: true
});
AngularFileUploadWebPart.prototype.getPropertyPaneConfiguration = function () {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
sp_webpart_base_1.PropertyPaneTextField('libraryTitle', {
label: strings.LibraryTitleLabel
}),
sp_webpart_base_1.PropertyPaneTextField('rowLimit', {
label: strings.RowLimitLabel
})
]
}
]
}
]
};
};
Object.defineProperty(AngularFileUploadWebPart.prototype, "disableReactivePropertyChanges", {
get: function () {
return true;
},
enumerable: true,
configurable: true
});
return AngularFileUploadWebPart;
}(sp_webpart_base_1.BaseClientSideWebPart));
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = AngularFileUploadWebPart;
//# sourceMappingURL=AngularFileUploadWebPart.js.map

1
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/AngularFileUploadWebPart.js.map Normal file
View File

File diff suppressed because one or more lines are too long

21
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/AngularFileUploadWebPart.manifest.json Normal file
View File

@ -0,0 +1,21 @@
{
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
"id": "e949042a-35e8-4e87-bc5a-0842f95f1e5f",
"alias": "AngularFileUploadWebPart",
"componentType": "WebPart",
"version": "0.0.1",
"manifestVersion": 2,
"preconfiguredEntries": [{
"groupId": "e949042a-35e8-4e87-bc5a-0842f95f1e5f",
"group": { "default": "Under Development" },
"title": { "default": "(NG) File Upload" },
"description": { "default": "Uploading file using AngularJs (1.x)" },
"officeFabricIconFontName": "Page",
"properties": {
"libraryTitle": "Documents",
"rowLimit":30
}
}]
}

4
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/IAngularFileUploadWebPartProps.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
export interface IAngularFileUploadWebPartProps {
libraryTitle: string;
rowLimit: number;
}

3
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/IAngularFileUploadWebPartProps.js vendored Normal file
View File

@ -0,0 +1,3 @@
"use strict";
//# sourceMappingURL=IAngularFileUploadWebPartProps.js.map

1
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/IAngularFileUploadWebPartProps.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":"","file":"webparts/angularFileUpload/IAngularFileUploadWebPartProps.js","sourcesContent":[],"sourceRoot":"..\\..\\..\\src"}

1
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/FileUploadModule.d.ts vendored Normal file
View File

@ -0,0 +1 @@
import 'ng-office-ui-fabric';

20
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/FileUploadModule.js vendored Normal file
View File

@ -0,0 +1,20 @@
"use strict";
var angular = require("angular");
require("ng-office-ui-fabric");
var baseSvc_1 = require("./services/baseSvc");
var fileUploadSvc_1 = require("./services/fileUploadSvc");
var fileUploadCtrl_1 = require("./controllers/fileUploadCtrl");
var customFileChange_1 = require("./directives/customFileChange");
var isoToDateString_1 = require("./filters/isoToDateString");
var fileUploadApp = angular.module('fileUploadApp', [
'officeuifabric.core',
'officeuifabric.components'
]);
fileUploadApp
.service("baseService", baseSvc_1.BaseService)
.service("fileUploadService", fileUploadSvc_1.FileUploadService)
.controller("fileUploadCtrl", fileUploadCtrl_1.FileUploadCtrl)
.filter("isoToDateString", isoToDateString_1.IsoToDateString.filter)
.directive("customFileChange", customFileChange_1.CustomFileChange.factory());
//# sourceMappingURL=FileUploadModule.js.map

1
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/FileUploadModule.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["webparts/angularFileUpload/app/FileUploadModule.ts"],"names":[],"mappings":";AAAA,iCAAmC;AACnC,+BAA6B;AAC7B,8CAAiD;AACjD,0DAA6D;AAC7D,+DAA8D;AAC9D,kEAAiE;AACjE,6DAA4D;AAE5D,IAAM,aAAa,GAAe,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE;IAChE,qBAAqB;IACrB,2BAA2B;CAC5B,CAAC,CAAC;AAEH,aAAa;KACV,OAAO,CAAC,aAAa,EAAE,qBAAW,CAAC;KACnC,OAAO,CAAC,mBAAmB,EAAE,iCAAiB,CAAC;KAC/C,UAAU,CAAC,gBAAgB,EAAE,+BAAc,CAAC;KAC5C,MAAM,CAAC,iBAAiB,EAAE,iCAAe,CAAC,MAAM,CAAC;KACjD,SAAS,CAAC,kBAAkB,EAAE,mCAAgB,CAAC,OAAO,EAAE,CAAC,CAAC","file":"webparts/angularFileUpload/app/FileUploadModule.js","sourcesContent":["import * as angular from 'angular';\nimport 'ng-office-ui-fabric';\nimport { BaseService } from './services/baseSvc';\nimport { FileUploadService } from './services/fileUploadSvc';\nimport { FileUploadCtrl } from './controllers/fileUploadCtrl';\nimport { CustomFileChange } from './directives/customFileChange';\nimport { IsoToDateString } from './filters/isoToDateString';\n\nconst fileUploadApp: ng.IModule = angular.module('fileUploadApp', [\n 'officeuifabric.core',\n 'officeuifabric.components'\n]);\n\nfileUploadApp\n .service(\"baseService\", BaseService)\n .service(\"fileUploadService\", FileUploadService)\n .controller(\"fileUploadCtrl\", FileUploadCtrl)\n .filter(\"isoToDateString\", IsoToDateString.filter)\n .directive(\"customFileChange\", CustomFileChange.factory());\n\n"],"sourceRoot":"..\\..\\..\\..\\src"}

18
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/controllers/fileUploadCtrl.d.ts vendored Normal file
View File

@ -0,0 +1,18 @@
import { FileUploadService } from '../services/fileUploadSvc';
import { IFileItem } from "../../interfaces/IFileItem";
import { IFile } from "../../interfaces/IFile";
export declare class FileUploadCtrl {
private fileUploadService;
private $rootScope;
static $inject: string[];
allFiles: Array<IFileItem>;
file: IFile;
libraryTitle: string;
rowLimit: number;
isUploading: boolean;
isRemoving: boolean;
constructor(fileUploadService: FileUploadService, $rootScope: ng.IRootScopeService);
private init();
upload(): void;
deleteFile(fileItem: IFileItem): void;
}

59
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/controllers/fileUploadCtrl.js vendored Normal file
View File

@ -0,0 +1,59 @@
"use strict";
var FileUploadCtrl = (function () {
function FileUploadCtrl(fileUploadService, $rootScope) {
var _this = this;
this.fileUploadService = fileUploadService;
this.$rootScope = $rootScope;
this.isUploading = false;
this.isRemoving = false;
var vm = this;
$rootScope.$on('configurationChanged', function (event, args) {
_this.libraryTitle = args.libraryTitle;
_this.rowLimit = parseInt(args.rowLimit);
if (_this.libraryTitle) {
_this.init();
}
});
}
FileUploadCtrl.prototype.init = function () {
var _this = this;
this.fileUploadService.getFiles(this.libraryTitle, this.rowLimit)
.then(function (response) {
_this.allFiles = response;
}, function (error) {
alert(error.message);
});
};
FileUploadCtrl.prototype.upload = function () {
var _this = this;
this.isUploading = true;
this.fileUploadService.uploadFile(this.libraryTitle, this.file)
.then(function (response) {
_this.allFiles.unshift(response);
_this.file = null;
_this.isUploading = false;
}, function (error) {
alert(error.message);
_this.isUploading = false;
});
};
FileUploadCtrl.prototype.deleteFile = function (fileItem) {
var _this = this;
this.isRemoving = true;
this.fileUploadService
.deleteFile(this.libraryTitle, fileItem.Id)
.then(function (response) {
var fileItemIndex = _this.allFiles.indexOf(fileItem);
_this.allFiles.splice(fileItemIndex, 1);
_this.isRemoving = false;
}, function (error) {
alert(error.message);
_this.isRemoving = false;
});
};
return FileUploadCtrl;
}());
FileUploadCtrl.$inject = ['fileUploadService', '$rootScope'];
exports.FileUploadCtrl = FileUploadCtrl;
//# sourceMappingURL=fileUploadCtrl.js.map

1
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/controllers/fileUploadCtrl.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["webparts/angularFileUpload/app/controllers/fileUploadCtrl.ts"],"names":[],"mappings":";AAKA;IASE,wBAAoB,iBAAoC,EAAU,UAAgC;QAAlG,iBAUC;QAVmB,sBAAiB,GAAjB,iBAAiB,CAAmB;QAAU,eAAU,GAAV,UAAU,CAAsB;QAH3F,gBAAW,GAAY,KAAK,CAAC;QAC7B,eAAU,GAAY,KAAK,CAAC;QAGjC,IAAM,EAAE,GAAmB,IAAI,CAAC;QAChC,UAAU,CAAC,GAAG,CAAC,sBAAsB,EACnC,UAAC,KAAuB,EAAE,IAAS;YACjC,KAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;YACtC,KAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACxC,EAAE,CAAA,CAAC,KAAI,CAAC,YAAY,CAAC,CAAA,CAAC;gBACpB,KAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;QACH,CAAC,CAAC,CAAC;IACP,CAAC;IACO,6BAAI,GAAZ;QAAA,iBAOC;QANC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC;aAC9D,IAAI,CAAC,UAAC,QAA0B;YAC/B,KAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,EAAE,UAAC,KAAa;YACf,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;IACP,CAAC;IAEM,+BAAM,GAAb;QAAA,iBAWC;QAVC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC;aAC5D,IAAI,CAAC,UAAC,QAAmB;YACxB,KAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YAChC,KAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,KAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAC3B,CAAC,EAAE,UAAC,KAAa;YACf,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YACrB,KAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAC3B,CAAC,CAAC,CAAC;IACP,CAAC;IAEM,mCAAU,GAAjB,UAAkB,QAAmB;QAArC,iBAYC;QAXC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,iBAAiB;aACnB,UAAU,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,EAAE,CAAC;aAC1C,IAAI,CAAC,UAAC,QAAa;YAClB,IAAI,aAAa,GAAW,KAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YAC5D,KAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;YACvC,KAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAC1B,CAAC,EAAE,UAAC,KAAa;YACf,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YACrB,KAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAC1B,CAAC,CAAC,CAAC;IACP,CAAC;IACH,qBAAC;AAAD,CAvDA,AAuDC;AAtDe,sBAAO,GAAa,CAAC,mBAAmB,EAAE,YAAY,CAAC,CAAC;AAD3D,wCAAc","file":"webparts/angularFileUpload/app/controllers/fileUploadCtrl.js","sourcesContent":["import { FileUploadService } from '../services/fileUploadSvc';\nimport { IFileItem } from \"../../interfaces/IFileItem\";\nimport { IFile } from \"../../interfaces/IFile\";\nimport { IError } from \"../../interfaces/IError\";\n\nexport class FileUploadCtrl {\n public static $inject: string[] = ['fileUploadService', '$rootScope'];\n public allFiles: Array<IFileItem>;\n public file: IFile;\n public libraryTitle: string;\n public rowLimit: number;\n public isUploading: boolean = false;\n public isRemoving: boolean = false;\n\n constructor(private fileUploadService: FileUploadService, private $rootScope: ng.IRootScopeService) {\n const vm: FileUploadCtrl = this;\n $rootScope.$on('configurationChanged',\n (event: ng.IAngularEvent, args: any): void => {\n this.libraryTitle = args.libraryTitle;\n this.rowLimit = parseInt(args.rowLimit);\n if(this.libraryTitle){\n this.init();\n }\n });\n }\n private init(): void {\n this.fileUploadService.getFiles(this.libraryTitle, this.rowLimit)\n .then((response: Array<IFileItem>): void => {\n this.allFiles = response;\n }, (error: IError): void => {\n alert(error.message);\n });\n }\n\n public upload(): void {\n this.isUploading = true;\n this.fileUploadService.uploadFile(this.libraryTitle, this.file)\n .then((response: IFileItem): void => {\n this.allFiles.unshift(response);\n this.file = null;\n this.isUploading = false;\n }, (error: IError): void => {\n alert(error.message);\n this.isUploading = false;\n });\n }\n\n public deleteFile(fileItem: IFileItem): void {\n this.isRemoving = true;\n this.fileUploadService\n .deleteFile(this.libraryTitle, fileItem.Id)\n .then((response: any): void => {\n var fileItemIndex: number = this.allFiles.indexOf(fileItem);\n this.allFiles.splice(fileItemIndex, 1);\n this.isRemoving = false;\n }, (error: IError): void => {\n alert(error.message);\n this.isRemoving = false;\n });\n }\n}\n"],"sourceRoot":"..\\..\\..\\..\\..\\src"}

7
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/directives/customFileChange.d.ts vendored Normal file
View File

@ -0,0 +1,7 @@
export declare class CustomFileChange implements ng.IDirective {
private $parse;
constructor($parse: ng.IParseService);
restrict: string;
link: (scope: angular.IScope, element: any, attrs: any) => void;
static factory(): ng.IDirectiveFactory;
}

37
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/directives/customFileChange.js vendored Normal file
View File

@ -0,0 +1,37 @@
"use strict";
var CustomFileChange = (function () {
function CustomFileChange($parse) {
var _this = this;
this.$parse = $parse;
this.restrict = "A";
this.link = function (scope, element, attrs) {
var model = _this.$parse(attrs.customFileChange);
var modelSetter = model.assign;
element.bind("change", function () {
scope.$apply(function () {
var reader = new FileReader();
reader.onload = function (event) {
var fileModel = {
fileName: element[0].files[0].name,
fileAsBuffer: event.target.result
};
modelSetter(scope, fileModel);
};
reader.onerror = function (event) {
alert(event.target.error);
};
reader.readAsArrayBuffer(element[0].files[0]);
});
});
};
}
CustomFileChange.factory = function () {
var directive = function ($parse) { return new CustomFileChange($parse); };
directive.$inject = ['$parse'];
return directive;
};
return CustomFileChange;
}());
exports.CustomFileChange = CustomFileChange;
//# sourceMappingURL=customFileChange.js.map

1
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/directives/customFileChange.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["webparts/angularFileUpload/app/directives/customFileChange.ts"],"names":[],"mappings":";AACA;IACE,0BAAoB,MAAwB;QAA5C,iBAEC;QAFmB,WAAM,GAAN,MAAM,CAAkB;QAItC,aAAQ,GAAG,GAAG,CAAC;QACf,SAAI,GAAG,UAAC,KAAgB,EAAE,OAAY,EAAE,KAAU;YACtD,IAAM,KAAK,GAAG,KAAI,CAAC,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;YAClD,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;YACjC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACrB,KAAK,CAAC,MAAM,CAAC;oBACX,IAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;oBAEhC,MAAM,CAAC,MAAM,GAAG,UAAC,KAAU;wBACzB,IAAM,SAAS,GAAU;4BACvB,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;4BAClC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;yBAClC,CAAC;wBACF,WAAW,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;oBAChC,CAAC,CAAC;oBAEF,MAAM,CAAC,OAAO,GAAG,UAAC,KAAU;wBAC1B,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBAC5B,CAAC,CAAC;oBACF,MAAM,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;gBAChD,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;IAxBF,CAAC;IA0BY,wBAAO,GAArB;QACG,IAAM,SAAS,GAAG,UAAC,MAAwB,IAAK,OAAA,IAAI,gBAAgB,CAAC,MAAM,CAAC,EAA5B,CAA4B,CAAC;QAC7E,SAAS,CAAC,OAAO,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC/B,MAAM,CAAC,SAAS,CAAC;IACnB,CAAC;IACH,uBAAC;AAAD,CAlCA,AAkCC,IAAA;AAlCY,4CAAgB","file":"webparts/angularFileUpload/app/directives/customFileChange.js","sourcesContent":["import { IFile } from \"../../interfaces/IFile\";\nexport class CustomFileChange implements ng.IDirective {\n constructor(private $parse: ng.IParseService) {\n\n }\n\n public restrict = \"A\";\n public link = (scope: ng.IScope, element: any, attrs: any) => {\n const model = this.$parse(attrs.customFileChange);\n const modelSetter = model.assign;\n element.bind(\"change\", (): void => {\n scope.$apply((): void => {\n const reader = new FileReader();\n\n reader.onload = (event: any): void => {\n const fileModel: IFile = {\n fileName: element[0].files[0].name, \n fileAsBuffer: event.target.result\n };\n modelSetter(scope, fileModel);\n };\n\n reader.onerror = (event: any): void => {\n alert(event.target.error);\n };\n reader.readAsArrayBuffer(element[0].files[0]);\n });\n });\n };\n\n public static factory(): ng.IDirectiveFactory {\n const directive = ($parse: ng.IParseService) => new CustomFileChange($parse);\n directive.$inject = ['$parse'];\n return directive;\n }\n}"],"sourceRoot":"..\\..\\..\\..\\..\\src"}

3
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/filters/isoToDateString.d.ts vendored Normal file
View File

@ -0,0 +1,3 @@
export declare class IsoToDateString {
static filter(): (value: string) => string;
}

14
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/filters/isoToDateString.js vendored Normal file
View File

@ -0,0 +1,14 @@
"use strict";
var IsoToDateString = (function () {
function IsoToDateString() {
}
IsoToDateString.filter = function () {
return function (value) {
return String.format("{0:yyyy}-{0:MM}-{0:dd}", new Date(value));
};
};
return IsoToDateString;
}());
exports.IsoToDateString = IsoToDateString;
//# sourceMappingURL=isoToDateString.js.map

1
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/filters/isoToDateString.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["webparts/angularFileUpload/app/filters/isoToDateString.ts"],"names":[],"mappings":";AAAA;IAAA;IAMA,CAAC;IALc,sBAAM,GAApB;QACG,MAAM,CAAC,UAAC,KAAa;YACnB,MAAM,CAAO,MAAO,CAAC,MAAM,CAAC,wBAAwB,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACzE,CAAC,CAAC;IACJ,CAAC;IACH,sBAAC;AAAD,CANA,AAMC,IAAA;AANY,0CAAe","file":"webparts/angularFileUpload/app/filters/isoToDateString.js","sourcesContent":["export class IsoToDateString {\n public static filter() {\n return (value: string): string => {\n return (<any>String).format(\"{0:yyyy}-{0:MM}-{0:dd}\", new Date(value));\n };\n }\n}"],"sourceRoot":"..\\..\\..\\..\\..\\src"}

13
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/services/baseSvc.d.ts vendored Normal file
View File

@ -0,0 +1,13 @@
export declare class BaseService {
private $http;
private $q;
static $inject: string[];
baseUrl: string;
constructor($http: ng.IHttpService, $q: ng.IQService);
getRequest(query?: string, endPoint?: string): ng.IPromise<any>;
postRequest(url: string, requestBody: any, endPoint?: string): ng.IPromise<any>;
updateRequest(url: string, requestBody: any, eTag: string, endPoint?: string): ng.IPromise<{}>;
deleteRequest(url: string, eTag: string, endPoint?: string): ng.IPromise<{}>;
fileUploadRequest(url: string, file: ArrayBuffer, endPoint?: string): ng.IPromise<any>;
private getFormDigestValue(webUrl);
}

178
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/services/baseSvc.js vendored Normal file
View File

@ -0,0 +1,178 @@
"use strict";
var angular = require("angular");
var BaseService = (function () {
function BaseService($http, $q) {
this.$http = $http;
this.$q = $q;
this.baseUrl = window._spPageContextInfo.webAbsoluteUrl;
}
BaseService.prototype.getRequest = function (query, endPoint) {
var deferred = this.$q.defer();
this.$http({
url: endPoint || this.baseUrl + query,
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-Type": "application/json;odata=verbose"
}
}).then(function (response) {
if (response.data.d.results) {
deferred.resolve(response.data.d.results);
}
else {
deferred.resolve(response.data.d);
}
}, function (error) {
var iError = {
code: error.data.error.code,
message: error.data.error.message.value,
status: error.status,
statusText: error.statusText
};
deferred.reject(iError);
});
return deferred.promise;
};
BaseService.prototype.postRequest = function (url, requestBody, endPoint) {
var _this = this;
var deferred = this.$q.defer();
this.getFormDigestValue(this.baseUrl)
.then(function (requestDigest) {
return _this.$http({
url: endPoint || _this.baseUrl + url,
method: "POST",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": requestDigest,
"content-Type": "application/json;odata=verbose"
},
data: JSON.stringify(requestBody)
});
}).then(function (response) {
deferred.resolve(response.data);
}, function (error) {
var iError = {
code: error.data.error.code,
message: error.data.error.message.value,
status: error.status,
statusText: error.statusText
};
deferred.reject(iError);
});
return deferred.promise;
};
BaseService.prototype.updateRequest = function (url, requestBody, eTag, endPoint) {
var _this = this;
var deferred = this.$q.defer();
this.getFormDigestValue(this.baseUrl)
.then(function (requestDigest) {
return _this.$http({
url: endPoint || _this.baseUrl + url,
method: "POST",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": requestDigest,
"content-Type": "application/json;odata=verbose",
'IF-MATCH': eTag,
'X-HTTP-Method': 'MERGE'
},
data: JSON.stringify(requestBody)
});
}).then(function (response) {
deferred.resolve();
}, function (error) {
var iError = {
code: error.data.error.code,
message: error.data.error.message.value,
status: error.status,
statusText: error.statusText
};
deferred.reject(iError);
});
return deferred.promise;
};
BaseService.prototype.deleteRequest = function (url, eTag, endPoint) {
var _this = this;
var deferred = this.$q.defer();
this.getFormDigestValue(this.baseUrl)
.then(function (requestDigest) {
return _this.$http({
url: endPoint || _this.baseUrl + url,
method: "POST",
headers: {
'Accept': 'application/json;odata=nometadata',
'X-RequestDigest': requestDigest,
'IF-MATCH': eTag,
'X-HTTP-Method': 'DELETE'
}
});
}).then(function (response) {
deferred.resolve();
}, function (error) {
var iError = {
code: error.data.error.code,
message: error.data.error.message.value,
status: error.status,
statusText: error.statusText
};
deferred.reject(iError);
});
return deferred.promise;
};
BaseService.prototype.fileUploadRequest = function (url, file, endPoint) {
var _this = this;
var deferred = this.$q.defer();
this.getFormDigestValue(this.baseUrl)
.then(function (requestDigest) {
return _this.$http({
url: endPoint || _this.baseUrl + url,
method: "POST",
transformRequest: angular.identity,
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": requestDigest,
"content-Type": undefined
},
data: ArrayBuffer
});
}).then(function (response) {
deferred.resolve(response.data);
}, function (error) {
var iError = {
code: error.data.error.code,
message: error.data.error.message.value,
status: error.status,
statusText: error.statusText
};
deferred.reject(iError);
});
return deferred.promise;
};
BaseService.prototype.getFormDigestValue = function (webUrl) {
var deferred = this.$q.defer();
this.$http({
url: webUrl + '/_api/contextinfo',
method: 'POST',
headers: {
'Accept': 'application/json;odata=nometadata'
}
})
.then(function (digestResult) {
deferred.resolve(digestResult.data.FormDigestValue);
}, function (error) {
var iError = {
code: error.data.error.code,
message: error.data.error.message.value,
status: error.status,
statusText: error.statusText
};
deferred.reject(iError);
});
return deferred.promise;
};
return BaseService;
}());
BaseService.$inject = ["$http", "$q"];
exports.BaseService = BaseService;
//# sourceMappingURL=BaseSvc.js.map

1
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/services/baseSvc.js.map Normal file
View File

File diff suppressed because one or more lines are too long

12
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/services/fileUploadSvc.d.ts vendored Normal file
View File

@ -0,0 +1,12 @@
import { BaseService } from "./BaseSvc";
import { IFileItem } from "../../interfaces/IFileItem";
import { IFile } from "../../interfaces/IFile";
export declare class FileUploadService {
private baseService;
private $q;
static $inject: string[];
constructor(baseService: BaseService, $q: ng.IQService);
uploadFile(libraryName: string, file: IFile): ng.IPromise<IFileItem>;
getFiles(libraryName: string, rowLimit: number): ng.IPromise<Array<IFileItem>>;
deleteFile(libraryName: string, id: number): ng.IPromise<any>;
}

36
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/services/fileUploadSvc.js vendored Normal file
View File

@ -0,0 +1,36 @@
"use strict";
var FileUploadService = (function () {
function FileUploadService(baseService, $q) {
this.baseService = baseService;
this.$q = $q;
}
FileUploadService.prototype.uploadFile = function (libraryName, file) {
var _this = this;
var deferred = this.$q.defer();
var uploadUrl = "/_api/web/lists/getbytitle('" + libraryName + "')/rootfolder/files/add(url=@filename, overwrite=true)?@filename='" + file.fileName + "'";
this.baseService
.postRequest(uploadUrl, file.fileAsBuffer)
.then(function (response) {
return _this.baseService
.getRequest(null, response.d.ListItemAllFields.__deferred.uri + "?$select=Id,Modified,FileLeafRef");
}).then(function (response) {
deferred.resolve(response);
}, function (error) {
deferred.reject(error);
});
return deferred.promise;
};
FileUploadService.prototype.getFiles = function (libraryName, rowLimit) {
var url = "/_api/Web/lists/getbytitle('" + libraryName + "')/items?$select=Id,Modified,FileLeafRef,Author/Id&$expand=Author&$orderby=Modified desc&$top=" + rowLimit + "&$filter=Author/Id eq " + window._spPageContextInfo.userId;
return this.baseService.getRequest(url);
};
FileUploadService.prototype.deleteFile = function (libraryName, id) {
var url = "/_api/Web/lists/getbytitle('" + libraryName + "')/items(" + id + ")";
return this.baseService.deleteRequest(url, "*");
};
return FileUploadService;
}());
FileUploadService.$inject = ["baseService", "$q"];
exports.FileUploadService = FileUploadService;
//# sourceMappingURL=fileUploadSvc.js.map

1
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/app/services/fileUploadSvc.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["webparts/angularFileUpload/app/services/fileUploadSvc.ts"],"names":[],"mappings":";AAIA;IAEE,2BAAoB,WAAwB,EAAU,EAAgB;QAAlD,gBAAW,GAAX,WAAW,CAAa;QAAU,OAAE,GAAF,EAAE,CAAc;IACtE,CAAC;IAEM,sCAAU,GAAjB,UAAkB,WAAmB,EAAE,IAAW;QAAlD,iBAcC;QAbC,IAAM,QAAQ,GAA4B,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;QAC1D,IAAI,SAAS,GAAG,iCAA+B,WAAW,0EAAqE,IAAI,CAAC,QAAQ,MAAG,CAAC;QAChJ,IAAI,CAAC,WAAW;aACb,WAAW,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC;aACzC,IAAI,CAAC,UAAC,QAAa;YAClB,MAAM,CAAC,KAAI,CAAC,WAAW;iBACpB,UAAU,CAAC,IAAI,EAAK,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,GAAG,qCAAkC,CAAC,CAAC;QACxG,CAAC,CAAC,CAAC,IAAI,CAAC,UAAC,QAAmB;YAC1B,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAC7B,CAAC,EAAE,UAAC,KAAU;YACZ,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC,CAAC,CAAC;QACL,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC;IAC1B,CAAC;IAEM,oCAAQ,GAAf,UAAgB,WAAmB,EAAE,QAAgB;QACnD,IAAM,GAAG,GAAW,iCAA+B,WAAW,sGAAiG,QAAQ,8BAA+B,MAAO,CAAC,kBAAkB,CAAC,MAAQ,CAAC;QAC1O,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;IAC1C,CAAC;IAEM,sCAAU,GAAjB,UAAkB,WAAmB,EAAE,EAAU;QAC/C,IAAM,GAAG,GAAW,iCAA+B,WAAW,iBAAY,EAAE,MAAG,CAAC;QAChF,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAClD,CAAC;IACH,wBAAC;AAAD,CA9BA,AA8BC;AA7Be,yBAAO,GAAa,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;AAD7C,8CAAiB","file":"webparts/angularFileUpload/app/services/fileUploadSvc.js","sourcesContent":["import { BaseService } from \"./BaseSvc\";\nimport { IFileItem } from \"../../interfaces/IFileItem\";\nimport { IFile } from \"../../interfaces/IFile\";\n\nexport class FileUploadService {\n public static $inject: string[] = [\"baseService\", \"$q\"];\n constructor(private baseService: BaseService, private $q: ng.IQService) {\n }\n\n public uploadFile(libraryName: string, file: IFile): ng.IPromise<IFileItem> {\n const deferred: ng.IDeferred<IFileItem> = this.$q.defer();\n var uploadUrl = `/_api/web/lists/getbytitle('${libraryName}')/rootfolder/files/add(url=@filename, overwrite=true)?@filename='${file.fileName}'`;\n this.baseService\n .postRequest(uploadUrl, file.fileAsBuffer)\n .then((response: any): ng.IPromise<IFileItem> => {\n return this.baseService\n .getRequest(null, `${response.d.ListItemAllFields.__deferred.uri}?$select=Id,Modified,FileLeafRef`);\n }).then((response: IFileItem): void => {\n deferred.resolve(response);\n }, (error: any): void => {\n deferred.reject(error);\n });\n return deferred.promise;\n }\n\n public getFiles(libraryName: string, rowLimit: number): ng.IPromise<Array<IFileItem>> {\n const url: string = `/_api/Web/lists/getbytitle('${libraryName}')/items?$select=Id,Modified,FileLeafRef,Author/Id&$expand=Author&$orderby=Modified desc&$top=${rowLimit}&$filter=Author/Id eq ${(<any>window)._spPageContextInfo.userId}`;\n return this.baseService.getRequest(url);\n }\n\n public deleteFile(libraryName: string, id: number): ng.IPromise<any> {\n const url: string = `/_api/Web/lists/getbytitle('${libraryName}')/items(${id})`;\n return this.baseService.deleteRequest(url, \"*\");\n }\n}"],"sourceRoot":"..\\..\\..\\..\\..\\src"}

6
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/interfaces/IError.d.ts vendored Normal file
View File

@ -0,0 +1,6 @@
export interface IError {
message: string;
status: number;
code: string;
statusText: string;
}

3
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/interfaces/IError.js vendored Normal file
View File

@ -0,0 +1,3 @@
"use strict";
//# sourceMappingURL=IError.js.map

1
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/interfaces/IError.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":"","file":"webparts/angularFileUpload/interfaces/IError.js","sourcesContent":[],"sourceRoot":"..\\..\\..\\..\\src"}

4
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/interfaces/IFile.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
export interface IFile {
fileName: string;
fileAsBuffer: ArrayBuffer;
}

3
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/interfaces/IFile.js vendored Normal file
View File

@ -0,0 +1,3 @@
"use strict";
//# sourceMappingURL=IFile.js.map

1
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/interfaces/IFile.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":"","file":"webparts/angularFileUpload/interfaces/IFile.js","sourcesContent":[],"sourceRoot":"..\\..\\..\\..\\src"}

5
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/interfaces/IFileItem.d.ts vendored Normal file
View File

@ -0,0 +1,5 @@
export interface IFileItem {
Id: number;
FileLeafRef: string;
Modified: Date;
}

3
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/interfaces/IFileItem.js vendored Normal file
View File

@ -0,0 +1,3 @@
"use strict";
//# sourceMappingURL=IFileItem.js.map

1
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/interfaces/IFileItem.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":"","file":"webparts/angularFileUpload/interfaces/IFileItem.js","sourcesContent":[],"sourceRoot":"..\\..\\..\\..\\src"}

9
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/loc/en-us.js vendored Normal file
View File

@ -0,0 +1,9 @@
define([], function() {
return {
"PropertyPaneDescription": "Description",
"BasicGroupName": "Group Name",
"DescriptionFieldLabel": "Description Field",
"LibraryTitleLabel": "Library Name",
"RowLimitLabel": "Row Limit"
}
});

10
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/tests/AngularFileUpload.test.js Normal file
View File

@ -0,0 +1,10 @@
/// <reference types="mocha" />
"use strict";
var chai_1 = require("chai");
describe('AngularFileUploadWebPart', function () {
it('should do something', function () {
chai_1.assert.ok(true);
});
});
//# sourceMappingURL=AngularFileUpload.test.js.map

1
samples/angular-ngofficeuifabric-file-upload/lib/webparts/angularFileUpload/tests/AngularFileUpload.test.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["webparts/angularFileUpload/tests/AngularFileUpload.test.ts"],"names":[],"mappings":"AAAA,+BAA+B;;AAE/B,6BAA8B;AAE9B,QAAQ,CAAC,0BAA0B,EAAE;IACnC,EAAE,CAAC,qBAAqB,EAAE;QACxB,aAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","file":"webparts/angularFileUpload/tests/AngularFileUpload.test.js","sourcesContent":["/// <reference types=\"mocha\" />\r\n\r\nimport { assert } from 'chai';\r\n\r\ndescribe('AngularFileUploadWebPart', () => {\r\n it('should do something', () => {\r\n assert.ok(true);\r\n });\r\n});\r\n"],"sourceRoot":"..\\..\\..\\..\\src"}

18
samples/angular-ngofficeuifabric-file-upload/package.json
View File

@ -6,20 +6,24 @@
"node": ">=0.10.0"
},
"dependencies": {
"@microsoft/sp-client-base": "~0.4.0",
"@microsoft/sp-client-preview": "~0.5.0",
"@microsoft/sp-webpart-base": "^0.1.0",
"@microsoft/sp-client-base": "~1.0.0",
"@microsoft/sp-core-library": "~1.0.0",
"@microsoft/sp-webpart-base": "~1.0.0",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"ng-office-ui-fabric": "^0.12.9"
},
"devDependencies": {
"@microsoft/sp-build-web": "~0.7.0",
"@microsoft/sp-module-interfaces": "~0.4.0",
"@microsoft/sp-webpart-workbench": "~0.5.0",
"@microsoft/sp-build-web": "~1.0.0",
"@microsoft/sp-module-interfaces": "~1.0.0",
"@microsoft/sp-webpart-workbench": "~1.0.0",
"@types/angular": "^1.6.17",
"@types/chai": ">=3.4.34 <3.6.0",
"@types/mocha": ">=2.2.33 <2.6.0",
"gulp": "~3.9.1"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp nuke",
"clean": "gulp clean",
"test": "gulp test"
}
}

66
samples/angular-ngofficeuifabric-file-upload/src/webparts/angularFileUpload/AngularFileUpload.module.scss
View File

@ -1,33 +1,33 @@
.angularFileUpload {
.container {
max-width: 700px;
margin: 0px auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.row {
padding: 20px;
}
.listItem {
max-width: 715px;
margin: 5px auto 5px auto;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.button {
text-decoration: none;
}
.headerBackground{
background: #006f94;
}
.whiteBackground{
background: white;
}
.textAlignCenter{
text-align: center;
}
.cursorPointer{
cursor: pointer;
}
}
.angularFileUpload {
.container {
max-width: 700px;
margin: 0px auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.row {
padding: 20px;
}
.listItem {
max-width: 715px;
margin: 5px auto 5px auto;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.button {
text-decoration: none;
}
.headerBackground{
background: #006f94;
}
.whiteBackground{
background: white;
}
.textAlignCenter{
text-align: center;
}
.cursorPointer{
cursor: pointer;
}
}

16
samples/angular-ngofficeuifabric-file-upload/src/webparts/angularFileUpload/AngularFileUpload.module.scss.ts Normal file
View File

@ -0,0 +1,16 @@
/* tslint:disable */
require('./AngularFileUpload.module.css');
const styles = {
angularFileUpload: 'angularFileUpload_fa6efb43',
container: 'container_fa6efb43',
row: 'row_fa6efb43',
listItem: 'listItem_fa6efb43',
button: 'button_fa6efb43',
headerBackground: 'headerBackground_fa6efb43',
whiteBackground: 'whiteBackground_fa6efb43',
textAlignCenter: 'textAlignCenter_fa6efb43',
cursorPointer: 'cursorPointer_fa6efb43',
};
export default styles;
/* tslint:enable */

41
samples/angular-ngofficeuifabric-file-upload/src/webparts/angularFileUpload/AngularFileUploadWebPart.manifest.json
View File

@ -1,20 +1,21 @@
{
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
"id": "1387564a-9ff7-46f6-8c92-86c1189adc33",
"componentType": "WebPart",
"version": "0.0.1",
"manifestVersion": 2,
"preconfiguredEntries": [{
"groupId": "1387564a-9ff7-46f6-8c92-86c1189adc33",
"group": { "default": "Under Development" },
"title": { "default": "(NG) File Upload" },
"description": { "default": "Uploading file using AngularJs (1.x)" },
"officeFabricIconFontName": "Page",
"properties": {
"libraryTitle": "Documents",
"rowLimit":30
}
}]
}
{
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
"id": "e949042a-35e8-4e87-bc5a-0842f95f1e5f",
"alias": "AngularFileUploadWebPart",
"componentType": "WebPart",
"version": "0.0.1",
"manifestVersion": 2,
"preconfiguredEntries": [{
"groupId": "e949042a-35e8-4e87-bc5a-0842f95f1e5f",
"group": { "default": "Under Development" },
"title": { "default": "(NG) File Upload" },
"description": { "default": "Uploading file using AngularJs (1.x)" },
"officeFabricIconFontName": "Page",
"properties": {
"libraryTitle": "Documents",
"rowLimit":30
}
}]
}

231
samples/angular-ngofficeuifabric-file-upload/src/webparts/angularFileUpload/AngularFileUploadWebPart.ts
View File

@ -1,111 +1,120 @@
import {
BaseClientSideWebPart,
IPropertyPaneSettings,
IWebPartContext,
PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import ModuleLoader from '@microsoft/sp-module-loader';
import * as angular from 'angular';
import './app/FileUploadModule';
import styles from './AngularFileUpload.module.scss';
import * as strings from 'angularFileUploadStrings';
import { IAngularFileUploadWebPartProps } from './IAngularFileUploadWebPartProps';
export default class AngularFileUploadWebPart extends BaseClientSideWebPart<IAngularFileUploadWebPartProps> {
private $injector: ng.auto.IInjectorService;
public constructor(context: IWebPartContext) {
super(context);
ModuleLoader.loadCss('https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.min.css');
ModuleLoader.loadCss('https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css');
}
public render(): void {
if (this.renderedOnce === false) {
this.domElement.innerHTML = `
<div class="${styles.angularFileUpload}">
<div class="${styles.container}" data-ng-controller="fileUploadCtrl as vm">
<div class="ms-Grid ms-fontColor-white ${styles.row} ${styles.headerBackground}">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12">
<h1 class="ms-fontSize-su ms-fontColor-white ${styles.textAlignCenter}">Welcome to Angular File Upload!</h1>
</div>
</div>
<div class="ms-Grid-row ${styles.whiteBackground} ${styles.row}">
<div class="ms-Grid-col ms-u-sm5 ms-u-md7 ms-u-lg7 ms-fontColor-black"><input type="file" value="vm.file.fileName" data-custom-file-change="vm.file" /></div>
<div class="ms-Grid-col ms-u-sm2 ms-u-md2 ms-u-lg2"><uif-spinner data-ng-if="vm.isUploading"></uif-spinner></div>
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg3"><uif-button uif-type="primary" data-ng-click="vm.upload()">Upload</uif-button></div>
</div>
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12">
<h1 class="ms-fontSize-su ms-fontColor-white ${styles.textAlignCenter}">{{vm.libraryTitle}}: Files uploaded by You</h1>
</div>
</div>
<div class="ms-Grid-row ${styles.whiteBackground} ${styles.row}">
<div class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12">
<uif-spinner data-ng-if="vm.isRemoving">Removing .....</uif-spinner>
</div>
</div>
<div class="ms-Grid-row ${styles.whiteBackground} ${styles.row}">
<div class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12">
<uif-table>
<uif-table-head>
<uif-table-row>
<uif-table-header>File Name</uif-table-header>
<uif-table-header>Modified</uif-table-header>
<uif-table-header>Action</uif-table-header>
</uif-table-row>
</uif-table-head>
<uif-table-body>
<uif-table-row data-ng-repeat="fileItem in vm.allFiles">
<uif-table-cell>{{fileItem.FileLeafRef}}</uif-table-cell>
<uif-table-cell>{{fileItem.Modified | isoToDateString}}</uif-table-cell>
<uif-table-cell><i class="ms-Icon ms-Icon--Delete ${styles.cursorPointer}" aria-hidden="true" data-ng-click="vm.deleteFile(fileItem)"></i></uif-table-cell>
</uif-table-row>
</uif-table-body>
</uif-table>
</div>
</div>
</div>
</div>
</div>`;
this.$injector = angular.bootstrap(this.domElement, ['fileUploadApp']);
}
this.$injector.get('$rootScope').$broadcast('configurationChanged', {
libraryTitle: this.properties.libraryTitle,
rowLimit: this.properties.rowLimit
});
}
protected get propertyPaneSettings(): IPropertyPaneSettings {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('libraryTitle', {
label: strings.LibraryTitleLabel
}),
PropertyPaneTextField('rowLimit', {
label: strings.RowLimitLabel
})
]
}
]
}
]
};
}
protected get disableReactivePropertyChanges(): boolean {
return true;
}
}
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField,
IWebPartContext
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import { SPComponentLoader } from '@microsoft/sp-loader';
import * as angular from 'angular';
import './app/FileUploadModule';
import styles from './AngularFileUpload.module.scss';
import * as strings from 'angularFileUploadStrings';
import { IAngularFileUploadWebPartProps } from './IAngularFileUploadWebPartProps';
export default class AngularFileUploadWebPart extends BaseClientSideWebPart<IAngularFileUploadWebPartProps> {
private $injector: ng.auto.IInjectorService;
public constructor(context: IWebPartContext) {
super();
SPComponentLoader.loadCss('https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.min.css');
SPComponentLoader.loadCss('https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css');
}
public render(): void {
if (this.renderedOnce === false) {
this.domElement.innerHTML = `
<div class="${styles.angularFileUpload}">
<div class="${styles.container}" data-ng-controller="fileUploadCtrl as vm">
<div class="ms-Grid ms-fontColor-white ${styles.row} ${styles.headerBackground}">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12">
<h1 class="ms-fontSize-su ms-fontColor-white ${styles.textAlignCenter}">Welcome to Angular File Upload!</h1>
</div>
</div>
<div class="ms-Grid-row ${styles.whiteBackground} ${styles.row}">
<div class="ms-Grid-col ms-u-sm5 ms-u-md7 ms-u-lg7 ms-fontColor-black"><input type="file" value="vm.file.fileName" data-custom-file-change="vm.file" /></div>
<div class="ms-Grid-col ms-u-sm2 ms-u-md2 ms-u-lg2"><uif-spinner data-ng-if="vm.isUploading"></uif-spinner></div>
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg3"><uif-button uif-type="primary" data-ng-click="vm.upload()">Upload</uif-button></div>
</div>
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12">
<h1 class="ms-fontSize-su ms-fontColor-white ${styles.textAlignCenter}">{{vm.libraryTitle}}: Files uploaded by You</h1>
</div>
</div>
<div class="ms-Grid-row ${styles.whiteBackground} ${styles.row}">
<div class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12">
<uif-spinner data-ng-if="vm.isRemoving">Removing .....</uif-spinner>
</div>
</div>
<div class="ms-Grid-row ${styles.whiteBackground} ${styles.row}">
<div class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12">
<uif-table>
<uif-table-head>
<uif-table-row>
<uif-table-header>File Name</uif-table-header>
<uif-table-header>Modified</uif-table-header>
<uif-table-header>Action</uif-table-header>
</uif-table-row>
</uif-table-head>
<uif-table-body>
<uif-table-row data-ng-repeat="fileItem in vm.allFiles">
<uif-table-cell>{{fileItem.FileLeafRef}}</uif-table-cell>
<uif-table-cell>{{fileItem.Modified | isoToDateString}}</uif-table-cell>
<uif-table-cell><i class="ms-Icon ms-Icon--Delete ${styles.cursorPointer}" aria-hidden="true" data-ng-click="vm.deleteFile(fileItem)"></i></uif-table-cell>
</uif-table-row>
</uif-table-body>
</uif-table>
</div>
</div>
</div>
</div>
</div>`;
this.$injector = angular.bootstrap(this.domElement, ['fileUploadApp']);
}
this.$injector.get('$rootScope').$broadcast('configurationChanged', {
libraryTitle: this.properties.libraryTitle,
rowLimit: this.properties.rowLimit
});
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('libraryTitle', {
label: strings.LibraryTitleLabel
}),
PropertyPaneTextField('rowLimit', {
label: strings.RowLimitLabel
})
]
}
]
}
]
};
}
protected get disableReactivePropertyChanges(): boolean {
return true;
}
}

8
samples/angular-ngofficeuifabric-file-upload/src/webparts/angularFileUpload/IAngularFileUploadWebPartProps.ts
View File

@ -1,4 +1,4 @@
export interface IAngularFileUploadWebPartProps {
libraryTitle: string;
rowLimit: number;
}
export interface IAngularFileUploadWebPartProps {
libraryTitle: string;
rowLimit: number;
}

10
samples/angular-ngofficeuifabric-file-upload/src/webparts/angularFileUpload/app/FileUploadModule.ts
View File

@ -1,10 +1,10 @@
import * as angular from 'angular';
import 'ng-office-ui-fabric';
import { BaseService } from './services/BaseSvc';
import { FileUploadService } from './services/FileUploadSvc';
import { FileUploadCtrl } from './controllers/FileUploadCtrl';
import { CustomFileChange } from './directives/CustomFileChange';
import { IsoToDateString } from './filters/IsoToDateString';
import { BaseService } from './services/baseSvc';
import { FileUploadService } from './services/fileUploadSvc';
import { FileUploadCtrl } from './controllers/fileUploadCtrl';
import { CustomFileChange } from './directives/customFileChange';
import { IsoToDateString } from './filters/isoToDateString';
const fileUploadApp: ng.IModule = angular.module('fileUploadApp', [
'officeuifabric.core',

2
samples/angular-ngofficeuifabric-file-upload/src/webparts/angularFileUpload/app/controllers/fileUploadCtrl.ts
View File

@ -1,4 +1,4 @@
import { FileUploadService } from '../services/FileUploadSvc';
import { FileUploadService } from '../services/fileUploadSvc';
import { IFileItem } from "../../interfaces/IFileItem";
import { IFile } from "../../interfaces/IFile";
import { IError } from "../../interfaces/IError";

2
samples/angular-ngofficeuifabric-file-upload/src/webparts/angularFileUpload/app/directives/customFileChange.ts
View File

@ -14,7 +14,7 @@ export class CustomFileChange implements ng.IDirective {
reader.onload = (event: any): void => {
const fileModel: IFile = {
fileName: element[0].files[0].name,
fileName: element[0].files[0].name,
fileAsBuffer: event.target.result
};
modelSetter(scope, fileModel);

181
samples/angular-ngofficeuifabric-file-upload/src/webparts/angularFileUpload/app/services/BaseSvc.ts Normal file
View File

@ -0,0 +1,181 @@
import { IError } from "../../interfaces/IError";
import * as angular from 'angular';
export class BaseService {
public static $inject: string[] = ["$http", "$q"];
public baseUrl: string;
constructor(private $http: ng.IHttpService, private $q: ng.IQService) {
this.baseUrl = (<any>window)._spPageContextInfo.webAbsoluteUrl;
}
public getRequest(query?: string, endPoint?: string): ng.IPromise<any> {
const deferred: ng.IDeferred<any> = this.$q.defer();
this.$http({
url: endPoint || this.baseUrl + query,
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-Type": "application/json;odata=verbose"
}
}).then((response: any): void => {
if (response.data.d.results) {
deferred.resolve(response.data.d.results);
} else {
deferred.resolve(response.data.d);
}
}, (error: any) => {
const iError: IError = {
code: error.data.error.code,
message: error.data.error.message.value,
status: error.status,
statusText: error.statusText
};
deferred.reject(iError);
});
return deferred.promise;
}
public postRequest(url: string, requestBody: any, endPoint?: string): ng.IPromise<any> {
const deferred: ng.IDeferred<any> = this.$q.defer();
this.getFormDigestValue(this.baseUrl)
.then((requestDigest: string): ng.IPromise<ng.IHttpPromiseCallbackArg<any>> => {
return this.$http({
url: endPoint || this.baseUrl + url,
method: "POST",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": requestDigest,
"content-Type": "application/json;odata=verbose"
},
data: JSON.stringify(requestBody)
});
}).then((response: ng.IHttpPromiseCallbackArg<any>): void => {
deferred.resolve(response.data);
}, (error: any): void => {
const iError: IError = {
code: error.data.error.code,
message: error.data.error.message.value,
status: error.status,
statusText: error.statusText
};
deferred.reject(iError);
});
return deferred.promise;
}
public updateRequest(url: string, requestBody: any, eTag: string, endPoint?: string): ng.IPromise<{}> {
const deferred: ng.IDeferred<any> = this.$q.defer();
this.getFormDigestValue(this.baseUrl)
.then((requestDigest: string): ng.IPromise<ng.IHttpPromiseCallbackArg<any>> => {
return this.$http({
url: endPoint || this.baseUrl + url,
method: "POST",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": requestDigest,
"content-Type": "application/json;odata=verbose",
'IF-MATCH': eTag,
'X-HTTP-Method': 'MERGE'
},
data: JSON.stringify(requestBody)
});
}).then((response: {}): void => {
deferred.resolve();
}, (error: any): void => {
const iError: IError = {
code: error.data.error.code,
message: error.data.error.message.value,
status: error.status,
statusText: error.statusText
};
deferred.reject(iError);
});
return deferred.promise;
}
public deleteRequest(url: string, eTag: string, endPoint?: string): ng.IPromise<{}> {
const deferred: ng.IDeferred<any> = this.$q.defer();
this.getFormDigestValue(this.baseUrl)
.then((requestDigest: string): ng.IPromise<ng.IHttpPromiseCallbackArg<any>> => {
return this.$http({
url: endPoint || this.baseUrl + url,
method: "POST",
headers: {
'Accept': 'application/json;odata=nometadata',
'X-RequestDigest': requestDigest,
'IF-MATCH': eTag,
'X-HTTP-Method': 'DELETE'
}
});
}).then((response: {}): void => {
deferred.resolve();
}, (error: any): void => {
const iError: IError = {
code: error.data.error.code,
message: error.data.error.message.value,
status: error.status,
statusText: error.statusText
};
deferred.reject(iError);
});
return deferred.promise;
}
public fileUploadRequest(url: string, file: ArrayBuffer, endPoint?: string): ng.IPromise<any> {
const deferred: ng.IDeferred<any> = this.$q.defer();
this.getFormDigestValue(this.baseUrl)
.then((requestDigest: string): ng.IPromise<ng.IHttpPromiseCallbackArg<any>> => {
return this.$http({
url: endPoint || this.baseUrl + url,
method: "POST",
transformRequest: angular.identity,
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": requestDigest,
"content-Type": undefined
},
data: ArrayBuffer
});
}).then((response: ng.IHttpPromiseCallbackArg<any>): void => {
deferred.resolve(response.data);
}, (error: any): void => {
const iError: IError = {
code: error.data.error.code,
message: error.data.error.message.value,
status: error.status,
statusText: error.statusText
};
deferred.reject(iError);
});
return deferred.promise;
}
private getFormDigestValue(webUrl: string): ng.IPromise<string> {
const deferred: ng.IDeferred<string> = this.$q.defer();
this.$http({
url: webUrl + '/_api/contextinfo',
method: 'POST',
headers: {
'Accept': 'application/json;odata=nometadata'
}
})
.then((digestResult: ng.IHttpPromiseCallbackArg<{ FormDigestValue: string }>): void => {
deferred.resolve(digestResult.data.FormDigestValue);
}, (error: any): void => {
const iError: IError = {
code: error.data.error.code,
message: error.data.error.message.value,
status: error.status,
statusText: error.statusText
};
deferred.reject(iError);
});
return deferred.promise;
}
}

16
samples/angular-ngofficeuifabric-file-upload/src/webparts/angularFileUpload/loc/en-us.js vendored
View File

@ -1,9 +1,9 @@
define([], function() {
return {
"PropertyPaneDescription": "Description",
"BasicGroupName": "Group Name",
"DescriptionFieldLabel": "Description Field",
"LibraryTitleLabel": "Library Name",
"RowLimitLabel": "Row Limit"
}
define([], function() {
return {
"PropertyPaneDescription": "Description",
"BasicGroupName": "Group Name",
"DescriptionFieldLabel": "Description Field",
"LibraryTitleLabel": "Library Name",
"RowLimitLabel": "Row Limit"
}
});

24
samples/angular-ngofficeuifabric-file-upload/src/webparts/angularFileUpload/loc/mystrings.d.ts vendored
View File

@ -1,12 +1,12 @@
declare interface IAngularFileUploadStrings {
PropertyPaneDescription: string;
BasicGroupName: string;
DescriptionFieldLabel: string;
LibraryTitleLabel: string;
RowLimitLabel: string;
}
declare module 'angularFileUploadStrings' {
const strings: IAngularFileUploadStrings;
export = strings;
}
declare interface IAngularFileUploadStrings {
PropertyPaneDescription: string;
BasicGroupName: string;
DescriptionFieldLabel: string;
LibraryTitleLabel: string;
RowLimitLabel: string;
}
declare module 'angularFileUploadStrings' {
const strings: IAngularFileUploadStrings;
export = strings;
}

16
samples/angular-ngofficeuifabric-file-upload/src/webparts/angularFileUpload/tests/AngularFileUpload.test.ts
View File

@ -1,7 +1,9 @@
import * as assert from 'assert';
describe('AngularFileUploadWebPart', () => {
it('should do something', () => {
assert.ok(true);
});
});
/// <reference types="mocha" />
import { assert } from 'chai';
describe('AngularFileUploadWebPart', () => {
it('should do something', () => {
assert.ok(true);
});
});

24
samples/angular-ngofficeuifabric-file-upload/tsconfig.json
View File

@ -1,9 +1,15 @@
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"jsx": "react",
"declaration": true,
"sourceMap": true
}
}
{
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "commonjs",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"types": [
"es6-promise",
"es6-collections",
"webpack-env"
]
}
}

16
samples/angular-ngofficeuifabric-file-upload/typings/@ms/odsp.d.ts vendored
View File

@ -1,10 +1,8 @@
// Type definitions for Microsoft ODSP projects
// Project: ODSP
/// <reference path="odsp-webpack.d.ts" />
/* Global definition for DEBUG builds */
declare const DEBUG: boolean;
/* Global definition for UNIT_TEST builds */
// Type definitions for Microsoft ODSP projects
// Project: ODSP
/* Global definition for UNIT_TEST builds
Code that is wrapped inside an if(UNIT_TEST) {...}
block will not be included in the final bundle when the
--ship flag is specified */
declare const UNIT_TEST: boolean;

21
samples/angular-ngofficeuifabric-file-upload/typings/tsd.d.ts vendored
View File

@ -1,20 +1 @@
/// <reference path="@ms/odsp.d.ts" />
/// <reference path="@ms/odsp-webpack.d.ts" />
/// <reference path="assertion-error/assertion-error.d.ts" />
/// <reference path="chai/chai.d.ts" />
/// <reference path="es6-collections/es6-collections.d.ts" />
/// <reference path="es6-promise/es6-promise.d.ts" />
/// <reference path="lodash/lodash.d.ts" />
/// <reference path="mocha/mocha.d.ts" />
/// <reference path="node/node.d.ts" />
/// <reference path="react/react.d.ts" />
/// <reference path="react/react-addons-shallow-compare.d.ts" />
/// <reference path="react/react-addons-test-utils.d.ts" />
/// <reference path="react/react-addons-update.d.ts" />
/// <reference path="react/react-dom.d.ts" />
/// <reference path="systemjs/systemjs.d.ts" />
/// <reference path="whatwg-fetch/whatwg-fetch.d.ts" />
/// <reference path="knockout/knockout.d.ts" />
/// <reference path="combokeys/combokeys.d.ts" />
/// <reference path="angularjs/angular.d.ts" />
/// <reference path="jquery/jquery.d.ts" />
/// <reference path="@ms/odsp.d.ts" />