How can I send an image via /cart/add.js

Retired Boards Appdev Metafields
,
1

I created a custom product builder where you can enter your details and they are sent along with the product order. All fields have a name=“properties” attribute. I have a field to upload a picture and it sends it along with the order.
Now the task is to validate the fields before adding a product to the cart, so I threw e.preventDefault() on the add to cart button and then send the product by Ajax via /cart/add.js. But the problem is that the picture is not sent this way. How can I send a photo via /cart/add.js so that it appears in the order in the admin panel?
Below is my submission code. As I understand it, when adding a photo it converts it . And changes the name. But when I send it custom, it adds the wrong image and does not send it. Is it possible to fix it?

Rostislav333_0-1706113345201.png
Rostislav333_0-1706113345201.png472×286 11.3 KB

Rostislav333_2-1706113585206.png

const productFormBtn = document.querySelector(
    ".content-builder__sidebar form .product-form__submit"
  );

  const cardForm = document.querySelector(".content-builder__sidebar form");

   productFormBtn.addEventListener("click", (e) => {
    e.preventDefault();
    const formData = new FormData(cardForm);

        const xhr = new XMLHttpRequest();
        xhr.open("POST", "/cart/add.js", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.responseType = "json";

        xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 300) {
             console.log("Success:", xhr.response);
             else {
             console.error("Error:", xhr.status, xhr.statusText);
             }
        };

        xhr.onerror = function () {
        console.error("Network error");
        };

       xhr.send(new URLSearchParams(formData));
   });
2

Hi Rostislav333,

I believe you’ll need to use some third-party service to handle the image upload - the issue here is that when you use FormData with an <input type="file">, the file gets included in the form data as a binary object. The /cart/add.js endpoint, however, doesn’t directly accept binary data for images or files. It’s primarily designed for textual data.

Instead of sending the image directly with the /cart/add.js request, you might need to upload the image to a separate server or a cloud storage service (like AWS S3, Firebase, etc.), and then store the URL of the uploaded image, and then associate it with the order.