Skip to content

Commit abec375

Browse files
rikschenninkrikschennink
committed
initial commit
0 parents  commit abec375

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+13082
-0
lines changed

‎.editorconfig

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Editor configuration, see http://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
max_line_length = off
13+
trim_trailing_whitespace = false

‎.gitignore

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
4+
# compiled output
5+
/.ng_pkg_build
6+
/dist
7+
/tmp
8+
/out-tsc
9+
dist.tgz
10+
11+
# dependencies
12+
/node_modules
13+
14+
# IDEs and editors
15+
/.idea
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# IDE - VSCode
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
30+
# misc
31+
/.sass-cache
32+
/connect.lock
33+
/coverage
34+
/libpeerconnection.log
35+
npm-debug.log
36+
yarn-error.log
37+
testem.log
38+
/typings
39+
40+
# System Files
41+
.DS_Store
42+
Thumbs.db

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2018 PQINA | Rik Schennik <rik@pqina.nl>
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
# Angular FilePond
2+
3+
Angular FilePond is a handy adapter component for [FilePond](https://github.com/pqina/filepond), a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
4+
5+
[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/pqina/ngx-filepond/blob/master/LICENSE)
6+
[![npm version](https://badge.fury.io/js/ngx-filepond.svg)](https://www.npmjs.com/package/ngx-filepond)
7+
[![Donate with PayPal](https://img.shields.io/badge/donate-PayPal.me-pink.svg)](https://www.paypal.me/rikschennink/10)
8+
9+
<img src="https://github.com/pqina/filepond-github-assets/blob/master/filepond-animation-01.gif?raw=true" width="370" alt=""/>
10+
11+
## Installation
12+
13+
Install FilePond component from npm.
14+
15+
```bash
16+
npm install ngx-filepond --save
17+
```
18+
19+
Import `FilePondModule` and if needed register any plugins. Please note that plugins need to be [installed from npm](https://pqina.nl/filepond/docs/patterns/plugins/introduction/#installing-plugins) separately.
20+
21+
Add FilePond styles path `./node_modules/filepond/dist/filepond.min.css` to the `build.options.styles` property in `angular.json`
22+
23+
```ts
24+
// app.module.ts
25+
import { BrowserModule } from '@angular/platform-browser';
26+
import { NgModule } from '@angular/core';
27+
import { AppComponent } from './app.component';
28+
29+
// import filepond module
30+
import { FilePondModule, registerPlugin } from 'ngx-filepond';
31+
32+
// import and register filepond file type validation plugin
33+
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
34+
registerPlugin(FilePondPluginFileValidateType);
35+
36+
@NgModule({
37+
declarations: [
38+
AppComponent
39+
],
40+
imports: [
41+
BrowserModule,
42+
FilePondModule // add filepond module here
43+
],
44+
providers: [],
45+
bootstrap: [AppComponent]
46+
})
47+
export class AppModule { }
48+
```
49+
50+
```html
51+
<!-- app.component.html -->
52+
<file-pond #myPond
53+
[options]="pondOptions"
54+
[files]="pondFiles"
55+
(oninit)="pondHandleInit()"
56+
(onaddfile)="pondHandleAddFile($event)">
57+
</file-pond>
58+
```
59+
60+
```ts
61+
// app.component.ts
62+
import { Component, ViewChild } from '@angular/core';
63+
64+
@Component({
65+
selector: 'app-root',
66+
templateUrl: './app.component.html',
67+
styleUrls: ['./app.component.css']
68+
})
69+
70+
export class AppComponent {
71+
72+
@ViewChild('myPond') myPond: any;
73+
74+
pondOptions = {
75+
class: 'my-filepond',
76+
multiple: true,
77+
labelIdle: 'Drop files here',
78+
acceptedFileTypes: 'image/jpeg, image/png'
79+
}
80+
81+
pondFiles = [
82+
'index.html'
83+
]
84+
85+
pondHandleInit() {
86+
console.log('FilePond has initialised', this.myPond);
87+
}
88+
89+
pondHandleAddFile(event: any) {
90+
console.log('A file was added', event);
91+
}
92+
}
93+
```
94+
95+
[Read the docs for more information](https://pqina.nl/filepond/docs/patterns/frameworks/angular/)

‎angular.json

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"ngx-filepond": {
7+
"root": "",
8+
"sourceRoot": "src",
9+
"projectType": "application",
10+
"prefix": "app",
11+
"schematics": {},
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist/ngx-filepond",
17+
"index": "src/index.html",
18+
"main": "src/main.ts",
19+
"polyfills": "src/polyfills.ts",
20+
"tsConfig": "src/tsconfig.app.json",
21+
"assets": [
22+
"src/favicon.ico",
23+
"src/assets"
24+
],
25+
"styles": [
26+
"./node_modules/filepond/dist/filepond.min.css",
27+
"src/styles.css"
28+
],
29+
"scripts": []
30+
},
31+
"configurations": {
32+
"production": {
33+
"fileReplacements": [
34+
{
35+
"replace": "src/environments/environment.ts",
36+
"with": "src/environments/environment.prod.ts"
37+
}
38+
],
39+
"optimization": true,
40+
"outputHashing": "all",
41+
"sourceMap": false,
42+
"extractCss": true,
43+
"namedChunks": false,
44+
"aot": true,
45+
"extractLicenses": true,
46+
"vendorChunk": false,
47+
"buildOptimizer": true
48+
}
49+
}
50+
},
51+
"serve": {
52+
"builder": "@angular-devkit/build-angular:dev-server",
53+
"options": {
54+
"browserTarget": "ngx-filepond:build"
55+
},
56+
"configurations": {
57+
"production": {
58+
"browserTarget": "ngx-filepond:build:production"
59+
}
60+
}
61+
},
62+
"extract-i18n": {
63+
"builder": "@angular-devkit/build-angular:extract-i18n",
64+
"options": {
65+
"browserTarget": "ngx-filepond:build"
66+
}
67+
},
68+
"test": {
69+
"builder": "@angular-devkit/build-angular:karma",
70+
"options": {
71+
"main": "src/test.ts",
72+
"polyfills": "src/polyfills.ts",
73+
"tsConfig": "src/tsconfig.spec.json",
74+
"karmaConfig": "src/karma.conf.js",
75+
"styles": [
76+
"src/styles.css"
77+
],
78+
"scripts": [],
79+
"assets": [
80+
"src/favicon.ico",
81+
"src/assets"
82+
]
83+
}
84+
},
85+
"lint": {
86+
"builder": "@angular-devkit/build-angular:tslint",
87+
"options": {
88+
"tsConfig": [
89+
"src/tsconfig.app.json",
90+
"src/tsconfig.spec.json"
91+
],
92+
"exclude": [
93+
"**/node_modules/**"
94+
]
95+
}
96+
}
97+
}
98+
},
99+
"ngx-filepond-e2e": {
100+
"root": "e2e/",
101+
"projectType": "application",
102+
"architect": {
103+
"e2e": {
104+
"builder": "@angular-devkit/build-angular:protractor",
105+
"options": {
106+
"protractorConfig": "e2e/protractor.conf.js",
107+
"devServerTarget": "ngx-filepond:serve"
108+
}
109+
},
110+
"lint": {
111+
"builder": "@angular-devkit/build-angular:tslint",
112+
"options": {
113+
"tsConfig": "e2e/tsconfig.e2e.json",
114+
"exclude": [
115+
"**/node_modules/**"
116+
]
117+
}
118+
}
119+
}
120+
}
121+
},
122+
"defaultProject": "ngx-filepond"
123+
}

‎e2e/protractor.conf.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// Protractor configuration file, see link for more information
2+
// https://github.com/angular/protractor/blob/master/lib/config.ts
3+
4+
const { SpecReporter } = require('jasmine-spec-reporter');
5+
6+
exports.config = {
7+
allScriptsTimeout: 11000,
8+
specs: [
9+
'./src/**/*.e2e-spec.ts'
10+
],
11+
capabilities: {
12+
'browserName': 'chrome'
13+
},
14+
directConnect: true,
15+
baseUrl: 'http://localhost:4200/',
16+
framework: 'jasmine',
17+
jasmineNodeOpts: {
18+
showColors: true,
19+
defaultTimeoutInterval: 30000,
20+
print: function() {}
21+
},
22+
onPrepare() {
23+
require('ts-node').register({
24+
project: require('path').join(__dirname, './tsconfig.e2e.json')
25+
});
26+
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27+
}
28+
};

‎e2e/src/app.e2e-spec.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { AppPage } from './app.po';
2+
3+
describe('workspace-project App', () => {
4+
let page: AppPage;
5+
6+
beforeEach(() => {
7+
page = new AppPage();
8+
});
9+
10+
it('should display welcome message', () => {
11+
page.navigateTo();
12+
expect(page.getParagraphText()).toEqual('Welcome to app!');
13+
});
14+
});

‎e2e/src/app.po.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { browser, by, element } from 'protractor';
2+
3+
export class AppPage {
4+
navigateTo() {
5+
return browser.get('/');
6+
}
7+
8+
getParagraphText() {
9+
return element(by.css('app-root h1')).getText();
10+
}
11+
}

‎e2e/tsconfig.e2e.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"extends": "../tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "../out-tsc/app",
5+
"module": "commonjs",
6+
"target": "es5",
7+
"types": [
8+
"jasmine",
9+
"jasminewd2",
10+
"node"
11+
]
12+
}
13+
}

0 commit comments

Comments
 (0)