1

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!).

2

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.

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

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

{% if cart.fieldName|length %}
  <img src="{{ cart.fieldName[0].url }}">
{% endif %}
| improve this answer | |
  • 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 Jun 10 '16 at 9:53
  • 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 Jun 10 '16 at 9:58
  • 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 Jun 10 '16 at 11:15
  • 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 Jun 10 '16 at 11:17
  • 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. – Luke Pearce Jun 10 '16 at 13:49
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:

<input type="file" name="fields[assetsFieldHandle]">

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 “[]”:

<input type="file" name="fields[assetsFieldHandle][]" multiple>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.