Hi
I'm using ABP ng-2 version.
I'm using ng2-file-upload as shown below.But it gives me below error when I tried to upload a image.Web api method is working fine with the Postman.But when I try to use with app it gives below error.Please give me a feedback.Thanks.
Component :
import { Component, Injector } from '@angular/core';
import { TenantDashboardServiceProxy } from '@shared/service-proxies/service-proxies';
import { AppComponentBase } from '@shared/common/app-component-base';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { FileUploader, FileUploaderOptions, Headers } from 'ng2-file-upload';
import { AppConsts } from '@shared/AppConsts';
import { TokenService } from '@abp/auth/token.service';
@Component({
templateUrl: './drawings.component.html',
animations: [appModuleAnimation()]
})
export class DrawingsComponent extends AppComponentBase {
constructor(injector: Injector, private _tokenService: TokenService) {
super(injector);
}
uploader: FileUploader = new FileUploader({
url: AppConsts.remoteServiceBaseUrl + '/api/DocumentUpload/AddDocument',
authToken: 'Bearer ' + this._tokenService.getToken()
});
hasBaseDropZoneOver: boolean = false;
hasAnotherDropZoneOver: boolean = false;
fileOverBase(e: any): void {
this.hasBaseDropZoneOver = e;
}
fileOverAnother(e: any): void {
this.hasAnotherDropZoneOver = e;
}
}
Error :
XMLHttpRequest cannot load <a class="postlink" href="http://localhost:22742/api/DocumentUpload/AddDocument">http://localhost:22742/api/DocumentUpload/AddDocument</a>. Response to preflight request doesn't pass access control check: Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'http://localhost:4200' is therefore not allowed access. vendor.bundle.js:147481 XHR failed loading: POST "http://localhost:22742/api/DocumentUpload/AddDocument".
5 Answer(s)
-
0
Hi,
This answer might help you <a class="postlink" href="https://github.com/valor-software/ng2-file-upload/issues/399#issuecomment-255661623">https://github.com/valor-software/ng2-f ... -255661623</a>. I had a similar problem before and I solved it ny implementing something like this.
-
0
Hi,
I have done as shown below.But it says : duplicate identifier uploader Hope this is my technical issue.Can you tell me how to declare it ? Thanks.
uploader: FileUploader = new FileUploader({ url: AppConsts.remoteServiceBaseUrl + '/api/DocumentUpload/AddDocument', authToken: 'Bearer ' + this._tokenService.getToken() }); this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; }; -
0
Hi,
Can you check this component (change-profile-picture-modal.component.ts) <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-angular/blob/c456c88568454736d0f801dba47bae7b4da41ade/src/app/shared/layout/profile/change-profile-picture-modal.component.ts">https://github.com/aspnetzero/aspnet-ze ... mponent.ts</a>.
We used same component here.
-
0
Hi,
Thanks a lot.I have used liked that and now it is working :)
-
0
Great :)
