upload image file with the right path from angular to nest to the DB by following : nest documentation :multer https://docs.nestjs.com/techniques/file-upload

I tried to display the product image , so I get the image from the input tag then I called the (change) function that has an event with image , and send it to the back-end side to upload it to the files of nest.js, I was able to save them to files also in the database but when I am try to display dose not work I can not get the right path to display the image in localhost

**nest.js function ** I used FileInterceptor library

import { FileInterceptor } from '@nestjs/platform-express';
import { diskStorage } from 'multer';
import { extname } from 'path';
`
`

``// File interceptor implementation
export const storage = {
  storage: diskStorage({
    destination: './files',
    filename: (req, file, callback) => {
      const uniqueSuffix: string =
        Date.now()   '-'   Math.round(Math.random() * 1e9);
      // const fileName : string = path.parse(file.originalname).normalize.replace(/\s/g, '')   id
      const ext = extname(file.originalname);
      const filename = `${uniqueSuffix}${ext}`;
      callback(null, filename);
    },
  }),
};``



`  `@Post('upload')
  @UseInterceptors(FileInterceptor('file', storage)) // storage it is an Object


  handleUploadFile( @Res() res  , @UploadedFile() file: Express.Multer.File ) {
    return res.status(HttpStatus.OK).json({
      success:true, 
      data:file.path   
    })

  }``


**html template **
I used template driven form  

`<div >
    <input
     
      accept="image/*"
      type="file"
      
      placeholder="Enter Image URL"
      ngModel
      name="image"
      (change)="onFileSelected($event)"
      
      [(ngModel)]="data.image"
      required
    />
  </div>`


**angular methods **


``async addProduct(form: any) {
    // console.log(' product submitted', form);
    if(this.image){
      const res = await this.uploadFileService()
      form.image = res.data
    }
    `

`
image : any 
 async onFileSelected(event:any){
   console.log(event);
   this.image = event.target.files[0]

   console.log( 'image: ',this.image );
  
  //  return await this.adminService.uploadFileService()
  }
`

  `
  uploadFileService(): Promise<any>{
    const formData = new FormData();
    formData.append('file', this.image);
    return firstValueFrom(
      this.http.post<any>( environment.baseApi   'products/upload', formData)
    )
   } ` 
`

CodePudding user response：

I got how I can solve it I just need to use filename property of file instead of path

data:file.filename

in the function :

 handleUploadFile( @Res() res  , @UploadedFile() file: Express.Multer.File ) {
  
    // return 'file uploded to the API successfully '
    // return of({ imagePath: file.path });
 
    return res.status(HttpStatus.OK).json({
      success:true, 
      data:file.filename
    })
  }