Как обработать загрузку файлов в проекте `gatsby js`?

Question

В превосходной статье объясняется, как обрабатывать отправку форм в Gatsby Js проекте, размещенном на netlify. Однако речь идет только о представлении текстовых значений, а как насчет того, чтобы форма включала некоторые входные данные?

Кто-нибудь может пролить немного света здесь?

Answer 1

Спасибо за помощь @ coreyward. Я понял, что проблема в том, как использовать javascript fetch API для публикации данных формы. Так что решение здесь довольно простое:

const encode = (data) => {
  const formData = new FormData()
  Object.keys(data)
    .map(key => {
      if (key === 'files') {
        for (const file of data[key]) {
          formData.append(key, file, file.name)
        }
      } else {
        formData.append(key, data[key])
      }
    })
  return formData
}

await window.fetch('/', {
    method: 'POST',
    body: encode({ 'form-name': 'loan', ...this.state, userId: netlifyIdentity.currentUser().id }),
  })

Вы можете заметить, что единственная сложная задача - переписать функцию encode официального образца статьи с uri encoding до form data encoding.

Answer 2

Netlify поддерживает загрузку файлов в обработчике форм без какой-либо специальной настройки: https://www.netlify.com/docs/form-handling/#file-uploads

Формы Netlify могут получать файлы, загруженные через отправленные формы. Для этого добавьте ввод с type="file" в любую форму. Когда форма отправлена, ссылка на каждый загруженный файл будет включена в детали отправки формы. Их можно просмотреть в приложении Netlify, в уведомлениях по электронной почте и через наш API.