Enable users to upload a file using line item properties

fash100
Tourist
17 0 2
I am trying to enable users to upload a file using line item properties. I added the following code to one of my product customizable.liquid pages. I now see the file upload line in the product page and I am able to upload a file. 

However, I don't see the file after I click on Buy Now in the Cart Page. Any ideas why the file is missing in the cart page?

<label>Upload your image here </label>
<input type="file" name="pic" accept="image/*">

 

Thanks!

0 Likes
Jason
Shopify Expert
10360 158 2010

Hey fash100,

Are you trying to submit the product form with AJAX? If so, you won't be able to send files in this way. To submit a file it must be sent with a standard HTML form post, without any AJAX. There's a bit more info about sending files on this docs page.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
fash100
Tourist
17 0 2

Hi Jason,

Thanks for your reply. 

I have followed the insturctions for "Allow File Uploads" in the documentation.

I see the following code in my theme.liquid file that includes AJAX. How is it possible to remove AJAX?

 {{ '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' | script_tag }}

Thanks,

Azi

0 Likes
Jason
Shopify Expert
10360 158 2010

The line of code you've posted above doesn't related to the AJAX cart feature, even though the word ajax in the url might suggest that. Many themes usually have an option in the Theme Settings to let merchants disable AJAX.

Take a look at your settings (likely in a section called "Cart" or "Advanced") and see what options you've got.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
fash100
Tourist
17 0 2

Hi Jason,

I disabled AJAX in the settings for Cart by selecting Go to the cart option.

This is the Cart setting option: When customer clicks 'Buy now' 

Select a) Go to the cart     or b) Stay on the same page                                                 

"Also known as 'AJAX add to cart'. Choose 'Go to the cart' if you experience issues with 3rd party apps."

I have the following code in my product.customizationadfblouse.liquid:

<p class="line-item-property__field">
          <label>Upload your image here </label>
<input type="file" name="pic" accept="image/*">
</p>
    

All the line items show in the cart, but the image still does not show. Any ideas what could be causing this?

Thank you.

 

0 Likes
Jason
Shopify Expert
10360 158 2010

Your file input doesn't have a property name attached to it. It will need one, for example:

<input type="file" name="properties[Image]" />

 

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
fash100
Tourist
17 0 2

It works! Thank you very much, I appreciate your help!!!

0 Likes
khalidbashir121
New Member
2 0 0

Hey @Jason , Is there a way to pass an image as a line-item property? Like users can select 1 of the listed images and then I pass them to line-item-propery!

Your valuable input helps me to solve my problem, thank you

0 Likes