Add an Uploadcare file upload field to checkout page

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, scroll until you see the Install File Uploader section.

4. 4

   Select the JavaScript integration option.

5. 5

   Customize your upload widget following Step 1.

6. 6

   Copy the code that's outputted in Step 2.

Add Widget to Checkout Page

1. 1

   In the Foxy admin, go to Settings -> Checkout

2. 2

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

   Copy Copied

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

3. 3

   Replace "PASTE_INPUT_FIELD_HTML_HERE" with the HTML code you copied from the Uploadcare dashboard.

4. 4

   You will see 3 tags: uc-config, uc-file-uploader-regular (or -minimal), and uc-upload-ctx-provider.

5. 5

   Change the ctx-name attribute value on all the tags to the product option name you want.

6. 6

   Inside the uc-file-uploader-regular tag include:

   Copy Copied

   <uc-form-input required ctx-name="upload"></uc-form-input>

7. 7

   Your Foxy Custom checkout field code should look similar to this:

   Copy Copied

   <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>
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"/>
       <script type="module">
         import * as LR from "https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.js";
         LR.defineComponents(LR);
       </script>
       <uc-config ctx-name="upload" pubkey="demopublickey" multiple></uc-config>
   
       <uc-upload-ctx-provider ctx-name="upload"></uc-upload-ctx-provider>
   
         <uc-file-uploader-regular ctx-name="upload">
           <uc-form-input required ctx-name="upload"></uc-form-input>
         </uc-file-uploader-regular>
         <input     
      </div>
     </div>  
    </div>
   </div>

8. 8

   Save your template configuration settings by clicking the "Checkmark" 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.