/TypeScript/Ngx-file-drop allow only image or pdf

Ngx-file-drop allow only image or pdf

//trick for max file size and file type check in ngx-file-drop
public dropped(files: NgxFileDropEntry[]) {
    if (files.length > 6) {
      this.toastr.error("Cannot add more than 6 Files at a time.")
    } else {
      // this.files = files;
      for (const droppedFile of files) {

        // Is it a file?
        if (droppedFile.fileEntry.isFile && this.isFileAllowed(droppedFile.fileEntry.name)) {

          const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
          fileEntry.file((file: File) => {

            if (this.isFileSizeAllowed(file.size)) {
              //files array is used to display
              //the files to the user which will be uploaded
              this.files.push(droppedFile);
              if (this.files.length < 6) {

                // Here you can access the real file
                console.log(droppedFile.relativePath, file);
                this.formData.append(`img${this.index}`, file, droppedFile.relativePath);
                this.index++;

                /**
                // You could upload it like this:
                const formData = new FormData()
                formData.append('logo', file, relativePath)
       
                // Headers
                const headers = new HttpHeaders({
                  'security-token': 'mytoken'
                })
       
                this.http.post('https://mybackend.com/api/upload/sanitize-and-save-logo', formData, { headers: headers, responseType: 'blob' })
                .subscribe(data => {
                  // Sanitized logo returned from backend
                })
                **/
              } else {
                this.toastr.error("Maximum 6 files are allowed.");
              }
            } else {
              this.toastr.error("Max size of a file allowed is 1mb, files with size more than 1mb are discarded.");
            }
          });


        } else {
          // It was a directory (empty directories are added, otherwise only files)
          this.toastr.error("Only files in '.pdf', '.jpg', '.jpeg', '.png' format are accepted and directories are not allowed.");
          // const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
          // console.log(droppedFile.relativePath, fileEntry);
        }
      }
    }
  }

  isFileAllowed(fileName: string) {
    let isFileAllowed = false;
    const allowedFiles = ['.pdf', '.jpg', '.jpeg', '.png'];
    const regex = /(?:\.([^.]+))?$/;
    const extension = regex.exec(fileName);
    if (undefined !== extension && null !== extension) {
      for (const ext of allowedFiles) {
        if (ext === extension[0]) {
          isFileAllowed = true;
        }
      }
    }
    return isFileAllowed;
  }

  isFileSizeAllowed(size) {
    let isFileSizeAllowed = false;
    if (size < 1000000) {
      isFileSizeAllowed = true;
    }
    return isFileSizeAllowed;

  }

Similar codes

0 vote322 views1 answer
Error detected in pubspec.yaml: No file or variants found for asset: assets/imgs.
TypeScript
1 vote328 views1 answer
How to use mutliple layouts in recyclerview
TypeScript
0 vote277 views1 answer
Typescript "variable?: type" notation
TypeScript
0 vote323 views1 answer
Type callback typescript
TypeScript
1 vote305 views1 answer
Npm run serve https
TypeScript
0 vote369 views1 answer
Links a otros components angular
TypeScript
0 vote312 views1 answer
@babel/preset-typescript
TypeScript
1 vote341 views1 answer
Contextual typing in typescript
TypeScript
0 vote400 views1 answer
Apexcharts pie chart colors
TypeScript
1 vote330 views1 answer
Vue textarea autosize
TypeScript