Handle file uploaded on cart

Products and Orders APIs
1

Hi, im looking for a solution, how can i catch the file uploaded on cart.

I already catch the delivery week choice from calendar widget, but it’s not that simple with file. Can i handle that similar way like i did with delivery week below? Or need to create a custom app with webhooks to catch the file and update order by api call when order will be placed.

We are gonna handle CSV or XSLX file. Unfortunatelly i didn’t find any app that allow us to upload file on cart, only on product pages but it’s not a solution in this case.

updateCart(weekString) {

  fetch('/cart/update.js', {

    method: 'POST',

    headers: {

      'Content-Type': 'application/json',

    },

    body: JSON.stringify({

      attributes: {

        'Delivery week': weekString,

        'Delivery Date': '‘

      }

    })

  })

  .then(response => response.json())

  .then(cart => {

    console.log('Delivery week has been updated:', weekString);

  })

  .catch(error => {

    console.error('Error occured while updating delivery week:', error);

  });

}

Thanks for help and have a nice day :slight_smile:

1 Like
2

Hi Keydev,

Please correct me if I’m wrong here, but I believe you’re looking to have a customer upload a file on your storefront cart page, and have the file be attached to an Order created from that Cart.

If this is correct, there are a couple ways you can go about this, though you might need a custom app that is capable of making Admin API and Storefront API calls, depending on if the file you want to upload is already hosted externally or if you need to upload the file to Shopify.

If the file is already hosted externally, and you have a URL you use to access the file, you can simply submit the file URL as a Private Cart Attribute using the AJAX Cart API on the storefront. This will add the URL as a string that is accessible from the Order Details Page in the admin after the order is created.

Alternatively you can use a custom app with the Admin API and Storefront API if you wish to upload the file to your Shopify store first.

  1. If the file is not hosted externally and you need to upload it directly through the storefront, you can use the stagedUploadsCreate and fileCreate Admin API mutations to upload the file, and add the uploaded file to your Shopify store. If the file is hosted externally, you can skip the stagedUploadsCreate and just us the external URL in the fileCreate mutation directly.

  2. Once you’ve created the file on your Shopify store, you can add it to a metafield on the cart with a cartMetafieldsSet Storefront API call, specifically creating it as a file_reference metafield type.

  3. The metafield will then be added to the Order when it’s created, and can be accessed via the Admin API, with an order or orders query, retrieving the order.metafield property.

Here’s some additional documentation on working with metafields for reference:

And here’s some additional documentation on working with the Admin and Storefront APIs:

Additionally, in order to make Admin API calls from the Storefront, to upload the image, you will need to use App Proxies to send the request from the storefront to a back end app you’ve created, and have the back end app make the Admin API calls, forwarding the results of the call back to the storefront when completed. More info on this can be found in the following Shopify.dev documentation as well: