Create ImageService which should send POST queries to a user defined URL.

Hi there,
Your module is fantastic, a pleasure to use. This is a question rather than an issue.
I can see a lot of useful attributes in the event class relating to the image file but I need to get the latitude and longitude from the photo.
Just wondering if there was an easy way you could build this functionality in please to allow the image to be queried for its coordinates?
Many thanks,
Katie

Create interface for image deleting.

This issue depends on #1.

Hi,

Brilliant work. I've successfully added to my project, saving uploaded items to server, but I'm unsure how to access the files / file names.

Could you provide further info on how to get the file / show json response in the (onFileUploadFinish)="imageUploaded($event)" callback?

Many thanks for any help on this!

When I try to ng build -prod my project this error occurs:

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the funct
ion or lambda with a reference to an exported function, resolving symbol Injectable in C:/Users/NightW/Desktop/app-ng2/node_modules/angular2-image-upload/node_
modules/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in C:/Users/NightW/Desktop/app-ng2/node_modules/angular2-image-upload/node_modules/
@angular/core/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in C:/Users/NightW/Desktop/app-ng2/node_modules/angular2-image-upload/node_modules/@angular/c
ore/src/di/opaque_token.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:\Users\NightW\Desktop\app-ng2\src'
@ ./src/main.ts 4:0-74
@ multi ./src/main.t

I updated the dependencies at angular 4.0.0rc.1, could this be the problem?

"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/material": "^2.0.0-beta.2",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"angular2-image-upload": "^0.4.1",
"core-js": "^2.4.1",
"firebase": "^3.7.3",
"hammerjs": "^2.0.8",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.0.0",
"@angular/compiler-cli": "^4.0.0",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}

what URL do i use to upload to firebase3, the storage bucket url doesnt seem to work.

Please help,

Hi,

I'm using the image uploader in conjunction with an Angular CLI generated project, after importing the component into my app.module.ts, and adding it to a component for testing I'm running into some build issues.

Error encountered resolving symbol values statically. Calling function 'ImageUploadModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in..

My app.module.ts looks like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AlertModule } from 'ng2-bootstrap';
import { ImageUploadModule } from 'angular2-image-upload';

import { AppComponent } from './app.component';
import { ArticlesComponent } from './articles.component';
import { ArticlesService } from './articles.service';
import { ImageService } from './images.service';

import { CarouselModule } from 'ng2-bootstrap';

import { AppRoutingModule } from './app-routing.module';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    ArticlesComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AlertModule.forRoot(),
    AppRoutingModule,
    CarouselModule.forRoot(),
    ImageUploadModule.forRoot()
  ],
  providers: [
    ArticlesService,
    ImageService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

ERROR in Error encountered resolving symbol values statically. Calling function 'ImageUploadModule', function calls are not supported. Consider replacing the function or lambda with a r
eference to an exported function, resolving symbol AppModule in C:/Users/nitkumar/web/src/app/app.module.ts, resolving symbol AppModule in C:/Users/nitkumar/web/src/app/app.module.ts

How to edit style for the form upload?

Great module, almost works beautifully out of the box.

Can we somehow find a way to hack our Authorization header into the post request on the service?

Many image upload usage are via logged in users through an API, which requires a token to be passed in the Authorisation header.

While on the below case upload image mot working.

1. Upload a image (single image).
2. Remove that image.
3. Re-upload the same image.

It would upload the same image on second time.

Is there any reason to use XHR in the image service instead of passing by the Angular Http API? The code should be simplified and the RequestOptionsArgs should be used to pass headers and other options like 'withCredentials'. Moreover, headers / options should also be managed by a user defined http provider.

import {Injectable} from "@angular/core";
import {Http, RequestOptionsArgs, Response} from "@angular/http";
import {Observable} from "rxjs/Observable";

export interface Header {
  header: string;
  value: string;
}

@Injectable()
export class ImageService {

  constructor(private http:Http) {}
  public postImage(url: string, image: File, headers?: Header[]): Observable<Response> {
    if (!url || url === '') {
      throw new Error('Url is not set! Please set it before doing queries');
    }

    let options: RequestOptionsArgs = new RequestOptionsArgs();
    if (headers) {
      for (let header of headers)
        options.headers.append(header.header, header.value);
    }

    let formData: FormData = new FormData();
    formData.append('image', image);

    return this.http.post(url, formData, options);
  }
}

Hello! do you have any function to auto upload image. example [uploaded]="image1,image2" it better to use it with Modify Form. Thanks

Suppose I receive 10 images , out of those 10 I replace two specific images with new images and send back the server call

Hi Arkadii,

Updated Angular2 to latest build (2.3.1) and am getting this error on compile.

Error encountered resolving symbol values statically. Calling function 'ImageUploadModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /website.com/src/app/app.module.ts, resolving symbol AppModule in /website.com/src/app/app.module.ts

Any clue what could be wrong?

Wrap component and directive into a single module which user can import into a project.

Core js is only needed to build the lib, so it's better to place in dev dependencies.

I am using custom upload method. It's possible to disable select button while uploading ?

There are several problems with publishing this library.

I can't understand how to build this library properly so it can be imported.

At the moment when I'm trying to import it in an angular-cli generated project, an error comes up saying that app-root selector is not defined. Which is very strange and does not tells anything about the source of the problem and how to solve it.

how do I describe angular2-image-upload at systemjs.config.js ??

I'm using anguar-quickstart 1.0.0

Hi, it would be nice if you add @input() for supported images in ImageUploadComponent,
because new it accepts all images, even those what are not supported by server, and can lead to some errors.

Now I did little hack, in your component ImageUploadComponent, where ImageUploadComponent.decorators in template property <div class=\"image-upload\"\n fileDrop\n [accept]=\"['image/*']\" change to <div class=\"image-upload\"\n fileDrop\n [accept]=\"['image/png, image/jpg, image/jpeg']\"> and in <input\n type=\"file\"\n accept=\"image/*"\n to <input\n type=\"file\"\n accept=\"image/png, image/jpg, image/jpeg\"\n ,
after that seems to work, but every time I update via npm have to change again.

Thanks :)

