Craft Commerce: Upload File Field in Order?

Question

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

Answer 1

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 %}

Answer 2

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>