<p>This is definitely possible. First create a file field to attach to your order in the control panel. Then create a <code>file</code> input type with a name attribute that uses the field you created <code>name="fields[fieldName]"</code>. This would then get sent in the post request to <code>updateCart</code>.</p>

<pre><code>&lt;form method="POST" enctype="multipart/form-data"&gt;
  &lt;input type="hidden" name="action" value="commerce/cart/updateCart"&gt;
  {{ getCsrfInput() }}
  &lt;input type="file" name="fields[fieldName][]"&gt;
  &lt;button type="submit"&gt;Upload file&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p>Then you could show the image on the cart/order using something like the following:</p>

<pre><code>{% if cart.fieldName|length %}
  &lt;img src="{{ cart.fieldName[0].url }}"&gt;
{% endif %}
</code></pre>

CC BY-SA 3.0
2016-06-10T09:53:37.407Z
Hi Luke, can I ask for a clarification:

Adding the upload field on the front end according to your code also creates the upload button. When clicked to upload the image this then takes the user to the cart. This doesn't give the user an opportunity to select other options against the product int he drop down. Should we be removing the "Add to Cart" button and relying on the new upload button?
Dan Lee
CC BY-SA 3.0
2016-06-10T09:58:44.473Z
I tested this on my cart page as the field is attached to the current cart not a single item. You might be able to write some plugin code to attach the image URL after upload to the lineItem before it gets added to the cart.
Luke Pearce
CC BY-SA 3.0
2016-06-10T11:15:17.883Z
I see - so this goes on the cart page in a separate form block. Trying this I find that the upload button when clicked refreshed the page - there is no indication of a file stored against the cart item. Are you suggesting that we would need extra plugin functionality to achieve that?
Dan Lee
CC BY-SA 3.0
2016-06-10T11:17:26.510Z
On refresh, if the upload was successful the file would be added to the cart and could be displayed on the page using something like `{% if cart.fieldName|length %}{{ cart.fieldName[0].title }}{% endif %}` or if it's an image you'd just print the URL in an image tag.
Luke Pearce
CC BY-SA 3.0
2016-06-10T13:02:52.513Z
Thanks Luke. 1. Where have you placed the form block in your cart file? 2. What is the significance of **|length** in the code snippet above? Here is mine code but again it doesn't want to upload or display files or showing them currently.
{% if cart.designFile|length %}{{ cart.designFile[0].url }}{% endif %}
Dan Lee
CC BY-SA 3.0
2016-06-10T13:49:41.333Z
Just tested again and I could only make it save the file to the order if I included a hidden input with a black fieldname `<input type="hidden" name="fields[]">` even though I'm sure I had it working yesterday. I'll update my original post with the answers to your other questions.
Luke Pearce
CC BY-SA 3.0
2016-06-14T07:21:02.107Z
Hi Luke - I'm still puzzling over this. Would you be up for comparing code?
Dan Lee
CC BY-SA 3.0
2016-06-14T09:42:31.990Z
Yeah sure - are you in the Craft Slack team?
Luke Pearce
CC BY-SA 3.0
2016-06-14T10:13:24.257Z
I am now. How do I find you?
Dan Lee
CC BY-SA 3.0
2016-06-09T11:40:54.687Z
2016-06-10T11:19:12.427Z
2016-06-10T11:19:12.427Z
Luke Pearce
<p>For anyone wanting to add a field on the front end, this from the documentation.</p>

<p><strong>Uploading Files from Front-end Entry Forms</strong></p>

<p>If you want to allow users to upload files to an Assets field from a front-end entry form, you just need to do two things.</p>

<p>First, make sure your  tag has an <strong><em>enctype="multipart/form-data"</em></strong> attribute, so that it is capable of uploading files.</p>

<p>Add a file input to the form, in the same way you would add a textarea for a Plain Text field:</p>

<pre><code>&lt;input type="file" name="fields[assetsFieldHandle]"&gt;
</code></pre>

