Image uploading in Angular

Question

I was trying to upload an image using Angular to a google storage bucket. And everything is working fine with Postman. But I'm stuck with angular typescript. Can anyone suggest to me a way to do this?

.html file

 <input type="file" accept="image/png, image/jpeg" class="form-control upload-btn" formControlName="imageUpload" placeholder="Upload Images" (change)="uploadImage($event)"  required>

.ts file

 uploadImage(event: any) {
if (event.target.files && event.target.files[0]) {
  const uploadImage=event.target.files[0];

  const fileObject = {
    userId: this.userId,
    bucketName: 'Test123',
    image: uploadImage
  };

  this.userService.uploadImage(fileObject).subscribe(data=>{
  },err=>{
    console.log("error occured")
  }
  )
}

}

.service file

uploadImage(fileObject: any){
return this.http.post('http://localhost:1337' + 'upload-image' , fileObject);

}

No any error occurs on the backend side. It worked fine with Postman. Im not sure about the .ts file.

What's the error you are seeing in frontend/browser or developer tools — chintuyadavsara, Mar 29 '22 at 04:32
can you share the which url you are using in the postman to upload can you post here the url — Manektech Knowledge Base, Mar 29 '22 at 04:33
Hi @chintuyadavsara, error is it will never go inside this.userService.uploadImage(fileObject).subscribe(data=>{ } this one. Therefore image didn't add the bucket — Dasaya_Developer, Mar 29 '22 at 04:36
Hi @ManektechKnowledgeBase, I used `http://localhost:1337/upload-image` this url which is same as in the service file. — Dasaya_Developer, Mar 29 '22 at 04:37
if it is not going inside, it might go to error, please check what the error is and please give detailed information — chintuyadavsara, Mar 29 '22 at 04:38
@chintuyadavsara please check this. error: {error: SyntaxError: Unexpected token U in JSON at position 0 at JSON.parse () at XMLHtt…, text: 'Uploaded the file successfully'} headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ} message: "Http failure during parsing for http://localhost:1337/upload-image" name: "HttpErrorResponse" ok: false status: 200 statusText: "OK" url: "http://localhost:1337/upload-image" — Dasaya_Developer, Mar 29 '22 at 04:44
@HariDev Please open chrome dev tools and go to network tab and see the response once, this error usually occurs when the server returns an error (e.g. a 500 server error) — chintuyadavsara, Mar 29 '22 at 04:54
can you share the pay load for both postman and payload from network tab screen shot — Manektech Knowledge Base, Mar 29 '22 at 05:07
`uploadImage(fileObject: any){ return this.http.post(this.baseUrl + GlobalConstants.uploadImage , fileObject, { responseType: 'text'}); }` when I use `{ responseType: 'text'}` , it went inside the service @chintuyadavsara. But still not shown in the bucket — Dasaya_Developer, Mar 29 '22 at 05:42
Here is the [example](https://stackoverflow.com/questions/48343853/angular-5-how-to-upload-an-image) which shows how to use FormData as suggested by @PrasenjeetSymon — Roopa M, Mar 29 '22 at 07:07
Thanks guys! I could do with using FormData. Thanks for your solutions. — Dasaya_Developer, Mar 31 '22 at 11:19

score 1 · Accepted Answer · answered Apr 06 '22 at 06:09

As suggested by @PrasenjeetSymon using FormData will help to upload images in Angular.

Here is the similar thread which demonstrate how to use FormData

You can use the tag from HTML:

<input type="file" name="file" id="file" (change)="onFileChanged($event)" />

and in the component:

public files: any[];

contructor() { this.files = []; }

onFileChanged(event: any) {
  this.files = event.target.files;
}

onUpload() {
  const formData = new FormData();
  for (const file of this.files) {
      formData.append(name, file, file.name);
  }
  this.http.post('url', formData).subscribe(x => ....);
}

Image uploading in Angular

1 Answers1