aberezkin / ng2-image-upload Goto Github PK
View Code? Open in Web Editor NEWAngular 2 component for image uploading
License: MIT License
Angular 2 component for image uploading
License: MIT License
Create interface for image deleting.
This issue depends on #1.
While on the below case upload image mot working.
It would upload the same image on second time.
nativeError:Error: Template parse errors: Can't bind to 'url' since it isn't a known property of 'image-upload'.
[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'.
[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) [
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.
Wrap component and directive into a single module which user can import into a project.
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.
Core js is only needed to build the lib, so it's better to place in dev dependencies.
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
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
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.
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.
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?
Hello! do you have any function to auto upload image. example [uploaded]="image1,image2" it better to use it with Modify Form. Thanks
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.
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
how do I describe angular2-image-upload at systemjs.config.js ??
I'm using anguar-quickstart 1.0.0
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
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
Most recent version published to NPM is 0.6.0 but the package.json in this repo says 0.5.0
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);
});
};
what URL do i use to upload to firebase3, the storage bucket url doesnt seem to work.
Please help,
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
I am using custom upload method. It's possible to disable select button while uploading ?
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?
is there anyway we can hide drop message display?
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.......
Create ImageService which should send POST queries to a user defined URL.
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 :)
If you have 2 component on one page and they have different URLs one component will not work because service has only one URL
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"
}
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 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);
}
}
Error: (SystemJS) ctorParameters.map is not a function
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'. "
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 { }
Suppose I receive 10 images , out of those 10 I replace two specific images with new images and send back the server call
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
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!
How to edit style for the form upload?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.