Im uploading the photo with angular to the backend(Core 2.2), but I'm having an error.When I select photo and when I click upload, this is what i get: Photo 1
And I dont know why i get : POST http://localhost:4200/undefinedusers/4/photos It should be only users without undefined
And when I click on Zone.js.3372 This is what I get: Photo 2 When I use Postman everything is ok, picture is saved on cloudinary web site, so the problem is somewhere on the client.
And here is section for uploading image to the server.
export class PhotoEditorComponent implements OnInit {
@Input() photos: Photo[];
uploader: FileUploader ;
hasBaseDropZoneOver = false;
apiUrl: 'http://localhost:5000/api/';
constructor(private authService: AuthService) { }
ngOnInit() {
this.initializeUploader();
}
public fileOverBase(e: any): void {
this.hasBaseDropZoneOver = e;
}
initializeUploader() {
this.uploader = new FileUploader({
url: this.apiUrl + '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; };
this.uploader.onSuccessItem = ( item, response , status , Headers) => {
if ( response ) {
const res: Photo = JSON.parse(response);
const photo = {
id: res.id,
url: res.url,
dataAdded: res.dataAdded,
description: res.description,
isMain: res.isMain
};
this.photos.push(photo);
}
};
}
and here is html:
<div class="row">
<div *ngFor="let photo of photos" class="col-sm-2">
<img src="{{photo.url}}" class="img-thumbnail p-1" alt="">
<div class="text-center">
<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 mt-3">
<div class="col-md-3">
<h3>Add Photos</h3>
<div ng2FileDrop
[ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
(fileOver)="fileOverBase($event)"
[uploader]="uploader"
class="card bg-faded p-3 text-center mb-3 my-drop-zone">
<i class="fa fa-upload fa-3x"></i>
Drop Photos here
</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" *ngIf="uploader?.queue.length">
<h3>Upload queue</h3>
<p>Queue length: {{ uploader?.queue?.length }}</p>
<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th>Size</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>
</tr>
</tbody>
</table>
<div>
<div>
Queue progress:
<div class="progress mb-4" >
<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="fa fa-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-s"
(click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
<span class=" fa fa-ban"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-s"
(click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
<span class="fa fa-trash"></span> Remove
</button>
</div>
</div>
</div>