Add an Uploadcare file upload field to checkout page

Configure Uploadcare Widget

1. Create your free Uploadcare account here.
2. Create you first Project in Uploadcare here.
3. From the Get Started page, select File Uploader under the Integrate Uploading section.
4. Follow Steps 1-3 to customize the file upload widget.

Add Widget to Checkout Page

1. Under Step 4, Install, make sure that JavaScript is selected, then click CDN in the main window.
2. Copy the first code snippet to your computer's clipboard. In the Foxy admin, go to your template configuration settings.
3. Under the "Cart" section, turn on the "Add custom header and footer code to your templates" option.
4. In the "custom header" text box, paste the code snippet that you copied in Step 2 of this article.
5. On the same Foxy settings page, under the "Checkout" section, turn on the "Add custom form fields to your checkout" option.
6. 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_UPLOADCARE_WIDGET_CODE_HERE
         </div>
       </div>
     </div>
   </div>

7. On the Uploadcare upload widget setup page, copy the configuration values code.
8. Go back to the Foxy settings page and replace "PASTE_INPUT_FIELD_HTML_HERE" with the configuration values code you just copied.
9. Return to the Uploadcare upload widget setup page and copy the Put on Page code snippet.
10. Go back to the Foxy settings page and add that code right after the configuration code.
11. Add the following code after the <lr-file-uploader-regular> element in order to see the link to the file in your (ex: name="Upload"). The input-name value can be changed to anything you want.

    <lr-data-output
      ctx-name="my-uploader"
      use-input
      use-form
      input-name="file url"
    ></lr-data-output>

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

Final Results

Accessing Uploaded Files