ogix / ng2-fancy-image-uploader Goto Github PK

when i using lazy load, and put ng2-image-upload in a child module , appear BrowserModule has already been loaded Error. So I think this module import BrowserModule or BrowserAnimationsModule. But, only AppModule should import it.
I suggest import CommonModule rather than BrowserModule

Hello, trying to use ng2-fancy-image-uploader with angular-cli (webpack), i ran into the following error:

ERROR in ./~/ng2-fancy-image-uploader/dist/src/fancy-image-uploader.component.js
Module not found: Error: Can't resolve 'cropperjs' in '/home/[path-to-angular-cli-project]/node_modules/ng2-fancy-image-uploader/dist/src'
 @ ./~/ng2-fancy-image-uploader/dist/src/fancy-image-uploader.component.js 7:18-38
 @ ./~/ng2-fancy-image-uploader/dist/index.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://dev.ditup.org:4200 ./src/main.ts

Tried to resolve it with npm install cropperjs, but that doesn't help.

Hi, I have used ng2-fancy-image-uploader in my angular 5 application. But i'm getting some errors while taking production build.

I'm forced to provide a thumbnailResizeMode, should this be added into the readme to save people diving down into code to find the "fill" and "fit" options?

I am getting the following error while run the ng serve

ERROR in Error: Metadata version mismatch for module D:/Project_Santhosh/Reactive FormsExample/node_modules/ng2-fancy-image-uploader/dist/index.d.ts, found version 4, expected 3, resolving symbol AppModule in D:/Project_Santhosh/Reactive FormsExample/src/app/app.module.ts, resolving symbol AppModule in D:/Project_Santhosh/Reactive FormsExample/src/app/app.module.ts

Hello,

I would like to set image from model. something like this is possible?:

 <fancy-image-uploader [options]="options" (onUpload)="onUpload($event,'PosterThumbnail')" [ngsrc]="obj.PosterThumbnail"

But still able to click/drag to upload other image?

Hello,

ng2-fancy-image-uploader currently doesn't work with Angular 6+. Probably because ng2-fancy-image-uploader brings its own @angular/core version which conflicts with the project one.

ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/ng2-fancy-image-uploader/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

Have a nice day.

Hey there, So Im missing the error styles and Im not sure why.

Everything seems to be working fine, just missing the styles. The error styles in the demo look great and i'd love to use them. Any help would be appreciated.

Thanks!

I need to sent the custom header authentication on image upload there is any option to sent
below header information
const headersConfig = {
'Content-Type': 'application/json',
'Accept': 'application/json',
'x-access-token': ${environment.api_token}
};

in uploadURL?

Hello, It has a error when I run the project, I do not know how to solve, could you help me?

ERROR in D:/Project/node_modules/ng2-fancy-image-uploader/dist/src/fancy-im
age-uploader.component.d.ts (1,1): Cannot find type definition file for 'cropper
js'.

ERROR in Error encountered resolving symbol values statically. Calling function
'makeDecorator', function calls are not supported.

I'm trying to install on angular 4, but throws this error during project compilation

Package.json:

"@angular/common": "4.4.4",
"@angular/compiler": "4.4.4",
"@angular/core": "4.4.4",
"@angular/forms": "4.4.4",
"@angular/http": "4.4.4",
"ng2-fancy-image-uploader": "^2.0.0",

Hi.

Is there any documentation about what all the options are used for, and what values they are allowed to have?

Specifically I'd like to know if it is possible to upload a resized image. If my user selects an image that is 3MB, which is fine, I'd still like to only upload a smaller resized version of that image.

hello , can i add a default image in options ?

When I try to import FancyImageUploaderModule on a lazy module, I got the following error:

Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

My main module (app.module.ts):

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    appRouter
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})

Lazy module with FancyImageUploaderModule:

@NgModule({
  imports: [
    CommonModule,
    PainelRouter,
    FancyImageUploaderModule
  ],
  declarations: [PainelComponent]
})

I was trying to use this module(latest version 2.0.1) for image upload but facing the following issue in Angular 5.

