Add an Uploadcare file upload option to product form

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

1. 1

   In your website (or the page where your Foxy product will reside), paste the uploader script into your Foxy product form.

2. 2

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

3. 3

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

4. 4

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

   Copy Copied

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

5. 5

   Your Foxy product form HTML should look similar to this:

   Copy Copied

   <form
         action="https://foxy.foxycart.com/cart"
         method="post"
         accept-charset="utf-8"
       >
         <input type="hidden" name="name" value="My Foxy Product" />
         <input type="hidden" name="price" value="10" />
    
       <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
           type="submit"
           value="Add To Cart"
           class="submit"
         />
       </form>

Demo

Access it here.

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.