В этой статье блога мы углубимся в мир операций с файловой системой в Angular. Мы рассмотрим различные методы и приемы работы с файлами в приложении Angular, попутно предоставляя вам практические примеры кода. Независимо от того, являетесь ли вы новичком или опытным разработчиком, это руководство даст вам знания, необходимые для беспрепятственного выполнения операций с файлами в ваших проектах Angular.

1. Чтение файла.
   Одна из распространенных задач — чтение файлов с устройства пользователя. Angular предоставляет API FileReader, который вы можете использовать для достижения этой цели. Вот пример:

// HTML
<input type="file" (change)="handleFileInput($event.target.files)" />
// Component
handleFileInput(files: FileList): void {
  const file = files.item(0);
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      const result = reader.result as string;
      console.log(result);
    };
    reader.readAsText(file);
  }
}

2. Загрузка файлов.
   Чтобы загрузить файлы на сервер в Angular, вы можете использовать модуль HttpClient. Вот пример загрузки файла:

// HTML
<input type="file" (change)="handleFileInput($event.target.files)" />
// Component
handleFileInput(files: FileList): void {
  const file = files.item(0);
  if (file) {
    const formData = new FormData();
    formData.append('file', file);
    this.http.post('/upload', formData).subscribe((response) => {
      console.log('File uploaded successfully!', response);
    });
  }
}

3. Загрузка файлов:
   Чтобы загрузить файл с сервера, вы также можете использовать модуль HttpClient. Вот пример:

// Component
downloadFile(): void {
  this.http.get('/download', { responseType: 'blob' }).subscribe((response) => {
    const url = window.URL.createObjectURL(response);
    const anchor = document.createElement('a');
    anchor.href = url;
    anchor.download = 'file.txt';
    anchor.click();
    window.URL.revokeObjectURL(url);
  });
}

4. Удаление файлов.
   Когда дело доходит до удаления файлов, вам необходимо взаимодействовать с логикой на стороне сервера. Вы можете сделать запрос DELETE к определенной конечной точке, передав необходимую информацию о файле. Вот упрощенный пример:

// Component
deleteFile(fileName: string): void {
  this.http.delete(`/files/${fileName}`).subscribe(() => {
    console.log('File deleted successfully!');
  });
}

В этой статье мы рассмотрели различные операции с файловой системой в Angular, включая чтение, загрузку, скачивание и удаление файлов. Используя предоставленные примеры кода, вы можете легко интегрировать возможности обработки файлов в свои приложения Angular. Не забудьте адаптировать эти примеры к вашим конкретным потребностям и изучить документацию Angular для более сложных операций с файловой системой. Приятного кодирования!