angular get image data and again append it to FormData

Question

In angular 5 I am getting the images for hotelgallery from mongodb through my service. So basically the data what I am getting is like this

{
  fieldname: "hotelgallery", 
  originalname: "e.jpg", 
  encoding: "7bit", 
  mimetype: "image/jpeg", 
  destination: "./public/",
  encoding : "7bit",
  filename : "1521139307413.jpg"
  mimetype : "image/jpeg"
  path : "public/1521139307413.jpg"
  size : 66474
}
{
  fieldname: "hotelgallery", 
  originalname: "e.jpg", 
  encoding: "7bit", 
  mimetype: "image/jpeg", 
  destination: "./public/",
  encoding : "7bit",
  filename : "1521139307413.jpg"
  mimetype : "image/jpeg"
  path : "public/1521139307413.jpg"
  size : 66474
}
{
  fieldname: "hotelgallery", 
  originalname: "j.jpg", 
  encoding: "7bit", 
  mimetype: "image/jpeg", 
  destination: "./public/",
  encoding : "7bit",
  filename : "1526753678390.jpg"
  mimetype : "image/jpeg"
  path : "public/1526753678390.jpg"
  size : 66470
}
{
  fieldname: "hotelgallery", 
  originalname: "k.jpg", 
  encoding: "7bit", 
  mimetype: "image/jpeg", 
  destination: "./public/",
  encoding : "7bit",
  filename : "7865456789413.jpg"
  mimetype : "image/jpeg"
  path : "public/7865456789413.jpg"
  size : 66300
}

Now I want to again append those data to FormData but its not working.

The code what I have done so far

export class HotelEditComponent implements OnInit {
   formData = new FormData();
   ngOnInit() {
    this.getOneHotel(this.route.snapshot.params['id']);
   }

 getOneHotel(id) {
    this.http.get( this.apiUrl + '/api/hotel/' + id).subscribe(data => {
      this.hotel = data;
      this.appendImages(data['hotelimages']); //Here I am getting the data as mentioned here
    });
 }

 public appendImages(imagedata) {
    for (var i = 0; i < imagedata.length; i++) {
      console.log(imagedata[i]);
      this.formData.append('hotelgallery', imagedata[i], imagedata[i]['originalname']);
    }
    console.log(this.formData);
  }
 }

So can someone tell me how can I append the existing image data to FormData? Any help and suggestions will be really appreciable.

UseCase for this: Actually I had used formData to upload images in angular. Now in the edit page the images are showing fine. But lets say a user edits some data and upload some images or remove some images. In that case I am getting the images from the database and again trying to upload them with formdata.

I have used this module and multer for nodejs to upload images with formData.

Answer 1

So can someone tell me how can I append the existing image data to FormData? Any help and suggestions will be really appreciable.

Actually, this approach need more add script solution. for example

1. Get Image Blob from server

Since you return detail object of images, not with the blob. You need have a endpoint to return as blob. (or if return as data buffer then it transform to blob you can use BlobUtil)

2. Put Blob to append form data

You need use blob to append in param 2 no a path, see documentation.

name

The name of the field whose data is contained in value.

value

The field's value. This can be a USVString or Blob (including subclasses such as File).

filename Optional

The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is "blob". The default filename for File objects is the file's filename.

That what you need, but that is bad practice.

Let's say, you have 30 images to edit, then you need request blob endpoint to get those images blob to appends. But user only want to update 1 image, wasting time to request image blob, right?

For edit image usually we don't need append to file form (<input type="file" />).

Just show it as thumbnail to see what image uploaded and let file form empty.

What we do usually, thumbnail that image.

When user what to change, user put new image and replace old image with new want and update database.

if not, do nothing for image. (YAGNI)