Sending FormData to different API separatly

user_7029796 0
Viewed 106

Is it possible to send FormData into two API? For example, I have two input elements like

<form id="form">
  <input type="text" name="email" ... />
  <input type="file" name="files" ... />
</form>

I want to send some of the form fields to one API and the others to another one. The idea is to have a single simple form for the user, and a single submit action, but behind the scenes we have to send the data to different APIs.

From

const formData = new FormData(document.getElementById('form'));

How can I extract the email value and send it to API1, the files need to goto API2:

fetch('API1', { method: 'POST', body: formData has only 'email' })
fetch('API2', { method: 'POST', body: formData has only 'files' })

This is because my API has different endpoints and protocols for files and meta-data, but I don't want the user to have to submit two different forms.

html javascript
2 Answers

As mentioned in the comments the documentation has all the methods you need to get, set or delete form data.

// Initial form data, just for demo purposes
const initFormData = new FormData();
initFormData.append('email', 'foo@bar.com');
initFormData.append('files', 'baz');

// Email form data
const emailFormData = new FormData();
emailFormData.set('email', initFormData.get('email'));

// Files form data
const filesFormData = new FormData();
filesFormData.set('files', initFormData.get('files'));

// End results
console.log('Init:', ...initFormData.entries());
console.log('Email:', ...emailFormData.entries());
console.log('Files:', ...filesFormData.entries());
.as-console-wrapper { max-height: 100% !important; }

If you for example only want to move email to a separate formData you can also do:

// Initial form data, just for demo purposes
const initFormData = new FormData();
initFormData.append('email', 'foo@bar.com');
initFormData.append('files', 'baz');

// Email form data
const emailFormData = new FormData();
emailFormData.set('email', initFormData.get('email'));

initFormData.delete('email');

// End results
console.log('Init:', ...initFormData.entries());
console.log('Email:', ...emailFormData.entries());
.as-console-wrapper { max-height: 100% !important; }

user_32576220

Use an event listener https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event

<form id="form">
  <input type="text" name="email" />
  <input type="file" name="files" />
  <input type="submit" />
</form>

<script>
var form = document.getElementById('form');
form.addEventListener('submit', function (event) {
    // Prevent form from submitting to the server
    event.preventDefault();
    var submitted = new FormData(event.target);
    var email = new FormData();
    email.set('email', submitted.get('email'));
    fetch('API1', { method: 'POST', body: email })
    var files = new FormData();
    files.set('files', submitted.get('files'));
    fetch('API2', { method: 'POST', body: files })
});
</script>
user_36575370
Related