In the service file, give an option to toggle the withCredentials option like you have given the header option. I am not able to send my cookie credentials in the request header. But if I add the xhr.withCredentials in the image-upload.service.js it is working fine. Please provide an update on this bug.

ImageService.prototype.postImage = function (image, headers) {
var _this = this;
this.checkUrl();
return Observable_1.Observable.create(function (observer) {
var formData = new FormData();
var xhr = new XMLHttpRequest();
xhr.withCredentials = true; //after adding this, it is working fine
formData.append('image', image);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
observer.next(xhr.response);
observer.complete();
}
else {
observer.error(xhr.response);
}
}
};
xhr.open('POST', _this.url, true);
if (headers)
for (var _i = 0, headers_1 = headers; _i < headers_1.length; _i++) {
var header = headers_1[_i];
xhr.setRequestHeader(header.header, header.value);
}
xhr.send(formData);
});
};

The component is working well except for when I do the AOT compile with following exception: Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable... in node_modules/angular2-image-upload/node_modules/@angular/core/src/di/opaque_token.d.ts, resolving symbol OpaqueToken

Most recent version published to NPM is 0.6.0 but the package.json in this repo says 0.5.0

I would like to request an input field to change the name of the image upload and to possibly add form data like a user id or smth

The typescript compiler complains with:
src/image.service.ts(15,66): error TS1015: Parameter cannot have question mark and initializer.

I removed the initializer = 'image', and then it built.
This error is produced at least with tsc versions 2.1.5 and 2.2.2

I use angular-cli for developing angular 2 application.But I have a problem about ImageUploadModule and I know that this problem was sent before.But I did not solve this problem.Please help me about this problem.Thank you

ERROR in Error encountered resolving symbol values statically. Calling function 'ImageUploadModule', function calls are not supported. Consider replacing the functio
n or lambda with a reference to an exported function

When I set maxFileSize, then I choose the large picture, which size is large then i set
It will show the [fileTooLargeMessage] what i set
But I choose small size picture again, and it will nothing happend.......

nativeError:Error: Template parse errors: Can't bind to 'url' since it isn't a known property of 'image-upload'.

1. If 'image-upload' is an Angular component and it has 'url' input, then verify that it is part of this module.
2. If 'image-upload' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
   (" <image-upload [ERROR ->]
   [url]="'example.com/images/upload'"
   [buttonCaption]="'Select Images!'"
   [dropBoxMessage]="'Drop yo"): HomeComponent@36:2 Can't bind to 'buttonCaption' since it isn't a known property of 'image-upload'.
3. If 'image-upload' is an Angular component and it has 'buttonCaption' input, then verify that it is part of this module.
4. If 'image-upload' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" <image-upload [url]="'example.com/images/upload'" [ERROR ->]

[buttonCaption]="'Select Images!'"

