> ## Documentation Index
> Fetch the complete documentation index at: https://docs.customei.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Let customers upload files

> Collect a photo for the artwork or a file for your records, and choose which editing tools the shopper gets.

Two option types collect something from the shopper's own computer or phone.

| Type             | Use it for                                                                                    |
| ---------------- | --------------------------------------------------------------------------------------------- |
| **Image upload** | A photo that goes onto the design: a pet, a face, a logo                                      |
| **File upload**  | Anything you just need to receive: a document, a sound file, artwork you will handle yourself |

The difference matters. **Image upload** is the one you connect to a picture layer on your design, and it is the only one that offers editing tools. **File upload** accepts far more kinds of file but never touches the artwork.

## Image upload

<Frame caption="Image upload settings. The dark banner is a preview of the shopper's upload box, not a setting.">
  <img src="https://mintcdn.com/nexlify/EU53-heGhju2TXgk/images/optionsets/image-upload-settings.png?fit=max&auto=format&n=EU53-heGhju2TXgk&q=85&s=0da68aa4692f5f8f73c289a2e6fabb24" alt="The option set editor with the image upload settings card outlined, showing Show suggested uploaded files, a preview banner reading Click to upload or drag and drop, Allow multiple uploads, Allowed file types chips and the More settings block." width="3840" height="2400" data-path="images/optionsets/image-upload-settings.png" />
</Frame>

| Setting                           | What it does                                                                                                    |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| **Show suggested uploaded files** | Offers the shopper pictures they uploaded before, so a returning customer doesn't hunt for the same photo twice |
| **Suggestions rows**              | One or two rows of those earlier pictures                                                                       |
| **Suggestions title**             | The wording above them. Defaults to *Previously uploaded*                                                       |
| **Allow multiple uploads**        | Lets one option collect several pictures                                                                        |
| **Max number of files**           | Only with multiple uploads on. Default 10, most you can allow is 20                                             |
| **Allowed file types**            | Which formats you accept. Starts at PNG, JPEG, JPG and WebP                                                     |

Under **More settings** you also get **Min image width** and **Min image height**. Fill these in and a photo smaller than that is refused before it reaches you. It is the cheapest way to stop blurry prints.

<Tip>
  Work out the smallest photo your product can print well and put those numbers in **Min image width** and **Min image height**. A customer who is told *this photo is too small* while they are still shopping is much happier than one who gets a fuzzy mug.
</Tip>

### The wording your shopper reads

Every word on the upload box can be reworded, under **More settings** in the **Wording** section: the upload link, the drag-and-drop line, the file hint, the change and remove buttons, the uploading message, and the two lines shown while a file is being dragged over the page. Leave a box empty and the wording in grey is what the shopper sees.

## Image editing tools

By default the shopper uploads a picture and that is that. Tick a tool here and they get to fix the photo before ordering.

<Frame caption="Image editing tools, with Crop, Remove background and Image filters turned on.">
  <img src="https://mintcdn.com/nexlify/EU53-heGhju2TXgk/images/optionsets/image-editing-tools.png?fit=max&auto=format&n=EU53-heGhju2TXgk&q=85&s=ef9af7e9efc1cd8438bed323d54f2bc0" alt="The Image editing tools block outlined, listing Crop, Face detection, Remove background, Face cutout, Image filters and AI filters, with three of them ticked and a Pixelcut badge beside Remove background." width="3840" height="2400" data-path="images/optionsets/image-editing-tools.png" />
</Frame>

| Tool                  | What the shopper can do                                         |
| --------------------- | --------------------------------------------------------------- |
| **Crop**              | Trim and reframe their photo                                    |
| **Face detection**    | Nothing, this one checks. It refuses a photo with no face in it |
| **Remove background** | Cut the background away, leaving the subject                    |
| **Face cutout**       | Keep only the person, tighter than a background removal         |
| **Image filters**     | Apply looks you allow, such as black and white or sepia         |
| **AI filters**        | Restyle the photo                                               |

**Drag to reorder tools.** The order in the list is the order the tools run in. Keep **Face detection** near the top: it is a gate, so a photo it rejects should be rejected before the paid tools touch it.

Ticking **Image filters** adds a settings icon. Click it and pick which of the twelve looks the shopper may use.

<Frame caption="Choose which filters the shopper gets.">
  <img src="https://mintcdn.com/nexlify/EU53-heGhju2TXgk/images/optionsets/image-filters.png?fit=max&auto=format&n=EU53-heGhju2TXgk&q=85&s=8ddaf0d61363cf2b0f49791833303e09" alt="The Select filters popover showing twelve thumbnails: Brightness, Contrast, Saturation, Grayscale, Sepia, Blur, Sharpen, Invert, Hue Rotate, Vintage, Warm and Cool." width="776" height="728" data-path="images/optionsets/image-filters.png" />
</Frame>

### Who does the work, and who pays

Background removal, face cutout and face detection are done by an outside service. Each of those rows gets a settings icon showing which service is used and roughly what one photo costs.

<Frame caption="Each photo service shows its rough cost per picture.">
  <img src="https://mintcdn.com/nexlify/EU53-heGhju2TXgk/images/optionsets/image-tool-provider.png?fit=max&auto=format&n=EU53-heGhju2TXgk&q=85&s=3604d8af79aefb9fd24397498a8f0510" alt="The Provider popover for Remove background, offering Pixelcut at about 0.016 dollars an image, fal.ai BiRefNet at about 0.005, and remove.bg at about 0.05." width="580" height="464" data-path="images/optionsets/image-tool-provider.png" />
</Frame>

There are two ways to pay for it:

* **Use Customei's service.** Nothing to set up. Each photo the shopper processes spends credits from your account.
* **Use your own account with that service.** Add your own key on the [Integrations tab](/integrations/overview) and Customei uses it instead. Those photos spend no credits, and the service bills you directly.

<Note>
  Face detection has a free option too. **MediaPipe** does the checking inside the shopper's own browser, so it costs nothing either way.
</Note>

<Warning>
  Turn on only the tools your product needs. Every extra tool is a decision the shopper has to make, and the paid ones cost you money on photos that may never become an order.
</Warning>

## File upload

Use this when you only need to receive the file.

<Frame caption="File upload settings.">
  <img src="https://mintcdn.com/nexlify/EU53-heGhju2TXgk/images/optionsets/file-upload-settings.png?fit=max&auto=format&n=EU53-heGhju2TXgk&q=85&s=64e581bb1c47910d43e63da2afdaf747" alt="The option set editor with the file upload settings card outlined, showing Allow multiple uploads, an Initial file dropzone with an Add image button, Allowed file types chips, and the More settings block with Min image width, Min image height and the Wording fields." width="3840" height="2400" data-path="images/optionsets/file-upload-settings.png" />
</Frame>

It shares **Allow multiple uploads**, **Max number of files**, the size limits and the wording fields with image upload, plus two of its own:

* **Initial file**: a file already attached when the page opens, such as a blank form for the shopper to work from.
* **Allowed file types**: a much longer list here, including PDF, EPS, AI, ZIP, sound and video files.

<Warning>
  A **File upload** cannot be connected to a picture layer on your design, and a file the shopper sends here never appears in a preview. If the upload is meant to become part of the artwork, use **Image upload**.
</Warning>

## Where to next

<CardGroup cols={2}>
  <Card title="Connect options to your design" icon="link" href="/optionsets/connect-to-a-template">
    Put the uploaded photo into a picture layer.
  </Card>

  <Card title="Pictures in the editor" icon="image" href="/editor/images-and-photos">
    How a picture layer is set up in the first place.
  </Card>
</CardGroup>
