Retrieving customer's uploaded files in cart

Scott_Lyons
New Member
8 0 0

I have built in the option to have customer's customize their purchase in the shopping cart. One of these customization options is to have them upload images. However, when I test the functionality, it's just the filename that's showing up in the backend of the order, rather than the file itself. 

Any idea how to set it up so that the file itself comes through when an order is placed?

0 Likes
Benjamin_C
Shopify Staff
Shopify Staff
368 0 40

Hello Scott, Ben here - your Shopify Guru! 

  If the form in your cart.liquid contains a file upload field, the form tag in your customizable product template must have the attribute enctype="multipart/form-data".

 

I had a look at your cart.liquid and it does not contain that attribute. Give that a shot and see if it solve your issue. We have documentation on adding file uploads to a product page here:

https://docs.shopify.com/manual/configuration/store-customization/page-specific/product-page/get-cus...

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

0 Likes
Scott_Lyons
New Member
8 0 0

Thanks Ben. I had a look at each of the fields that require a file upload in cart.liquid. They all have enctype="multipart/form-data" included within. I've pasted the code below to see if you can see any sort of mistake with it.

<p class="cart-attribute__field">
          <label for="recipe-hardcopy-1">Hardcopy recipe and photo 1</label>
          <input id="recipe-hardcopy-1" type="file" name="attributes[Hardcopy recipe #1]" value="{{ cart.attributes["Hardcopy recipe #1"] }}" enctype="multipart/form-data">
          <input id="recipe-hardcopy-1a" type="file" name="attributes[Hardcopy recipe #1a]" value="{{ cart.attributes["Hardcopy recipe #1a"] }}" enctype="multipart/form-data">
        </p>

 

0 Likes
Benjamin_C
Shopify Staff
Shopify Staff
368 0 40

Hey Scott, 

You need to have that attached to the actual form tag meaning this:

<form action="/cart" method="post" novalidate="" class="cart">

You would need to make it the following:

<form action="/cart" method="post" novalidate="" class="cart" enctype="multipart/form-data">

You do not need it on all the elements in the form just the actual form tag itself. 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

 

0 Likes
Scott_Lyons
New Member
8 0 0

Thanks Ben. I tried making that update, but now I'm getting the following on the backend of the order (instead of the actual file attachment):

#<ActionDispatch::Http::UploadedFile:0x007fb299c7fe90>

Any thoughts on how I can get the actual file delivered to me?

0 Likes
Benjamin_C
Shopify Staff
Shopify Staff
368 0 40

Hey Scott, 

 I think the issue here is you are trying to do this from the cart page. If you put your upload fields on the product page and use line item properties instead of cart attributes it will work correctly. 

<input type="file" id="file1" name="properties[file1]">Please upload file

 

File uploads typically get attached to a line item in the order so this thinking makes sense. You would see need to make sure your form tag has the enctype="multipart/form-data" on it. 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

0 Likes
atmomin
New Member
5 0 0

Hi, I have same problem here..Did you manage to fix this? Thanks

0 Likes
MadGeniusBlink
Shopify Partner
22 0 3

Hey @Benjamin_C ,

 

do you know how to make this happen but using the JS buy SDK?

 

So far I manage to get a link to appear:
Screen Shot 2019-11-03 at 2.53.16 PM.png

 

But What I need is have an image appear there... instead of the url that the input generated.

any idea how to make that happen?

 

 

0 Likes
Prabhav1
New Member
2 0 0

Hi!
How did you manage to get the link?

0 Likes
atmomin
New Member
5 0 0
Live chat with support, chat link found from somewhere else, not on shopify. Hard to remember now.
0 Likes