Как осуществить загрузку файла в Next.js?

В Next.js загрузка файла может быть реализована с помощью стандартных методов HTML и JavaScript, а также через API маршруты для обработки загруженных файлов на сервере. Вот пошаговое руководство о том, как это сделать.

### Шаг 1: Создание формы для загрузки файла

Прежде всего, вам нужно создать компонент формы, который будет содержать поле для выбора файла и кнопку для его отправки. Например:

```jsx
import { useState } from 'react';

const FileUpload = () => {
  const [file, setFile] = useState(null);

  const handleChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', file);

    // Отправка файла на сервер
    try {
      const res = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
      const result = await res.json();
      console.log(result);
    } catch (error) {
      console.error('Ошибка при загрузке файла:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleChange} />
      <button type="submit">Загрузить</button>
    </form>
  );
};

export default FileUpload;
```

### Шаг 2: Создание API маршрута для обработки загрузки

Далее вам нужно создать API маршрут в Next.js для обработки загруженного файла. Создайте файл `upload.js` в директории `pages/api`.

```javascript
import formidable from 'formidable';

export const config = {
  api: {
    bodyParser: false, // Убедитесь, что bodyParser отключен
  },
};

const uploadHandler = (req, res) => {
  const form = new formidable.IncomingForm();
  form.parse(req, (err, fields, files) => {
    if (err) {
      return res.status(500).json({ error: 'Ошибка загрузки файла' });
    }

    // Здесь вы можете выполнить действия с загруженным файлом
    console.log(files.file); // Вывод информации о загруженном файле

    res.status(200).json({ message: 'Файл успешно загружен!' });
  });
};

export default uploadHandler;
```

### Что происходит при нажатии на кнопку "Создать"?

Когда пользователь нажимает на кнопку "Загрузить" (в приведённом примере), происходит следующее:

1. Вызов функции `handleSubmit`, которая предотвращает стандартное поведение формы (перезагрузку страницы).
2. Создание объекта `FormData`, куда добавляется выбранный файл.
3. Отправка POST запроса на сервер на маршрут `/api/upload` с данными формы.
4. Сервер (API маршрут) обрабатывает запрос, извлекает файл и возвращает ответ.

### Какое модальное окно открывается?

В приведённом примере нет никакого модального окна по умолчанию. Если вам нужно открыть модальное окно при нажатии кнопки, вы можете использовать состояние для управления его видимостью. Например, вы можете добавить логику для открытия модального окна после нажатия на кнопку:

```jsx
// Добавьте состояния для управления модальным окном
const [isModalOpen, setIsModalOpen] = useState(false);

// Функция для открытия модального окна при успешной загрузке
const handleUploadSuccess = () => {
  setIsModalOpen(true);
};

const handleSubmit = async (e) => {
  // Ваша логика загрузки файла
  if (/* условие успешной загрузки */) {
    handleUploadSuccess();
  }
};

// рендер модального окна
{isModalOpen && <Modal onClose={() => setIsModalOpen(false)}>Файл загружен!</Modal>}
```

Таким образом, вы можете кастомизировать взаимодействие с пользователем и визуальную часть вашего приложения.