Перейти к содержимому
FFormhook
← Назад к блогу

Блог

Загрузка файлов на статическом сайте: реальные варианты

· 3 мин чтения

С текстовыми полями всё просто - сложный вопрос возникает, когда в брифе написано «а соискатели должны прикрепить резюме». Статический сайт не может принять файл: принимать его попросту нечему. Вот реальные варианты, от худшего к лучшему.

Вариант 1: «пришлите нам на почту» (капитуляция)

Попросите пользователей присылать вложения по электронной почте. Технически это работает - как работает факс: файл приходит в почтовый ящик в отрыве от данных формы, без структуры и без контроля размера. Для всего повторяющегося - заявок на работу, вложений в обращениях поддержки, файлов для печати - это превращается в вечную ручную раскладку по папкам.

Вариант 2: загрузка напрямую в облачное хранилище (DIY-путь)

Фронтенд-JavaScript может загружать файлы напрямую в объектное хранилище (подписанные URL в стиле S3). Это законная архитектура - и неожиданно большой объём работы, чтобы сделать это безопасно: что-то должно генерировать эти подписанные URL (то есть вы всё равно пишете serverless-функцию), вы сами реализуете проверку размера и типа, связываете загруженный файл с той отправкой формы, которой он принадлежит, и решаете, в какой точке мира находится этот bucket - а это важно, как только в загрузках оказываются персональные данные вроде резюме.

Выбирайте этот путь, если загрузки - это ваш продукт. Для задачи «прикрепить файл к форме» это очень много сантехники.

Вариант 3: multipart через бэкенд форм (скучный, но правильный)

HTML поддерживает поля для файлов примерно вечно:

<form action="https://formhook.app/f/fh_your-key"
      method="POST" enctype="multipart/form-data">
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <input type="file" name="attachment">
  <button type="submit">Send</button>
</form>

Единственное, что все забывают, - это enctype="multipart/form-data": без него браузер отправляет имя файла вместо самого файла. Когда POST принимает бэкенд форм, файл сохраняется вместе со своей отправкой: откройте обращение в панели - вложение прямо там. Лимиты размера и типа применяются на эндпоинте, а защита от спама действует на всю отправку целиком, включая файлы.

В Formhook загрузка файлов доступна начиная с тарифа Pro, и - что важно для европейских сайтов - загруженные файлы хранятся в регионе ЕС Cloudflare R2, так что резюме, прикреплённое соискателем из ЕС, получает тот же ответ по резидентности данных, что и текстовые поля: оно никогда не покидает ЕС. (Подробности о хранении - в документации.)

Практические правила независимо от выбранного варианта

  1. Ограничьте ввод. Используйте атрибут accept (accept=".pdf,.png,.jpg") как элемент UX, но относитесь к нему как к рекомендации - настоящая проверка происходит на эндпоинте.
  2. Сообщайте пользователям лимит до того, как они в него упрутся. «Макс. 10 MB» рядом с полем лучше, чем ошибка после медленной загрузки.
  3. Файлы - это тоже персональные данные. Резюме, пожалуй, чувствительнее, чем поля формы вокруг него. Политики хранения, удаления и экспорта должны охватывать вложения, а утверждение о месте хранения в вашей политике конфиденциальности должно включать и их. (См. чек-лист GDPR.)
  4. Сохраните рабочим путь без JS. Обычная multipart-форма прекрасно отправляется вообще без скриптов; добавляйте AJAX-полировку поверх, а не вместо.

Паттерн для статических сайтов устоялся: сайт остаётся статическим, бэкенд форм принимает multipart POST, а файл оказывается рядом с сообщением, с которым он пришёл. Форма - по-прежнему один атрибут, плюс один enctype.

Рабочая форма в одну строку

Размещение в ЕС, отправки хранятся вечно, push-уведомления на любом тарифе.

Начать бесплатно

Без банковской карты · читайте документацию

Читать дальше