Add file upload option to checkout page

In this tutorial we show you how to add a file upload option to your checkout page that will send files to your Uploadcare account.

In this article

Configure Uploadcare Widget

1
Create your free Uploadcare account here.
2
Create you first Project in Uploadcare here.
3
Configure your widget here.

Add Widget to Checkout Page

1
In the Foxy admin, go to your Configuration page here.
2
Under the "Cart" section turn on the "Add custom header and footer code to your templates" option.
3
Go back to the Uploadcare Widget page and copy the script snippet. It will look similar to the following: 
<script>
UPLOADCARE_PUBLIC_KEY = "CHANGE_TO_YOUR_PUBLIC_KEY";
</script>
<script charset="utf-8" src="//ucarecdn.com/widget/2.9.0/uploadcare/uploadcare.full.min.js"></script>
4
In the Foxy admin, paste the snippet you just copied into the "Custom Header" textarea.
5
On the same page, under the "Checkout" section, turn on the "Add custom form fields to your checkout" option.
6

Paste the following HTML into the textarea:

<div class="fc-form-group ">
<div class="col-sm-8 col-sm-offset-3">
    <div class="fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active">
        <label class="fc-input-group-container__title fc-input-group-container__title--forced fc-form-label">
            Upload Files
        </label>
        <div class="fc-form-group">
            <p>Click below to upload your image files.</p>
            PASTE INPUT FIELD HTML HERE
        </div>
    </div>
</div>
</div>
7
On the Uploadcare Widget page, copy the form input HTML.
8
Go back to the Foxy Confirguration page and replace "PASTE INPUT FIELD HTML HERE" with the HTML you just copied.
9
Add the "name" parameter to the input HTML (ie: name="uploads") The name value can be changed to anything you want.
10
Save your Configurations changes.

Final Results

If everything has been setup correctly, customers will see a new section on the checkout page where they can click to upload their files. Just like everything else in Foxy, the upload button and surrounding elements can be customized and styled with custom HTML and CSS.

Accessing Uploaded Files

A link to uploaded file(s) will be available in the receipt (both web and email) along with transaction details in the Foxy admin here.