dc/ng2-file-upload
4
0
Fork 0
Code Issues 395 Pull Requests 27 Packages Projects Releases 4 Wiki Activity

I am dropping file and using button to upload file but no event fires and the buttons "Upload All", "Cancel all", "Remove all" remain disabled. #1087

New Issue
Open
opened 2019-05-01 12:17:26 +00:00 by Shahzaib199579 · 4 comments
Shahzaib199579 commented 2019-05-01 12:17:26 +00:00 (Migrated from github.com)
Copy Link

Hi I am trying to make it work but nothing is happening. I have already uninstalled and then installed the package again. I have gone through the code but nothing is happening.
This is code for photo-editor.component.html
`

Main 
<div class="col-md-3">

    <h3>Select files</h3>

    <div ng2FileDrop
         [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
         (fileOver)="fileOverBase($event)"
         [uploader]="uploader"
         class="well my-drop-zone">
        Base drop zone
    </div>

    Multiple
    <input type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>

    Single
    <input type="file" ng2FileSelect [uploader]="uploader" />
</div>

<div class="col-md-9" style="margin-bottom: 40px">

    <h3>Upload queue</h3>
    <p>Queue length: {{ uploader?.queue?.length }}</p>

    <table class="table">
        <thead>
        <tr>
            <th width="50%">Name</th>
            <th>Size</th>
            <th>Progress</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of uploader.queue">
            <td><strong>{{ item?.file?.name }}</strong></td>
            <td *ngIf="uploader.options.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
            <td *ngIf="uploader.options.isHTML5">
                <div class="progress" style="margin-bottom: 0;">
                    <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                </div>
            </td>
            <td class="text-center">
                <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
            </td>
            <td nowrap>
                <button type="button" class="btn btn-success btn-xs"
                        (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                    <span class="glyphicon glyphicon-upload"></span> Upload
                </button>
                <button type="button" class="btn btn-warning btn-xs"
                        (click)="item.cancel()" [disabled]="!item.isUploading">
                    <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                </button>
                <button type="button" class="btn btn-danger btn-xs"
                        (click)="item.remove()">
                    <span class="glyphicon glyphicon-trash"></span> Remove
                </button>
            </td>
        </tr>
        </tbody>
    </table>

    <div>
        <div>
            Queue progress:
            <div class="progress" style="">
                <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
            </div>
        </div>
        <button type="button" class="btn btn-success btn-s"
                (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
            <span class="glyphicon glyphicon-upload"></span> Upload all
        </button>
        <button type="button" class="btn btn-warning btn-s"
                (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
            <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
        </button>
        <button type="button" class="btn btn-danger btn-s"
                (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
            <span class="glyphicon glyphicon-trash"></span> Remove all
        </button>
    </div>

</div>
`

This is for its ts

`import { Component, Input, OnInit } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';
import { Photo } from 'src/app/_models/Photo';
import { environment } from 'src/environments/environment';
import { AuthService } from 'src/app/_services/auth.service';
import { UserService } from 'src/app/_services/user.service';
import { AlertifyService } from 'src/app/_services/alertify.service';

@Component({
selector: 'app-photo-editor',
templateUrl: './photo-editor.component.html',
styleUrls: ['./photo-editor.component.css']
})
export class PhotoEditorComponent implements OnInit {
@Input() photos: Photo[];
uploader: FileUploader;
hasBaseDropZoneOver = false;
baseUrl = environment.apiUrl;

constructor(private authService: AuthService, private userService: UserService,
private alertify: AlertifyService) { }

ngOnInit() {
this.initializeUploader();
}

fileOverBase(e: any): void {
console.log('file event fired');
this.hasBaseDropZoneOver = e;
}

initializeUploader() {
this.uploader = new FileUploader({
url: this.baseUrl + 'users/' + this.authService.decodedToken.nameid + '/photos',
authToken: 'Bearer ' + localStorage.getItem('token'),
isHTML5: true,
allowedFileType: ['image'],
removeAfterUpload: true,
autoUpload: false,
maxFileSize: 10 * 1024 * 1024
});

this.uploader.onAfterAddingFile = (file) => {file.withCredentials = false; };

}
}
`

error