Dependencies:--
"angular/animations": "^5.0.0",
"angular/cli": "1.5.0",
"angular/common": "^5.0.0",
"angular/compiler": "^5.0.0",
"angular/compiler-cli": "^5.0.0",
"angular/core": "^5.0.0",
"angular/forms": "^5.0.0",
"angular/http": "^5.0.0",
"angular/language-service": "^5.0.0",
"angular/platform-browser": "^5.0.0",
"angular/platform-browser-dynamic": "^5.0.0",
"angular/platform-server": "^5.0.0",
"angular/router": "^5.0.0",
"ngtools/webpack": "1.8.0",
"types/jasmine": "~2.5.53",
"types/jasminewd2": "~2.0.2",
"types/node": "~6.0.60",
"types/webpack-env": "1.13.0",
Error:--
An unhandled exception occurred while processing the request.
NodeInvocationException: Unexpected value 'FancyImageUploaderModule' imported by the module 'AppModuleShared'. Please add a @NgModule annotation.
Error: Unexpected value 'FancyImageUploaderModule' imported by the module 'AppModuleShared'. Please add a @NgModule annotation.
at Error (native)
at syntaxError (C:\projects\calypso-web\Calypso\Web.UI\ClientApp\dist\vendor.js:26914:34)
at C:\projects\calypso-web\Calypso\Web.UI\ClientApp\dist\vendor.js:40598:44
at Array.forEach (native)
at CompileMetadataResolver.module.exports.CompileMetadataResolver.getNgModuleMetadata (C:\projects\calypso-web\Calypso\Web.UI\ClientApp\dist\vendor.js:40581:49)
at CompileMetadataResolver.module.exports.CompileMetadataResolver.getNgModuleSummary (C:\projects\calypso-web\Calypso\Web.UI\ClientApp\dist\vendor.js:40523:52)
at C:\projects\calypso-web\Calypso\Web.UI\ClientApp\dist\vendor.js:40596:72
at Array.forEach (native)
at CompileMetadataResolver.module.exports.CompileMetadataResolver.getNgModuleMetadata (C:\projects\calypso-web\Calypso\Web.UI\ClientApp\dist\vendor.js:40581:49)
at JitCompiler.module.exports.JitCompiler._loadModules (C:\projects\calypso-web\Calypso\Web.UI\ClientApp\dist\vendor.js:51904:70)

Hi,

I am trying to use this module (great module by the way), I want to be able to access the file and read the data url without uploading the file.

I found the autoUpload option which stops the upload but then the onUpload event does not file and ngModule is null

Can you advise how I can access the selected file?

This component looks great but I'm getting the following errors when trying to use ng2-fancy-image-uploader with Angular 4.3.2:

WARNING in ./node_modules/ng2-fancy-image-uploader/node_modules/@angular/core/esm5/core.js
6586:15-36 Critical dependency: the request of a dependency is an expression
WARNING in ./node_modules/ng2-fancy-image-uploader/node_modules/@angular/core/esm5/core.js
6606:15-102 Critical dependency: the request of a dependency is an expression

As the instructions indicated, I added FancyImageUploaderModule to the imports array of my AppModule -- is there another syntax that can be used to include this module?

This seems related to webpack/webpack#2964 but I couldn't find any concrete resolution to that problem...

Hi,

I have already implemented this plugin now I want to add image cropping option for uploaded image also.

I am using Angular 5, Any example to enable cropping tool will be great.

Thanks,
Avinash Singh

I have followed all the instructions from the readme to install this library.

I am running into an issue where, when the image uploader is rendered into the page i get the following error:

ERROR Error: StaticInjectorError(AppModule)[FancyImageUploaderComponent -> Renderer]: 
  StaticInjectorError(Platform: core)[FancyImageUploaderComponent -> Renderer]: 
    NullInjectorError: No provider for Renderer!
    at _NullInjector.webpackJsonp.../../../core/esm5/core.js._NullInjector.get (core.js:1002)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.webpackJsonp.../../../core/esm5/core.js.StaticInjector.get (core.js:1110)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.webpackJsonp.../../../core/esm5/core.js.StaticInjector.get (core.js:1110)
    at resolveNgModuleDep (core.js:10854)
    at NgModuleRef_.webpackJsonp.../../../core/esm5/core.js.NgModuleRef_.get (core.js:12087)
    at resolveDep (core.js:12577)

I don't get any errors when compiling the code and have tried to provide the Renderer manually in my module but to no success.

Any help on this would be appreciated.

I want to use this on a form where the user may have already uploaded an image previously. So they're not adding an image, but they can replace the image. Is it possible with this control to display that initial image instead of the empty box with the "add" text?