Skip to content

Commit c367cd6

Browse files
scatcherscatcher
committed
Release 7.0.0
1 parent 89816bd commit c367cd6

File tree

4 files changed

+119
-60
lines changed

4 files changed

+119
-60
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-point-attachments",
3-
"version": "6.0.1",
3+
"version": "7.0.0",
44
"description": "Simple attachments directive for angular-point.",
55
"scripts": {
66
"build": "webpack"
@@ -9,6 +9,7 @@
99
"angular": "^1.6.0",
1010
"angular-point": "^6.4.0",
1111
"lodash": "^4.17.4",
12+
"ng-file-upload": "^12.2.13",
1213
"toastr": "^2.1.2"
1314
},
1415
"devDependencies": {

‎src/apAttachments.html

Lines changed: 60 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,62 @@
11
<div>
2-
<style type="text/css">
3-
.ap-attachments-container {
4-
min-height: 200px;
5-
height: 110px;
6-
}
7-
</style>
8-
<div class="ap-attachments-container">
9-
<div ng-if="!$ctrl.uploading">
10-
<div class="input-group">
11-
<input type="file" id="ap-file" name="file" class="form-control">
12-
<span class="input-group-btn">
13-
<button class="btn btn-primary" type="button" ng-click="$ctrl.uploadAttachment()">Add</button>
14-
</span>
15-
</div>
16-
<p class="help-block">Select the files you want to upload and then click the Add button.</p>
17-
</div>
18-
<div ng-show="$ctrl.uploading" class="alert alert-info txt-align-center">
19-
<i class="fa fa-spinner fa-spin"></i>processing request...</div>
2+
<style type="text/css">
3+
.ap-drop-box {
4+
background: #f8f8f8;
5+
border: 5px dashed #ddd;
6+
width: 100%;
7+
height: 80px;
8+
text-align: center;
9+
padding-top: 25px;
10+
}
11+
.ap-dragover {
12+
border: 5px dashed blue;
13+
}
14+
.ap-attachments-container {
15+
min-height: 200px;
16+
}
17+
</style>
18+
<div class="ap-attachments-container">
19+
<div ng-if="!$ctrl.uploading">
20+
<div
21+
ngf-drop
22+
ng-model="$ctrl.files"
23+
class="ap-drop-box"
24+
ngf-drag-over-class="'ap-dragover'"
25+
ngf-multiple="true"
26+
ngf-allow-dir="false"
27+
ngf-change="$ctrl.upload($files)"
28+
>
29+
Drop files here or
30+
<a ngf-select ngf-change="$ctrl.upload($files)" class="pointer"><i class="fa fa-upload"></i> click</a>
31+
to upload. You can also paste (Ctrl + v) a screenshot if you click in here first.
32+
</div>
33+
<div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>
34+
</div>
35+
<div ng-show="$ctrl.uploading" class="alert alert-info txt-align-center">
36+
<i class="fa fa-spinner fa-spin"></i>processing request...
37+
</div>
2038

21-
<!---==============LIST OF ATTACHMENTS=============-->
22-
<div ng-if="$ctrl.listItem.attachments.length > 0">
23-
<hr class="hr-sm">
24-
<h4>
25-
<small>Attachments</small>
26-
</h4>
27-
<ul class="list-unstyled">
28-
<li ng-repeat="attachment in $ctrl.listItem.attachments">
29-
<a href="{{ attachment }}" target="_blank">{{ $ctrl.fileName(attachment) }}</a>
30-
<button type="button" class="btn btn-link" ng-click="$ctrl.deleteAttachment(attachment)" title="Delete this attachment">
31-
<i class="fa fa-times red"></i>
32-
</button>
33-
</li>
34-
</ul>
35-
</div>
36-
</div>
37-
</div>
39+
<!---==============LIST OF ATTACHMENTS=============-->
40+
<div ng-if="$ctrl.listItem.attachments.length > 0">
41+
<hr class="hr-sm" />
42+
<ul class="list-unstyled">
43+
<li ng-repeat="attachment in $ctrl.listItem.attachments">
44+
<a href="{{ attachment }}" target="_blank">{{ $ctrl.fileName(attachment) }} </a>
45+
<button
46+
type="button"
47+
class="btn btn-link"
48+
ng-click="$ctrl.deleteAttachment(attachment)"
49+
title="Delete this attachment"
50+
>
51+
<i class="fa fa-trash"></i>
52+
</button>
53+
<div ng-if="$ctrl.isImage(attachment)">
54+
<a href="{{ attachment }}" target="_blank">
55+
<image ng-src="{{ attachment }}"></image>
56+
</a>
57+
</div>
58+
</li>
59+
</ul>
60+
</div>
61+
</div>
62+
</div>

‎src/apAttachments.ts

Lines changed: 54 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { IQService, IScope } from 'angular';
12
import { ListItem } from 'angular-point';
23
import * as _ from 'lodash';
34
import * as toastr from 'toastr';
@@ -8,12 +9,13 @@ export interface IControllerScope {
89
}
910

1011
export class APAttachmentsController {
11-
static $inject = [];
12+
static $inject = ['$scope', '$q', 'Upload'];
1213
changeEvent: Function;
1314
listItem: ListItem<any>;
1415
uploading = false;
16+
files: File[] = [];
1517

16-
constructor() {}
18+
constructor(private $scope: IScope, private $q: IQService, private Upload) {}
1719

1820
$onInit() {
1921
/** Can't manipulate attachments for listItems that haven't been saved to the server */
@@ -42,6 +44,17 @@ export class APAttachmentsController {
4244
return attachment.substr(index);
4345
}
4446

47+
isImage(attachment) {
48+
let isImage = false;
49+
const fileTypes = ['png', 'gif', 'jpg', 'jpeg'];
50+
fileTypes.forEach(type => {
51+
if (attachment.toLowerCase().indexOf(`.${type}`) > -1) {
52+
isImage = true;
53+
}
54+
});
55+
return isImage;
56+
}
57+
4558
/**
4659
* Events don't automatically sync with the cache so we need to get
4760
* the updated list item which will extend the changes to our local referenced list
@@ -56,26 +69,46 @@ export class APAttachmentsController {
5669
});
5770
}
5871

59-
uploadAttachment() {
60-
const el = document.getElementById('ap-file') as HTMLInputElement;
61-
const file = el.files[0];
72+
upload(files: File[]) {
73+
if (files && files.length > 0) {
74+
const promises = [];
75+
this.uploading = true;
76+
files
77+
.map(file => {
78+
if (file.name.indexOf('image.') > -1) {
79+
// Image pasted from clipboard so make it unique
80+
const uniqueName = file.name.replace(
81+
'image',
82+
`image-${new Date()
83+
.toJSON()
84+
// Remove illegal characters
85+
.replace(/:/gi, '-')
86+
.replace('.', '-')}`,
87+
);
88+
return new File([file], uniqueName);
89+
} else {
90+
return file;
91+
}
92+
})
93+
.forEach(file => promises.push(this.listItem.addAttachment(file)));
6294

63-
this.uploading = true;
64-
this.listItem.addAttachment(file).then(
65-
() => {
66-
this.uploading = false;
67-
toastr.success('File successfully uploaded');
68-
this.synchronizeRemoteChanges();
69-
},
70-
err => {
71-
this.uploading = false;
72-
if (_.isString(err)) {
73-
toastr.error(err);
74-
} else {
75-
toastr.error('There was a problem completing the upload.');
76-
}
77-
},
78-
);
95+
this.$q.all(promises).then(
96+
() => {
97+
this.uploading = false;
98+
this.files = [];
99+
toastr.success('File successfully uploaded');
100+
this.synchronizeRemoteChanges();
101+
},
102+
err => {
103+
this.uploading = false;
104+
if (_.isString(err)) {
105+
toastr.error(err);
106+
} else {
107+
toastr.error('There was a problem completing the upload.');
108+
}
109+
},
110+
);
111+
}
79112
}
80113
}
81114

‎src/index.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { AngularPointModule } from 'angular-point';
2-
import {APAttachmentsComponent} from './apAttachments';
2+
import 'ng-file-upload';
3+
import { APAttachmentsComponent } from './apAttachments';
34

4-
AngularPointModule
5-
.component('apAttachments', APAttachmentsComponent);
5+
AngularPointModule.component('apAttachments', APAttachmentsComponent);

0 commit comments

Comments
 (0)