Как проверить файл с помощью ngx-file-drop в angular 5+?

Я использую "ngx-file-drop" в Angular 6.

<file-drop headertext = "Drop files here" (onFileDrop) = "dropped($event)" 
             (onFileOver) = "fileOver($event)" (onFileLeave) = "fileLeave($event)" multiple>
                 <span>optional content (don't set headertext then)</span>
             </file-drop>

И файл компонента

public dropped(event: UploadEvent) {
    this.files = event.files;
    for (const droppedFile of event.files) {

      // Is it a file?
      if (droppedFile.fileEntry.isFile) {
        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
        fileEntry.file((file: File) => {

          // Here you can access the real file
          // console.info("dropfile_file"+ droppedFile.relativePath, file);

          this.drop_files.push(file);
          console.info(this.drop_files);



        });
      } else {
        // It was a directory (empty directories are added, otherwise only files)
        const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
        console.info("file_entry"+ droppedFile.relativePath, fileEntry);
      }
    }
  }

  public fileOver(event){
    console.info("file_over"+event);
  }

  public fileLeave(event){
    console.info("file_leave"+event);
  }

Я понятия не имею, как проверить файл на использование ngx-file-drop.

Есть ли в ngx-file-drop подход для проверки файла? пожалуйста помоги.

Спасибо,

Я также использую эту библиотеку, пытаясь сделать то же самое. Я вижу, что в документации есть входной параметр accept, который передается полностью до нижележащего тега <input>, но я не вижу, чтобы это что-то делало с функцией перетаскивания. У меня есть набор параметров accept = "png", как в документации, и я все еще могу перетаскивать любой файл. Это ожидаемая функциональность с этой библиотекой? Мне было интересно, есть ли готовое решение и способ избежать синтаксического анализа расширений файлов при отбрасывании ответов, как указано ниже.

Jake 20.03.2019 15:12
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
3
1
4 589
2

Ответы 2

Я заставил это работать так:

public dropped(event: UploadEvent) {
    if (event.files.length > 1) {
        alert("impossible de rajouter plus d'un document à la fois");
    } else {
        this.verifierEnvoyerDocument(event.files[0]);
    }
}

verifierEnvoyerDocument(droppedFile: UploadFile) {
    this.file = droppedFile;
    // Is it a file and is it allowed?
    if (droppedFile.fileEntry.isFile && this.isFileAllowed(droppedFile.fileEntry.name)) {
        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
        fileEntry.file((file: File) => {
            console.info('isFile :', file.name);
            console.info(droppedFile.relativePath, file);
            this.envoyerDocument(droppedFile.relativePath, file);
        });
    } else {
        alert("Seul les fichiers au format '.doc', '.docx', '.ppt', '.pptx', '.pdf' sont accepté.");
    }
}

isFileAllowed(fileName: string) {
    let isFileAllowed = false;
    const allowedFiles = ['.doc', '.docx', '.ppt', '.pptx', '.pdf'];
    const regex = /(?:\.([^.]+))?$/;
    const extension = regex.exec(fileName);
    if (isDevMode()) {
        console.info('extension du fichier : ', extension);
    }
    if (undefined !== extension && null !== extension) {
        for (const ext of allowedFiles) {
            if (ext === extension[0]) {
                isFileAllowed = true;
            }
        }
    }
    return isFileAllowed;
}

Надеюсь, это кому-то поможет.

import { UploadEvent, UploadFile, FileSystemFileEntry, FileSystemDirectoryEntry } from 'ngx-file-drop';




public dropped(event: UploadEvent) {
    let droppedFile = event.files[0];
      if (droppedFile.fileEntry.isFile) {
        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
        fileEntry.file((file: File) => {
          this.file = file;
        });
    }
  }

в нескольких файлах событий цикла

Другие вопросы по теме