Имя файла, сохраненного через угловой интерфейс

В моем угловом приложении есть функция загрузки файла.

Когда пользователь нажимает кнопку загрузки файла, открывается окно «Сохранить как», и пользователь может затем задать имя для этого файла и сохранить его.

Я хочу знать имя этого файла, установленного пользователем.

Я знаю, что полный путь невозможно получить, как указано в этом -> Получите путь загрузки браузера с помощью javascript, и мне не нужен полный путь, мне просто нужно имя файла.

обновление: я хочу знать имя файла в файле .ts(компонент) и показать это имя в теге метки в html-файле.

Там в любом случае?

🤔 А знаете ли вы, что...
JavaScript обеспечивает обработку ошибок с использованием конструкции try...catch.


57
1

Ответ:

Решено

Я решил проблему, которую создал, используя API файловой системы

См. приведенный ниже код для справки.

public async buttonClick() {
      try {
        const fileHandle = await this.getNewFileHandle();
        if (fileHandle) {
          console.info("after calling getNewFileHandle()");
          console.info(fileHandle.name);  // Got the filename here
          this.filename = fileHandle.name;
        }
      } catch (error) {
        if (error instanceof DOMException) {
          switch (error.name) {
            case 'NotAllowedError':
              console.error("Permission was denied.");
              break;
            case 'AbortError':
              console.error("The operation was aborted.");
              break;
            case 'SecurityError':
              console.error("Security error occurred.");
              break;
            case 'TypeError':
              console.error("Invalid options were provided.");
              break;
            default:
              console.error("An unknown DOMException occurred:", error);
          }
        } else {
          console.error("An unknown error occurred:", error);
        }
      }
    }
    
    getNewFileHandle() {
      let opts = {};
      if ('showSaveFilePicker' in window) {
        opts = {
          types: [
            {
              description: 'Text file',
              accept: { 'text/plain': ['.txt'] },
            },
          ],
        };
        return window.showSaveFilePicker(opts);
      }
     else{}
    }