I have a form where my members can upload three images for their public profiles. 1.card_front, 2.card-back, 3.art_header

I don't want to use "multiple" on an input field as a member can come back to change 1 or all images at anytime, and I need to know which image has been uploaded - front, back or header.

My JS worked for one image upload but not with multiple single files.

My DB (Xano) gives me a 400 error

{
code: ERROR_CODE_INPUT_ERROR,
message: Value is not properly formed.,
payload: {
param: image1}

}

Xano endpoint expects three inputs that I have created (Type: file resource) image1, image2, image3 (Xano then creates image metadata from a File Resource)

What does "Value is not properly formed" mean and how to fix? OR can anyone suggest a different way to have three seperate image uploads in a form sent to an API using Fetch?

// POST IMAGES

const memberID = localStorage.getItem('MemberID');
console.log("Member ID:", memberID); 

const url = 'XANO endpoint';

document.addEventListener('DOMContentLoaded', init);

function init(){
    document.getElementById('btnSubmit').addEventListener('click', upload);
}

function upload(ev){
    ev.preventDefault();    

    //create any headers we want
    let h = new Headers();
    h.append("Accept", "application/json");
    h.append("Content-Type", "multipart/form-data");

    //bundle the files and data we want to send to the server
    let fd = new FormData();
    let myFile1 = document.getElementById('cardFront').files[0];
    let myFile2 = document.getElementById('cardBack').files[0];
    let myFile3 = document.getElementById('artHeader').files[0];

    fd.append("member-id", memberID);
    fd.append("image1", myFile1);
    fd.append("image2", myFile2);
    fd.append("image3", myFile3);

    let req = new Request(url, {
        method: "POST",
        headers: h,
        mode: "no-cors",
        body: fd
    });

    fetch(req)
        .then( (response)=>{
            document.getElementById("output").textContent = "Response received from server";
        })
        .catch( (err) =>{
            console.log("ERROR:", err.message);
        });
}

<form action="#">
        <div>
            <input type="hidden" id="nodes_id" data-name="nodes_id" value=`${memberID}`/>
            <input type="file" id="cardFront" accept=".png, .jpg, .jpeg"/>
            <input type="file" id="cardBack" accept=".png, .jpg, .jpeg"/>
            <input type="file" id="artHeader" accept=".png, .jpg, .jpeg"/>
        </div>
        <div>
            <button  id="btnSubmit">Upload Files</button>
        </div>
</form>

CodePudding user response：

Your content-type header is missing the boundary, if you remove that header from your code fetch will set it and add the needed boundary for you.