Hi I am trying to make it work but nothing is happening. I have already uninstalled and then installed the package again. I have gone through the code but nothing is happening. This is code for photo-editor.component.html `<div class="row"> <div class="col-sm-2" *ngFor="let photo of photos"> <img src="{{photo.url}}" class="img-thumbnail p-1"> <div class="text-centre"> <button type="button" class="btn btn-sm">Main</button> <button type="button" class="btn btn-sm btn-danger"><i class="fa fa-trash-o"></i></button> </div> </div> </div> <div class="row"> <div class="col-md-3"> <h3>Select files</h3> <div ng2FileDrop [ngClass]="{'nv-file-over': hasBaseDropZoneOver}" (fileOver)="fileOverBase($event)" [uploader]="uploader" class="well my-drop-zone"> Base drop zone </div> Multiple <input type="file" ng2FileSelect [uploader]="uploader" multiple /><br/> Single <input type="file" ng2FileSelect [uploader]="uploader" /> </div> <div class="col-md-9" style="margin-bottom: 40px"> <h3>Upload queue</h3> <p>Queue length: {{ uploader?.queue?.length }}</p> <table class="table"> <thead> <tr> <th width="50%">Name</th> <th>Size</th> <th>Progress</th> <th>Status</th> <th>Actions</th> </tr> </thead> <tbody> <tr *ngFor="let item of uploader.queue"> <td><strong>{{ item?.file?.name }}</strong></td> <td *ngIf="uploader.options.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td> <td *ngIf="uploader.options.isHTML5"> <div class="progress" style="margin-bottom: 0;"> <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div> </div> </td> <td class="text-center"> <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span> <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span> <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span> </td> <td nowrap> <button type="button" class="btn btn-success btn-xs" (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess"> <span class="glyphicon glyphicon-upload"></span> Upload </button> <button type="button" class="btn btn-warning btn-xs" (click)="item.cancel()" [disabled]="!item.isUploading"> <span class="glyphicon glyphicon-ban-circle"></span> Cancel </button> <button type="button" class="btn btn-danger btn-xs" (click)="item.remove()"> <span class="glyphicon glyphicon-trash"></span> Remove </button> </td> </tr> </tbody> </table> <div> <div> Queue progress: <div class="progress" style=""> <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div> </div> </div> <button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length"> <span class="glyphicon glyphicon-upload"></span> Upload all </button> <button type="button" class="btn btn-warning btn-s" (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading"> <span class="glyphicon glyphicon-ban-circle"></span> Cancel all </button> <button type="button" class="btn btn-danger btn-s" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length"> <span class="glyphicon glyphicon-trash"></span> Remove all </button> </div> </div> </div> ` This is for its ts `import { Component, Input, OnInit } from '@angular/core'; import { FileUploader } from 'ng2-file-upload'; import { Photo } from 'src/app/_models/Photo'; import { environment } from 'src/environments/environment'; import { AuthService } from 'src/app/_services/auth.service'; import { UserService } from 'src/app/_services/user.service'; import { AlertifyService } from 'src/app/_services/alertify.service'; @Component({ selector: 'app-photo-editor', templateUrl: './photo-editor.component.html', styleUrls: ['./photo-editor.component.css'] }) export class PhotoEditorComponent implements OnInit { @Input() photos: Photo[]; uploader: FileUploader; hasBaseDropZoneOver = false; baseUrl = environment.apiUrl; constructor(private authService: AuthService, private userService: UserService, private alertify: AlertifyService) { } ngOnInit() { this.initializeUploader(); } fileOverBase(e: any): void { console.log('file event fired'); this.hasBaseDropZoneOver = e; } initializeUploader() { this.uploader = new FileUploader({ url: this.baseUrl + 'users/' + this.authService.decodedToken.nameid + '/photos', authToken: 'Bearer ' + localStorage.getItem('token'), isHTML5: true, allowedFileType: ['image'], removeAfterUpload: true, autoUpload: false, maxFileSize: 10 * 1024 * 1024 }); this.uploader.onAfterAddingFile = (file) => {file.withCredentials = false; }; } } ` ![error](https://user-images.githubusercontent.com/45731207/57016974-6a5ca100-6c36-11e9-9cdf-0261ddfc5411.PNG)
mbarsil commented 2019-08-12 18:43:04 +00:00 (Migrated from github.com)
Copy Link

Hi,

I am having the same issue. Did you manage to make this work?

Thanks

Hi, I am having the same issue. Did you manage to make this work? Thanks
ACritchell commented 2019-10-06 00:30:26 +00:00 (Migrated from github.com)
Copy Link

Hello,

I'm also struggling with this exact problem. Nothing fires. I'm using Angular 6 and have tried every example on the whole interwebs.... I even found one example indicating to install this:

$npm install rxjs-compat --save

Wondering if the project is in decline and we should just move on....

Thanks

Hello, I'm also struggling with this exact problem. Nothing fires. I'm using Angular 6 and have tried *every* example on the *whole* interwebs.... I even found one example indicating to install this: $npm install rxjs-compat --save Wondering if the project is in decline and we should just move on.... Thanks
Nexmind commented 2019-11-06 10:43:17 +00:00 (Migrated from github.com)
Copy Link

We have the same problem, has anyone figured it out ?
Thanks !

We have the same problem, has anyone figured it out ? Thanks !
annamichalik commented 2022-04-29 11:53:01 +00:00 (Migrated from github.com)
Copy Link

I had the issue when I wrongly defined the file extension filter

this.uploader = new FileUploader({
			filters: [{
				name: 'extension',
				fn: (item: any): boolean => {
							return false;
				}
			}]
		});

so you should try to remove : allowedFileType: ['image'],

I had the issue when I wrongly defined the file extension filter ``` this.uploader = new FileUploader({ filters: [{ name: 'extension', fn: (item: any): boolean => { return false; } }] }); ``` so you should try to remove : allowedFileType: ['image'],
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
dependencies
Pull requests that update a dependency file
 duplicate
enhancement
greenkeeper
help wanted
in progress
invalid
need to reproduce
question
status: pending
wontfix
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
allan medjedovic root sabhas
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#1087
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?