diff --git a/CHANGELOG.md b/CHANGELOG.md
index 92701e2..9acc68a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file. See [standa
### Bug Fixes
+* include error information on the uploadStateChanged event ([#237](https://github.com/aberezkin/ng2-image-upload/issues/237)) (TODO - Include commit info)
* delete image error ([#211](https://github.com/aberezkin/ng2-image-upload/issues/211)) ([47c6099](https://github.com/aberezkin/ng2-image-upload/commit/47c6099))
* emit uploadStateChanged when file upload fails due to size ([#212](https://github.com/aberezkin/ng2-image-upload/issues/212)) ([30e5f37](https://github.com/aberezkin/ng2-image-upload/commit/30e5f37))
* fixed FileHolder.serverResponse not being set correctly ([59017db](https://github.com/aberezkin/ng2-image-upload/commit/59017db)), closes [#142](https://github.com/aberezkin/ng2-image-upload/issues/142)
diff --git a/docs/assets/readme.md b/docs/assets/readme.md
index df5a44b..b10a83b 100644
--- a/docs/assets/readme.md
+++ b/docs/assets/readme.md
@@ -17,7 +17,7 @@ yarn add angular2-image-upload
### Usage
In your `app.module.ts` import it using `@NgModule` decorator.
-
+
````typescript
import { ImageUploadModule } from "angular2-image-upload";
@@ -40,8 +40,8 @@ You can use bindings to configure this element for your needs.
`[max]="100"` - is the maximum number of pictures that can be uploaded through this element. Default is 100.
-`[url]="'example.com/images/upload'"` - this is the url which can handle POST queries with `multipart/form-data`
-Content-Type. The query has a single field called `image`.
+`[url]="'example.com/images/upload'"` - this is the url which can handle POST queries with `multipart/form-data`
+Content-Type. The query has a single field called `image`.
`[partName]="'your-field-name'"` - if you need to customize the default POST field `image`
@@ -57,11 +57,11 @@ Content-Type. The query has a single field called `image`.
#### Custom headers
-If you need to send some headers with your request (for example `Authorization` headers),
+If you need to send some headers with your request (for example `Authorization` headers),
you can use `[headers]` directive like this.
````html
-
@@ -112,8 +112,8 @@ you can use `[headers]` directive like this.
**The class must be accessible to the ImageUploadComponent**, so either pop it in your global stylesheet, or if you need to put it in a scoped stylesheet prefix with `/deep/`:
`/deep/ .customClass { ... }`
-
-**Note:** `.img-ul-*` classes which are overridden with new styles.
+
+**Note:** `.img-ul-*` classes which are overridden with new styles.
#### Custom Style
@@ -140,7 +140,7 @@ customStyle = {
}
};
````
-
+
**Note:** `selectButton`, `clearButton`, `layout` and `previewPanel` are optional properties.
#### Events
@@ -149,7 +149,7 @@ customStyle = {
`(removed)="onRemoved($event)"` - this event is fired when remove or clear button was clicked and the image preview was removed. *Note that this library doesn't handle deletion from server so you should do it yourself*. Event passed as the argument is the exact same object that was passed to the `(imageUploaded)` callback when image was added so you can access `serverResponse` to get a key to delete your image from server.
-`(uploadStateChanged)="onUploadStateChanged($event)"` - this event is fired when image upload state was changed. Event is just a boolean that represents the uploading state. Image upload state is `true` when and only when component awaits the response from the server, and `false` otherwise. You can use it, for example, to disable send button in your form until all images are uploaded.
+`(uploadStateChanged)="onUploadStateChanged($event)"` - this event is fired when image upload state was changed. Event is just a boolean that represents the uploading state. Image upload state is `true` when and only when component awaits the response from the server, and `false` otherwise. You can use it, for example, to disable send button in your form until all images are uploaded. In case occurs any error while uploading the message, the $error state boolean is `true` and the $errorMessage is filled with the error message.
In the final state it should look something like this:
@@ -162,7 +162,7 @@ In the final state it should look something like this:
[dropBoxMessage]="'Drop your images here!'"
[extensions]="['jpg','png','gif']"
[uploadedFiles]="['http://example.com/path/to/my/file']"
- [class]="'customClass'"
+ [class]="'customClass'"
(removed)="onRemoved($event)"
(uploadFinished)="onUploadFinished($event)"
(uploadStateChanged)="onUploadStateChanged($event)">
diff --git a/docs/main.js b/docs/main.js
index 13b8e55..48843b2 100644
--- a/docs/main.js
+++ b/docs/main.js
@@ -355,7 +355,7 @@ var ImageUploadComponent = /** @class */ (function () {
/** @type {?} */
var filesToUploadNum = files.length > remainingSlots ? remainingSlots : files.length;
if (this.url && filesToUploadNum !== 0) {
- this.uploadStateChanged.emit(true);
+ this.uploadStateChanged.emit({state:true, error:false, errorMessage:''});
}
this.fileCounter += filesToUploadNum;
this.showFileTooLargeMessage = false;
@@ -376,7 +376,8 @@ var ImageUploadComponent = /** @class */ (function () {
fileHolder.pending = false;
this.uploadFinished.emit(fileHolder);
if (--this.pendingFilesCounter === 0) {
- this.uploadStateChanged.emit(false);
+ let errorStatus = response.status == 200;
+ this.uploadStateChanged.emit({state:false, error:errorStatus, errorMessage:errorStatus? response.response:''});
}
};
/**
@@ -435,7 +436,7 @@ var ImageUploadComponent = /** @class */ (function () {
this_1.fileCounter--;
this_1.inputElement.nativeElement.value = '';
this_1.showFileTooLargeMessage = true;
- this_1.uploadStateChanged.emit(false);
+ this_1.uploadStateChanged.emit({state:false, error:true, errorMessage:this_1.fileTooLargeMessage});
return [2 /*return*/, "continue"];
}
return [4 /*yield*/, this_1.beforeUpload({ file: file, url: this_1.url, abort: false })];
diff --git a/projects/ng2-image-upload/src/lib/image-upload/image-upload.component.ts b/projects/ng2-image-upload/src/lib/image-upload/image-upload.component.ts
index 2f01f46..9362137 100644
--- a/projects/ng2-image-upload/src/lib/image-upload/image-upload.component.ts
+++ b/projects/ng2-image-upload/src/lib/image-upload/image-upload.component.ts
@@ -34,7 +34,7 @@ export class ImageUploadComponent implements OnInit, OnChanges {
@Input() withCredentials = false;
@Input() uploadedFiles: string[] | Array<{ url: string, fileName: string, blob?: Blob }> = [];
@Output() removed = new EventEmitter();
- @Output() uploadStateChanged = new EventEmitter();
+ @Output() uploadStateChanged = new EventEmitter