Wednesday, 9 December 2020

Saving image in the mongoDB backend as file from Angular it is not working as excepted

I am facing with an problem which is at my opinion not working. I did install a library in angular https://github.com/vugar005/ngx-awesome-uploader And in the Frontend I am dealing with some code that the developer developed this library.

So my iteration will be like this.

the cropped image will be sent to my api in backend and there to save the files and to show the file in some other place.

The actual crop it saves a link with blob and there is my img. It is creating a GET request with a link blob:http://localhost:4200/94a0c248-3a7a-47e5-b650-ad51138ee061 and there when I click this link there is my img.

This is my frontend code.

export class DemoFilePickerAdapter extends FilePickerAdapter {
  constructor(private http: HttpClient) {
    super();
  }
  public uploadFile(fileItem: FilePreviewModel) {
    const form = new FormData();
    form.append("file", fileItem.file);
    const api = environment.backend;
    console.log(fileItem.file);
    const req = new HttpRequest("POST", `${api}/img`, form, {reportProgress: true});
     return this.http.request(req)
    .pipe(
      map( (res: HttpEvent<any>) => {
        if (res.type === HttpEventType.Response) {
          return res.body.id.toString();
        } else if (res.type ===  HttpEventType.UploadProgress) {
            // Compute and show the % done:
            const UploadProgress = +Math.round((100 * res.loaded) / res.total);
            return UploadProgress;
        }
      })
      );
  }

}

This is the html.

    <ngx-file-picker
    [adapter]="adapter"
    [enableCropper]="true"
  >
  </ngx-file-picker>

  adapter = new  DemoFilePickerAdapter(this.http);
  constructor(private http: HttpClient) { }

And my backend API looks like this.

routes.post("/img", cvPhoto.save);
routes.get("/img", cvPhoto.get);
module.exports = {
    async save(req, res) {
        console.log(req.body);
        res.send(`${__dirname}/cv.png`);
    },
    async get(req, res) {
        res.sendFile(`${__dirname}/cv.png`);
    }
 }


from Saving image in the mongoDB backend as file from Angular it is not working as excepted

No comments:

Post a Comment