<p>If you want your form to allow multiple files being uploaded at once, just add the multiple attribute, make sure that the input name ends in “<strong>[]</strong>”:</p>

<pre><code>&lt;input type="file" name="fields[assetsFieldHandle][]" multiple&gt;
</code></pre>

CC BY-SA 3.0
2016-06-10T09:53:57.440Z
2016-06-10T09:53:57.440Z
Dan Lee
<p>I'm looking at Craft Commerce as a possible solution. </p>

<p>In the order process we want customers to be able to upload a file against their order which can then be accessed by the shop administrators. Is this possible and how would we go about that?</p>

<p>I have been looking through the documentation and seen nothing that clearly demonstrates this (yet!). </p>

<field><plugin-craftcommerce><upload>
Craft Commerce: Upload File Field in Order?
# Craft Commerce: Upload File Field in Order?

(Asked by: username_0 on 2016-06-09)

I'm looking at Craft Commerce as a possible solution.

In the order process we want customers to be able to upload a file against their order which can then be accessed by the shop administrators. Is this possible and how would we go about that?

I have been looking through the documentation and seen nothing that clearly demonstrates this (yet!).

**Tags:** field, plugin-craftcommerce, upload

---

## 2 answers

### Answer by username_1 on 2016-06-09. Score: 2 | Accepted answer

This is definitely possible. First create a file field to attach to your order in the control panel. Then create a file input type with a name attribute that uses the field you created name="fields[fieldName]". This would then get sent in the post request to updateCart.

  
  {{ getCsrfInput() }}
  
  Upload file


Then you could show the image on the cart/order using something like the following:
{% if cart.fieldName|length %}
  
{% endif %}

> **Comments:**
> **username_0**: Hi Luke, can I ask for a clarification:  Adding the upload field on the front end according to your code also creates the upload button. When clicked to upload the image this then takes the user to the cart. This doesn't give the user an opportunity to select other options against the product int he drop down. Should we be removing the "Add to Cart" button and relying on the new upload button?  
> **username_1**: I tested this on my cart page as the field is attached to the current cart not a single item. You might be able to write some plugin code to attach the image URL after upload to the lineItem before it gets added to the cart.  
> **username_0**: I see - so this goes on the cart page in a separate form block. Trying this I find that the upload button when clicked refreshed the page - there is no indication of a file stored against the cart item. Are you suggesting that we would need extra plugin functionality to achieve that?  
> **username_1**: On refresh, if the upload was successful the file would be added to the cart and could be displayed on the page using something like `{% if cart.fieldName|length %}{{ cart.fieldName[0].title }}{% endif %}` or if it's an image you'd just print the URL in an image tag.  
> **username_0**: Thanks Luke. 1. Where have you placed the form block in your cart file? 2. What is the significance of **|length** in the code snippet above? Here is mine code but again it doesn't want to upload or display files or showing them currently. {% if cart.designFile|length %}{{ cart.designFile[0].url }}{% endif %}  
> **username_1**: Just tested again and I could only make it save the file to the order if I included a hidden input with a black fieldname `<input type="hidden" name="fields[]">` even though I'm sure I had it working yesterday. I'll update my original post with the answers to your other questions.  
> **username_0**: Hi Luke - I'm still puzzling over this. Would you be up for comparing code?  
> **username_1**: Yeah sure - are you in the Craft Slack team?  
> **username_0**: I am now. How do I find you?  

---

### Answer by username_0 on 2016-06-10. Score: 0

For anyone wanting to add a field on the front end, this from the documentation.
Uploading Files from Front-end Entry Forms
If you want to allow users to upload files to an Assets field from a front-end entry form, you just need to do two things.
First, make sure your  tag has an enctype="multipart/form-data" attribute, so that it is capable of uploading files.
Add a file input to the form, in the same way you would add a textarea for a Plain Text field:


If you want your form to allow multiple files being uploaded at once, just add the multiple attribute, make sure that the input name ends in “[]”:


---

