Angular and NestJS file upload progress bar

Question

So, i have a system set up to be able to upload files via Angular to NestJS, but i wanna know the progress of the upload, because its a little annoying that i cant see when it finishes.

Is there any way to do it? Thanks!

Heres my code:

FrontEND: Angular:

          let formData = new FormData()

          let dateX = cur_day + hours + minutes + seconds; // removed the vars

          formData.append("dest", `${this.chatid}/${this.userData.userid}/${dateX}/`)
          this.draftImages.forEach((fileData: any) => {


            formData.append("file", fileData.file, fileData.name)
            console.log(fileData.file);
          })

          console.log(formData)
          this.http.post<any>("http://localhost:3000/chat/message/dm/uploadImg", formData).subscribe((result) => {
            console.log(result, formData)
            let filesUploaded: any = []
            this.draftImages = []

            Array.from(result).forEach((file: any) => {
              filesUploaded.push(file.destination + file.originalname)
            })

            this.dmService.sendMessage({
              message: message,
              chatid: this.chatid,
              userid: this.userData.userid,
              username: this.userData.username,
              pfp: this.userData.pfp,
              files: filesUploaded
            });

          })

BackEND: NestJS:

  @Post("uploadImg")
  @UseInterceptors(
    AnyFilesInterceptor({
      storage: diskStorage({
        destination: function (req: any, file, cb) {
          console.log(file);


          function mkdirRecursiveSync(path: string) {
            if (!existsSync(path)) {
              mkdirRecursiveSync(dirname(path));
              mkdirSync(path);
            }
          }

          const destPath = `CDN/attachments/${req.body.dest}`;
          mkdirRecursiveSync(destPath);
          console.log(req.body)
          cb(null, destPath);
        },
        filename: function (req, file, cb) {
          console.log(file)
          cb(null, file.originalname);
        },
      }),
    })
  )
  async uploadedFile(@UploadedFiles() file) {
    console.log(file)
    return file;
  }

You would need to set up a different type of communication between your server and client other than Request/Response. An option suitable for your use case are Server-Sent events (SSE), or web sockets. There is an integration for NestJs available -> https://docs.nestjs.com/techniques/server-sent-events — Džan Operta, Jan 09 '23 at 11:52
i have socket.io set up but i dont know how to upload files with it — Almaszosz, Jan 10 '23 at 12:39
For clarification, do you want to show the progress bar of the file Upload on Frontend, or do you want the progress of a request processed on the backend? There might be easier solutions, also have a look at this question –> https://stackoverflow.com/questions/37052623/progress-bar-on-web-request-http-angularjs. — Džan Operta, Jan 10 '23 at 20:18

Angular and NestJS file upload progress bar

0 Answers0