Skip to content

Image uploading in Angular

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 ( &&[0]) {

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

    console.log("error occured")


.service file

uploadImage(fileObject: any){
return'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.


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 =;

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