How to use the formdata in the client request method?

Hi Greg Katechis,

Proxy error: {:code=>"UnprocessableEntity", :status=>"422", :title=>"Unprocessable Entity", :message=>"Failed to get installation and oauth information for app."}

is being encountered when attempting to use the provided code. It appears that FormData needs to be passed in the body of a POST request, but the documentation does not provide guidance on how to do so.

How should I proceed to resolve this issue?

let data = new FormData();
    data.append("username", username);
    data.append("key", key);
    data.append("email", email);

    let config = {
      method: "post",
      maxBodyLength: Infinity,
      url: `${shopURL}/index.php?route=zendesk/customer`,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      crossOriginIsolated: true,
      data: JSON.stringify(data),
      secure: true,
    };

    return client.request(config);

When I passed the build for review process marketplace team rejected it because of security issues, I am using Axios inside the Zendesk SDK, I could not figure it out where is the mistake.

this is my manifest parameters

Hi Greg Katechis,

is there any update on this, how we can proceed?

Hi @Zendesk Team, 

Is there any update on this?

Hi Zendesk Team, 

Is there any update on this matter?

Is there any update or progress on the issue we've raised? We greatly value your assistance and insights in helping us resolve this matter.

Your prompt response and guidance would be greatly appreciated.

Thank you for your attention.

I have the same problem. Fahev Dalebig, did you find a solution for this?

Hello @tipene 

I have an issue with the POST request using client.request. Here is the code I'm working with:
 

const base64Response = await fetch(mediaData.data);
const blobData = await base64Response.blob();
const file = new File([blobData], mediaData.fileName, {
type: blobData.type,
});
const formData = new FormData();
formData.append("media", file);
formData.append("title", file.name);
formData.append("content_type", file.type);
formData.append("account", spokiAccount?.id);
const metadata = await client.metadata();
const sendMedia = await client.request({
 url: `${BASE_URL}/media/`,
 type: "POST",
 data: formData,
 headers: {
   "Content-Type": "multipart/form-data",
   [zendeskHeaderKey]: typeof metadata.installationId === "string" ? spokiAccessKey : "{{setting.spokiAccessKey}}",
 },
 secure: !(typeof metadata.installationId === "string"),
});
 

The issue is that when I make the API call using Axios, like this:
 

const sendMedia = await axios.post(`${BASE_URL}/media/`, formData, {
 headers: {
   "Content-Type": "multipart/form-data",
   ...spokiHeaders,
 },
});
 

It works fine and returns a response. However, when I call the API using the client.request, the payload doesn’t show up in the browser, and I get a 400 error with the following message:
 

{
 "media": [
   "No file was submitted."
 ]
}
 

Can you help me identify what might be wrong with the client.request approach?

@erica26 
i add ‘application/binary’ as contentType but still not work 

I did something very similar to your use case. Give this a try:

(function waitForZendeskForm() {
 const formCheck = setInterval(() => {
   const form = document.querySelector('form[action*="/requests"]');
   if (form) {
     clearInterval(formCheck);

     form.addEventListener("submit", function (e) {
       e.preventDefault(); // stop default submission

       const values = new FormData(form);
       const newForm = document.createElement("form");
       newForm.method = "POST";
       newForm.action = form.action;
       newForm.style.display = "none";

       // Populate cloned form with actual values
       for (const [name, value] of values.entries()) {
         const input = document.createElement("input");
         input.type = "hidden";
         input.name = name;
         input.value = value;
         newForm.appendChild(input);
       }

       document.body.appendChild(newForm);
 

       // Listen for form submission to complete via fetch
       fetch(form.action, {
         method: 'POST',
         body: values,
         credentials: 'include'
       }).then(response => {
         if (response.ok) {
           window.location.href = 'https://xxxxxxxxxxxxxx.com';  // redirect to external site
         } else {
           console.error('Form submission failed:', response.status);
         }
       }).catch(err => {
         console.error('Form submission error:', err);
       });
     });
   }
 }, 500);
})();