Отправляйте данные многоуровневой формы через API, используя JS - PullRequest
Новая
       21

Отправляйте данные многоуровневой формы через API, используя JS

0 голосов
/ 25 мая 2020

У меня есть пять элементов в моей форме HTML -

1) Раскрывающийся список для выбора ТИПА.
2) Поле ввода текста для TITLE
3) Поле ввода текста для SUBSTANCE
4) Поле TextArea для ТЕКСТА
5) Поле ввода файла для THUMBNAIL (один файл)
6) Поле ввода файла для ФАЙЛОВ (несколько файлов)

Я хочу отправить сообщение запрос через API, который должен выглядеть как - 

"type": "Some Type",
"title": "Some Title",
"substance": "Some Substance",
"text": "Some Text",
"thumbnail": binary_file_object,
"files": [
         {"file_name": binary_file_object_1},
         {"file_name": binary_file_object_2},
         {"file_name": binary_file_object_3},
         {"file_name": binary_file_object_4},
       ]

Используя JavaScript, я могу получить следующую структуру - 

"files": [binary_file_object_1, binary_file_object_2, binary_file_object_3, binary_file_object_4]

, но не желаемую структуру - 

"files": [
         {"file_name": binary_file_object_1},
         {"file_name": binary_file_object_2},
         {"file_name": binary_file_object_3},
         {"file_name": binary_file_object_4},
       ]

Возможно ли достичь желаемой структуры?
Если возможно, как?
Не стесняйтесь спрашивать любую недостающую информацию.
Любая помощь будет принята с благодарностью.
Спасибо

--------- РЕДАКТИРОВАТЬ ---------

Вот коды HTML и JS, объединенные в один.
Я использую stati c данные для полей, кроме «ФАЙЛОВ», временно, чтобы сосредоточиться на проблеме. 

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>

  <input type="file" id="fileUpload" multiple/>
  <button onclick="get_photo()">Submit</button>

  <script type="text/javascript">
    const upld_files = [];

    const formData = new FormData();
    // Using static data for these fields temporarily
    formData.append("type", "FOOD");
    formData.append("title", "27th Food");
    formData.append("substance", "27th blog about food");
    formData.append("text", "This is the 27th blog about food");


    const handleImageUpload = event => {
      const u_files = event.target.files;

      for (i = 0; i < u_files.length; i++)
        {
          // temp_form = new FormData();
          // temp_form.append("file_name", u_files[i])
          // upld_files.push(u_files[i])
          // formData.append("files", temp_form);
          formData.append("files", u_files[i]);
        }
    }

    function get_photo()
    {
      fetch('http://127.0.0.1:8000/api/create/', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        console.log(data.path)
      })
      .catch(error => {
        console.error(error)
      })
    }

    document.querySelector('#fileUpload').addEventListener('change', event => {
      handleImageUpload(event)
    })

  </script>

</body>
</html>
...