File Upload

Written By Floris de Vries

Last updated 2 days ago

The File Upload field allows customers to upload one or more files as part of their product configuration. This is commonly used for custom designs, print files, reference images, or supporting documents. Uploaded files can be required and may also influence pricing when referenced in later calculation steps.

Label

The Label defines the text displayed above the file upload field on the product page.Use a clear and descriptive label so customers know what kind of file they need to upload.

Example: Upload your design file

Key (unique ID)

The Key is a unique technical identifier for the file upload field.It is used internally by the calculator and can be referenced in pricing logic or conditional steps.

Important rules:

  • Only lowercase letters are allowed

  • Numbers and underscores are supported

  • No spaces or special characters

Examples: design_file · reference_upload

Required field

When Required field is enabled, the customer must upload at least one file before the product can be added to the cart.

Upload mode

The Upload mode determines how customers add files.

  • Dropzone – a clearly marked drop area. Customers can drag and drop files into it or click to open the file picker. Best for design and print files where the upload is an important part of the page.

  • Button – a single button that opens the file picker. Compact, useful when the file is optional or you want a less prominent control. The Placeholder field is used as the button label in this mode.

Allowed file types

You can restrict which file types customers are allowed to upload. Only the selected types are accepted by the file picker and validated on the storefront.

Supported file types include:

  • Images (JPG, PNG, WebP, GIF, SVG)

  • Documents (PDF, DOCX, XLSX, PPTX)

  • Video (MP4, MOV, AVI, WebM)

  • Audio (MP3, WAV)

Both .jpg and .jpeg are accepted automatically when JPEG is enabled.

Max total upload size

The Max total upload size defines the maximum combined file size that can be uploaded.

Example: 50 MB

If the total size exceeds this limit, the upload is rejected with a translatable error message.

Max files

The Max files setting defines how many files the customer can upload, between 1 and 5.

Example:

  • 1 for a single file upload

  • 5 for up to five files

Numeric value (float)

The Numeric value (float) is used in pricing formulas. The value is multiplied by the number of files the customer uploads:

  • If the configured value is 15 and the customer uploads two files, the field contributes 30 to the formula.

  • If no file is uploaded, the contribution is 0.

This makes it easy to charge a per-file design or handling fee. Set the value to 0 if the upload should not affect the price.

💡 Tip:Always communicate accepted file types and size limits clearly in the field label or a Rich Text block above the field. Translatable validation messages make this experience smooth in every language.