Skip to content
Search for answers/

2 min read • Updated 2 years ago

Add an Uploadcare file upload field to checkout page

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

Configure Uploadcare Widget

  1. 1

    Create your free Uploadcare account here.

  2. 2

    Create you first Project in Uploadcare here.

  3. 3

    From the Get Started page, select File Uploader under the Integrate Uploading section.

  4. 4

    Follow Step 1 and Step 2 to customize the file upload widget.

Add Widget to Checkout Page

  1. 1

    In the Foxy admin, go to your template configuration settings.

  2. 2

    Under the "Cart" section, turn on the "Add custom header and footer code to your templates" option.

  3. 3

    In the "custom header" text box, paste the code snippet below:

    <script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.min.js"></script>
  4. 4

    On the same Foxy settings page, under the "Checkout" section, turn on the "Add custom form fields to your checkout" option.

  5. 5

    Paste the code below into the "custom checkout fields" text box.

    <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 the button below to upload your files.</p>        PASTE_INPUT_FIELD_HTML_HERE      </div>    </div>  </div></div>
  6. 6

    On the Uploadcare upload widget setup page, copy the form input HTML in Step 4.

  7. 7

    Go back to the Foxy settings page and replace "PASTE_INPUT_FIELD_HTML_HERE" with the HTML you just copied.

  8. 8

    Add the "name" parameter to the input HTML (ex: name="Upload"). The name value can be changed to anything you want.

  9. 9

    Save your template configuration settings by clicking the "Update" button at the bottom. 

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.

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.