[dropBoxMessage]="'Drop your images here!'" (onFileUploadFinis"): HomeComponent@37:2 Can't bind to 'dropBoxMessage' since it isn't a known property of 'image-upload'.

1. If 'image-upload' is an Angular component and it has 'dropBoxMessage' input, then verify that it is part of this module.
2. If 'image-upload' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" [url]="'example.com/images/upload'"

[buttonCaption]="'Select Images!'" [ERROR ->]

[dropBoxMessage]="'Drop your images here!'" (onFileUploadFinish)="imageUploaded($event)" (onRemov"): HomeComponent@38:2 'image-upload' is not a known element: 1. If 'image-upload' is an Angular component, then verify that it is part of this module. 2. If 'image-upload' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
(" [ERROR ->]<image-upload [url]="'example.com/images/upload'" [buttonCaption]="'Select Images!'" "): HomeComponent@35:0 at SyntaxError.BaseError [as constructor] (http://127.0.0.1:3000/vendor.bundle.js:5206:27) [] at new SyntaxError (http://127.0.0.1:3000/vendor.bundle.js:5454:16) [] at TemplateParser.parse (http://127.0.0.1:3000/vendor.bundle.js:17079:19) [] at JitCompiler._compileTemplate (http://127.0.0.1:3000/vendor.bundle.js:48132:68) [] at http://127.0.0.1:3000/vendor.bundle.js:48015:62 [] at Set.forEach (native) [] at JitCompiler._compileComponents (http://127.0.0.1:3000/vendor.bundle.js:48015:19) [] at createResult (http://127.0.0.1:3000/vendor.bundle.js:47898:19) [] at Zone.run (http://127.0.0.1:3000/polyfills.bundle.js:15367:43) [ => ] at http://127.0.0.1:3000/polyfills.bundle.js:15774:57 [] at Zone.runTask (http://127.0.0.1:3000/polyfills.bundle.js:15405:47) [ => ] at drainMicroTaskQueue (http://127.0.0.1:3000/polyfills.bundle.js:15672:35) [] at HTMLDocument.ZoneTask.invoke (http://127.0.0.1:3000/polyfills.bundle.js:15603:25) [

I have set my image the max limit to upload image as 1 but I am unable to upload a new image once I upload a wrong image and click cross to remove it.

After uploading the image, the preview still remains, I'm trying to clear the image after the associated post is submitted(i.e. on click of submit button). I'm new to Angular2, any help would be appreciated

If you have 2 component on one page and they have different URLs one component will not work because service has only one URL

Error: Cannot find name 'ImageUploadModule'.

app.module.ts:

@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
AboutComponent,
HomeComponent,
NoContentComponent,
XLargeDirective
],
imports: [ // import Angular's modules
BrowserModule,
FormsModule,
HttpModule,
ImageUploadModule.forRoot(),
RouterModule.forRoot(ROUTES, { useHash: true, preloadingStrategy: PreloadAllModules })
],
providers: [ // expose our Services and Providers into Angular's dependency injection
ENV_PROVIDERS,
APP_PROVIDERS
]
})

Why it is throwing "Error: Cannot find name 'ImageUploadModule'. "

Error: (SystemJS) ctorParameters.map is not a function

Ionic Framework: 3.2.0
Ionic App Scripts: 1.3.2
Angular Core: 4.1.0
Angular Compiler CLI: 4.1.0
Node: 6.10.0
OS Platform: Windows 7
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36

Hey dude, the 0.30 on NPM does not have the updated code with the headers feature.
Can you check please? Thanks.
also there's a conflicted copy in the folder.

TypeError: Cannot read property 'append' of null
at ImageService.postImage (http://localhost:8100/build/main.js:60603:32)
at ImageUploadComponent.uploadSingleFile (http://localhost:8100/build/main.js:109156:18)
at FileReader. (http://localhost:8100/build/main.js:109132:23)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15213)
at Object.onInvokeTask (http://localhost:8100/build/main.js:4416:37)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15134)
at n.runTask (http://localhost:8100/build/polyfills.js:3:10390)
at FileReader.invoke (http://localhost:8100/build/polyfills.js:3:16170)

Look like this commit: bebaa74 (file: src/image.service.ts, line 27) is trying to append elements in the headers array to options.headers, however, options.headers is not defined.

This causes runtime error and stops any upload requests sent with headers.

I tried using this format to pass in my authentication token for my node server to process [headers]="[ {header: 'Authorization', value: 'MyToken'} ]"

but this json couldn't be read because it's not a valid json. So I changed the format to:
[headers]='[{"header": "Authorization", "value": "MyToken"}]', it seems to work, however, line 29 in file ng2-image-upload/src/image.service.ts is supposed to loop through an array of headers: for (let header of headers) except that the variable headers is actually a string in the transpiled js file,
if (headers) { options.headers = new http_1.Headers(); for (var _i = 0, headers_1 = headers; _i < headers_1.length; _i++) { var header = headers_1[_i]; options.headers.append(header.header, header.value); } }
I changed the headers in the for loop to JSON.parse(headers) as follows:
if (headers) { options.headers = new http_1.Headers(); for (var _i = 0, headers_1 = JSON.parse(headers); _i < headers_1.length; _i++) { var header = headers_1[_i]; options.headers.append(header.header, header.value); } }

and the headers directive seems to work properly now.

Anyone has the similar issue?

Uploaded a 367kb file. Between selecting the file and pressing Open and seeing the file – it took approximately 9 seconds. How can I improve the performance?

is there anyway we can hide drop message display?