Как сделать загруженный файл "кликабельным" на Angular?

#javascript #html #angular #typescript

Вопрос:

Я следую этому руководству https://blog.angular-university.io/angular-file-upload/ для создания файла, загруженного в мой проект. Он правильно работает с этим кодом:

 <input type="file" class="file-input (change)="onFileSelected($event)" #fileUpload>

<div class="file-upload">
   {{fileName || "No file uploaded yet."}}
    <button mat-mini-fab color="primary" class="upload-btn"
      (click)="fileUpload.click()">
        <mat-icon>attach_file</mat-icon>
    </button>
</div>

и:

 onFileSelected(event) {
   const file:File = event.target.files[0];
   if (file) {
      this.fileName = file.name;
      const formData = new FormData();
      formData.append("thumbnail", file);
      const upload$ = this.http.post("/api/thumbnail-upload", formData);
      upload$.subscribe();
   }
}

Эта строка {{fileName || "No file uploaded yet."}} позволяет мне увидеть имя загруженного файла, но я хотел бы, чтобы это имя было «кликабельным», и открыть загруженный файл. Как я могу это сделать?

РЕДАКТИРОВАТЬ: Загруженный файл представляет собой либо pdf, либо изображение, и я хотел бы открыть его после нажатия.

1. Что именно вы подразумеваете под open загруженным файлом ? Это текстовый файл, содержимое которого вы хотите отобразить ? Это изображение, которое вы хотите отобразить на веб-странице ?

2. Это может быть pdf-файл или изображение, я хотел бы открыть файл при нажатии на него

3. Хотели бы вы открыть его в своем собственном приложении или с помощью браузера, такого как Chrome?

4. Я бы просто хотел открыть его, так что в браузере он тоже идеален

5. Дело в том, что ввод[тип=»файл»] не сохраняет локальный путь, а сохраняет файл в памяти. Поэтому, если вы хотите показать файл img или pdf, вам нужно будет прочитать его в памяти и отобразить в своем html. Вы можете легко решить часть img, но для отображения PDF-файлов вам понадобится плагин, по моему опыту.

Ответ №1:

Вы должны попробовать следующее решение

В HTML

 <input type="file" id="fileUpload" class="file-input (change)="onFileSelected($event)" #fileUpload>

<div class="file-upload">
   {{fileName || "No file uploaded yet."}}
    <button mat-mini-fab color="primary" class="upload-btn"
      (click)="openFileUpload(fileUpload)">
        <mat-icon>attach_file</mat-icon>
    </button>
</div>

В ТС

 openFileUpload(fileUpload){
   document.getElementById("fileUpload").click();
}

onFileSelected(event) {
   const file:File = event.target.files[0];
   if (file) {
      this.fileName = file.name;
      const formData = new FormData();
      formData.append("thumbnail", file);
      const upload$ = this.http.post("/api/thumbnail-upload", formData);
      upload$.subscribe();
   }
}