How to upload image using Lead capture web-to-lead

[rmf]

Profile photo is not getting uploaded
first name , last name & email address are working fine

I have the following Data

URL

https://app.rabiyamasoodfoundation.org/portal/api/v1/LeadCapture/484ed7134973c36351b70d842f8f0c4e

Payload
{
"profilePhotoId": PROFILE_PHOTO_ID,
"firstName": "FIRST_NAME",
"lastName": "LAST_NAME",
"emailAddress": "EMAIL_ADDRESS"
}


Payload Fields
Profile Photo, First Name, Last Name, Email





Please suggest changes in my code

<div id="web-to-lead-form-container">
<form id="web-to-lead-form">
<div>
<input type="file" name="profilePhoto">
</div>
<div>
<input type="text" name="firstName" placeholder="First Name">
</div>
<div>
<input type="text" name="lastName" placeholder="Last Name" required>
</div>
<div>
<input type="email" name="emailAddress" placeholder="Email Address" required>
</div>
<div>
<button type="submit" name="submit">Submit</button>
</div>
</form>
</div>

<script type="text/javascript">
let webToLeadFormElement = document.getElementById('web-to-lead-form');
let webToLeadFormIsSubmitted = false;

webToLeadFormElement.addEventListener('submit', event => {
event.preventDefault();

if (webToLeadFormIsSubmitted) {
return;
}

webToLeadFormIsSubmitted = true;
webToLeadFormElement.submit.setAttribute('disabled ', 'disabled');

let payloadData = {
profilePhoto: webToLeadFormElement.profilePhoto.value,
firstName: webToLeadFormElement.firstName.value,
lastName: webToLeadFormElement.lastName.value,
emailAddress: webToLeadFormElement.emailAddress.value,
};

// A needed URL can be found on the Lead Capture detail view.
let url = 'https://app.rabiyamasoodfoundation.org/portal/api/v1/LeadCapture/484ed7134973c36351b70d842f8f0c4e';

let xhr = new XMLHttpRequest();

xhr.open('POST', url, true);

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Accept', 'application/json');

xhr.onreadystatechange = () => {
if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
let containerElement = document.getElementById('web-to-lead-form-container');

containerElement.innerHTML = 'Sent';
}
};

xhr.onerror = () => {
webToLeadFormElement.submit.removeAttribute('disab led');
webToLeadFormIsSubmitted = false;
};

xhr.send(JSON.stringify(payloadData));
});
</script>

[emillod]

Hello Sir
the best option is to create another endpoint, convert picture to base64, send it to endpoint which will create attachment based on it and link to record.