CODEWITHSUNDEEP
javascriptjqueryajax
user12092062
user12092062

Reputation: 1

Form with multiple file inputs

I have an application with a dynamic form that uploads simultaneously to different people.

Each person has a different input file and can add more 2 inputs dynamic.

<div id="InputsWrapper_1">
<div><input type="file" name="arquivoDep_1_[]" id="1" value="" multiple><a href="#" class="removeclass"></a></div>
</div>

<div id="AddMoreFileId_1">
<a href="#" id="AddMoreFileBox_1" class="btn btn-info adiciona">Add field</a><br><br>
</div>
<div id="lineBreak"></div>

 <div id="InputsWrapper_2">
<div><input type="file" name="arquivoDep_2_[]" id="2" value="" multiple><a href="#" class="removeclass"></a></div>
</div>

<div id="AddMoreFileId_2">
<a href="#" id="AddMoreFileBox_2" class="btn btn-info adiciona">Add field</a><br><br>
</div>

When I submit this form, I´ve this response

<input id="1" type="file" name="arquivoDep_1_[]" value="" multiple="">
<input type="file" name="arquivoDep_1_[]">

<input id="2" type="file" name="arquivoDep_2_[]" value="" multiple="">
<input type="file" name="arquivoDep_2_[]">

That´s ok. Two files for two persons.

How can I append this files.. someting like 

$.each($("input[type=file]"), function(i, obj) 
{
    $.each(obj.files,function(j, file)
    {
        form_data.append('arquivoDep_x_[]', file, file.name);
    })
});

Upvotes: 0

Views: 278

Answers (1)

Antonin Beaufort
Antonin Beaufort

Reputation: 363

First we are in 2020, check if you really need jQuery : http://youmightnotneedjquery.com/

Then you can use a multipart-form data like this :

<script type="text/javascript">
  const formElement = document.querySelector('form');

  formElement.addEventListener('submit', e => {
    e.preventDefault();

    const request = new XMLHttpRequest();

    const formData = new FormData();

    const formElements = formElement.elements;

    const data = {};

    for (let i = 0; i < formElements.length; i++) {
      const currentElement = formElements[i];
      if (!['submit', 'file'].includes(currentElement.type)) {
        data[currentElement.name] = currentElement.value;
      } else if (currentElement.type === 'file') {
        if (currentElement.files.length === 1) {
          const file = currentElement.files[0];
          formData.append(`files.${currentElement.name}`, file, file.name);
        } else {
          for (let i = 0; i < currentElement.files.length; i++) {
            const file = currentElement.files[i];

            formData.append(`files.${currentElement.name}`, file, file.name);
          }
        }
      }
    }

    formData.append('data', JSON.stringify(data));

    request.open('POST', 'https://example.com');

    request.send(formData);
  });
</script>

Source : Upload | Strapi Documentation

Upvotes: 1

Related Questions