error loading css

[Stoffel-KT]

Hello,

I'm getting an error when loading the css.

GET http://localhost:4200/node_modules/ng2-file-input/ng2-file-input.css net::ERR_ABORTED

I have done the npm install of your package, added it to my app-module and included the script tag of the css to my index.html (in the head section)

My app is still running though but what I've noticed so far is that when I remove a previewed image it also closes the modal in which I am using the ng2-file-input selector. Not sure if this has something to do with the css not loading or with something else. Any idea what could be causing this and how to fix it? I'm also seing 2 buttons to selext files (one larger button "browse" and one smaller "choose files") I guess the second is the standard input type="file" button and this one would be hidden if the css would load?

Kind regards

[bergben]

Hey @Stoffel-KT, can you show me how you are including the css? This is most likely an issue with your way of importing the css, as far as I can tell...

[Stoffel-KT]

I copied <link href="node_modules/ng2-file-input/ng2-file-input.css" rel="stylesheet" /> into the head section of my index.html Do I still need to import it somewhere else?

I've also tried to just copy the css file and paste it into the css of the component where I'm implementing the ng2-file-input selector but it gives me the same result (except for the error ofcourse) I'm still a newbie so might be overlooking very simple thing, sorry for that.

Thx for taking the time to try and help me out!

[bergben]

Can you make sure you are using the latest version of the Angular CLI? I think somehow the path is incorrect or something goes wrong when serving the file...

[Stoffel-KT]

this is my current version, I think it should be the latest version @angular/cli: 1.5.4 @angular-devkit/build-optimizer: 0.0.33 @angular-devkit/core: 0.0.21 @angular-devkit/schematics: 0.0.37 @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.8.4 @schematics/angular: 0.1.7 typescript: 2.4.2 webpack: 3.8.1

How can I check if definately bootstrap 4 is being implemented instead of boortstrap 3 because I think this might also give a problem if somehow I'm still implementing bootstrap 3 instead of 4?

[bergben]

Bootstrap 4 you can check in your package.json, should be: "^4.0.0-alpha.6"

I really can't tell what could cause this issue :(

[Stoffel-KT]

In my package.json it said "^3.3.7" and in my index.html there was a bootstrap import 3.3.1 (I had some issues when trying to import bootstrap so I tried it multiple ways and apparently I ended up importing 3 different versions) I changed it in my package.json and commented out the import in my index.html but still giving the same problems.

Either way, I'll keep on looking, I must be doing something wrong somewhere. Thx for helping out

[Stoffel-KT]

forgot I also had to do an npm install after I updated my package.json :)

Did that, but now my app completely broke :(

npm install gave some warnings about peer dependencies that were required, also for your package. npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 requires a peer of @angular/core@^4.0.3 but none is installed. You must install peer dependencies yourself. npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 requires a peer of @angular/common@^4.0.3 but none is installed. You must install peer dependencies yourself. npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 requires a peer of @angular/forms@^4.0.3 but none is installed. You must install peer dependencies yourself. npm WARN bergben-angular2-file-drop@0.2.0 requires a peer of @angular/core@^2.0.0 but none is installed. You must install peer dependencies yourself. So one last question, if it doesn't work then, I'll try to resolve it myself... How do I install these?

kind regards,

[bergben]

You can safely ignore the "npm WARN bergben-angular2-file-drop@0.2.0 requires a peer of @angular/core@^2.0.0 but none is installed." warning, I'd just have to update the dependencies in the package.json of bergben-angular2-file-drop@0.2.0... That's related with #6, the dependency on it should be removed completely...

[Stoffel-KT]

the styling I was able to fix by removing <link href="/node_modules/ng2-file-input/ng2-file-input.css" type="text/css" rel="stylesheet" /> from index.html

and adding @import '~ng2-file-input/ng2-file-input.css'; to styles.css

It seems to be working so I guess it is working. Still have the problem that when I click to remove a file it also closes my modal. (inside this modal I'm also using other buttons and they don't close my modal when clicking on it)

I guess I will have to keep on looking a bit further :)

[Stoffel-KT]

one more thing....

is there a way I can alter the html? For my project I don't need the 'drop container', the button should say 'choose files' instead of browse and the preview should look a little different but not in a way I could achieve it with css (I think)

[bergben]

For changing the text you can use the options: https://github.com/bergben/ng2-file-input#options

Altering the html is not possible unfortunately :( You'd have to copy the code and alter the whole thing, and either release a forked version on npm, create pull requests for this one here or just use it as some module inside of your project...

In case you do that, what you could try so that the removing doesn't close the modal is to change

<span class="ng2-file-input-file-text remove" (click)="removeFile(file)" *ngIf="removable">

to

<span class="ng2-file-input-file-text remove" (click)="removeFile($event, file)" *ngIf="removable">

and

public removeFile(file: File) {
        if (this.removable) {
            let notRemovedFiles:File[]=this.fileInputHandlerService.removeFiles(this.id, [file]);
            if(notRemovedFiles.length===0){
                this.emitOutput(file, Ng2FileInputAction.Removed);
            }
            else{
                this.emitOutput(file, Ng2FileInputAction.CouldNotRemove);
            }
        }
    }

to

public removeFile($event, file: File) {
        if (this.removable) {
            let notRemovedFiles:File[]=this.fileInputHandlerService.removeFiles(this.id, [file]);
            if(notRemovedFiles.length===0){
                this.emitOutput(file, Ng2FileInputAction.Removed);
            }
            else{
                this.emitOutput(file, Ng2FileInputAction.CouldNotRemove);
            }
        }
        $event.stopPropagation();
    }

Note the $event.stopPropagation() https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

Thanks by the way for figuring out the issue with the css import, seems like it must have broke with some newer version of Angular CLI, I updated the ReadMe accordingly..

[Stoffel-KT]

haven't tried it yet, but as far as I understand what you are saying I need to do, I think you are my hero as from now 👍

Still have to look on how to create a forked version. If I use it as a module or an altered version, should I inlude credits to you? if so, how should I do that

[bergben]

Let me know if that works ;)

Creating a fork is easy, just press the fork button top right of the project and then clone it to your local machine. If you are new to all this I'd suggest you copy the code into your project after that and keep it simple without npm and stuff. Don't worry about credits, just use the thing if it helps you in any way :) It's not like this project is a masterpiece :(

[Stoffel-KT]

Hey,

I've been able to manage the styling the way I needed it, I tried just testing it localy but couldn't figure out how to do it, in the end I just did it through npm and published approximately 20 time to check small changes in the styling, not the best way but I think I've done what I needed to do :)

The next step is that I will need to send these selected files together with the rest of my form to a database, I guess I will still need to implement something else for that or is everything I need already in your package?