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

# E-PIA_ (Upload)

> The form customers use to upload their own product photo: states, ready-made input fields, hidden fields and the associated messages.

ProductsInAction thrives on customers submitting their own photos. The form for this is in a separate template, which you enter in the shop configuration `shop.config` in the `<ProductsInAction>` section for the `Upload` parameter. It is included via `WS-ExternInclude`; the content is placed there within the `WS-Include` range.

This page describes the tags that are only available in this template.

Guide: Offering ProductsInAction

> [!WARNING]
>
> The upload template is only output if the call includes a product index. If it is missing, ProductsInAction returns an empty page. The link to the form therefore always belongs in the product template with `&pi=~PR-ProdIndex~`.

## Is this visitor allowed to upload at all?

`E-PIA_UPLOAD-ALLOWED` is the first decision in the template. Building a form only makes sense within this range.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{E-PIA_UPLOAD-ALLOWED}
   <!-- das vollständige Upload-Formular -->
{/E-PIA_UPLOAD-ALLOWED}

{!E-PIA_UPLOAD-ALLOWED}
   <p>Ein Upload ist derzeit nicht möglich.</p>
   <p class="fehler">~E-PIA_ErrorMsg~</p>
{/!E-PIA_UPLOAD-ALLOWED}
```

The range only applies if all four conditions are met.

| Condition | Message from `<ProductsInAction-Txt>` if it is not met |
| - | - |
| The visitor is logged in to the shop | `NotLoggedIn` |
| The customer account contains a name | `NoUserName` |
| Upload is enabled for the shop | `UploadNotActive` |
| The allocated storage space is not used up | `DiscUsageExceeded` |

> [!NOTE]
>
> The negative range is therefore not an edge case but the normal case for every visitor who is not logged in. Output `E-PIA_ErrorMsg` there so the visitor also learns the reason; you can additionally link to the login.

## The form

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{E-PIA_UPLOAD-ALLOWED}
   <!-- Für die Adresse des Upload-Links kein Protokoll angeben -->
   <form action="//~E-PIA_UploadLink~"
         id="ws_actimg_uploadForm"
         method="post"
         enctype="multipart/form-data">

      ~E-PIA_HiddenTags(upload)~

      <label>Ihr Name: ~E-PIA_UserNameList(class="eingabe")~</label>
      <label>Bild auswählen: ~E-PIA_FileInput(class="eingabe")~</label>
      <label>Kommentar: ~E-PIA_CommentTextarea(class="eingabe")~</label>

      <p>
         Erlaubte Formate: ~E-PIA_FileFormatList~<br>
         Maximale Größe: ~E-PIA_FileMaxSize~ MB
      </p>

      <button type="submit">Jetzt hochladen</button>
   </form>
{/E-PIA_UPLOAD-ALLOWED}
```

| Tag | Generates |
| - | - |
| `E-PIA_UploadLink` | the target address of the form, without protocol |
| `E-PIA_HiddenTags()` | all hidden fields required for submission |
| `E-PIA_UserNameList()` | the selection list for how the name is written |
| `E-PIA_FileInput()` | the field for selecting the file |
| `E-PIA_CommentTextarea()` | the text field for the comment |
| `E-PIA_FileFormatList` | the permitted file formats, separated by commas |
| `E-PIA_FileMaxSize` | the permitted file size as a number without unit |

> [!WARNING]
>
> `E-PIA_UploadLink` intentionally returns the address without `http:` or `https:`. Write `//` in front of it, not the protocol. A hard-coded `http://` aborts the upload in the secure order process, because the browser blocks the switch to an insecure address.

> [!WARNING]
>
> Without `E-PIA_HiddenTags(upload)`, the upload fails. The tag sets not only the shop, mall and subshop identifiers but also the session key. If it is missing, ProductsInAction rejects the submission with the message `LimitExceeded`.

> [!NOTE]
>
> The parameter of `E-PIA_HiddenTags()` names the action. For the upload form, this is `upload`; for the rating form in the detail view, `rating`. Without a parameter, the tag only writes the identifiers and the session key, which is sufficient for a form without its own action, such as the sorting in the gallery.

### The selection list for the name

`E-PIA_UserNameList()` builds a selection list with up to two entries: the full name from the customer account and, if the name contains a space, the abbreviated form following the pattern "First name L.".

> [!NOTE]
>
> This lets customers decide for themselves how much of their name appears below the photo. This noticeably lowers the barrier to participation and is the reason why there is a selection list here rather than a simple input field.

> [!WARNING]
>
> Do not wrap `E-PIA_UserNameList()`, `E-PIA_FileInput()` and `E-PIA_CommentTextarea()` in your own `select`, `input` or `textarea` element. The tags bring the complete element including the field name. Whatever you write in the parentheses is added as an additional attribute, for example a CSS class or an ID.

> [!NOTE]
>
> `E-PIA_FileMaxSize` only outputs the configured number. You write the unit after it in the template.

## Messages and confirmation

| Tag | Effect |
| - | - |
| `E-PIA_ErrorMsg` | the error text for the last action |
| `E-PIA_InfoMsg` | the information text for the last action |
| `E-PIA_UPLOAD-SUCCESSFULL` | applies if the upload has arrived |
| `E-PIA_UPLOAD-ERROR` | applies if something went wrong during the upload |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{E-PIA_UPLOAD-SUCCESSFULL}
   <div class="box_info_hinweis">
      <p>~E-PIA_InfoMsg~</p>
      <p>Ihr Bild "~E-PIA_FileName~" ist bei uns eingegangen und wird geprüft.</p>
   </div>
{/E-PIA_UPLOAD-SUCCESSFULL}

{E-PIA_UPLOAD-ERROR}
   <div class="box_info_hinweis">
      <p class="fehler">~E-PIA_ErrorMsg~</p>
   </div>
{/E-PIA_UPLOAD-ERROR}
```

> [!NOTE]
>
> Within `E-PIA_UPLOAD-SUCCESSFULL`, the image data tags are also filled, for example `E-PIA_FileName` or `E-PIA_CreateDate`. Before that, they do not refer to any image and remain empty.

Reference: E-PIA\_ (Image data)

> [!WARNING]
>
> All message texts are stored in the shop configuration `shop.config` in the `<ProductsInAction-Txt>` section, not in the template. A missing entry there leads to an empty message, and the visitor then sees an error without explanation.

Reference: ProductsInAction-Txt section

## Uploading via AJAX

`E-PIA_AJAX` encloses the markers with which the supplied JavaScript library inserts the response after submission into the page. The markers only appear in the AJAX call; in the normal page build they are omitted.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div id="ws_actimg_info_div" style="display:none">
   {E-PIA_AJAX}<ws-ajax-ws_actimg_info_div>{/E-PIA_AJAX}
      Die Datei wurde erfolgreich hochgeladen.
   {E-PIA_AJAX}</ws-ajax-ws_actimg_info_div>{/E-PIA_AJAX}
</div>

<div id="ws_actimg_error_div" style="display:none">
   {E-PIA_AJAX}<ws-ajax-ws_actimg_error_div>{/E-PIA_AJAX}
      <div class="box_info_hinweis">
         <div class="text_gross">~E-PIA_ErrorMsg~</div>
      </div>
   {E-PIA_AJAX}</ws-ajax-ws_actimg_error_div>{/E-PIA_AJAX}
</div>
```

> [!WARNING]
>
> The opening and closing markers each belong in their own `E-PIA_AJAX` range. The content in between stays outside, because it should also be on the page without AJAX.

> [!WARNING]
>
> The CSS class names `box_info_hinweis` and `text_gross` as well as the IDs `ws_actimg_info_div`, `ws_actimg_error_div` and `ws_actimg_uploadForm` are hard-coded in the JavaScript library. Do not rename them, otherwise the script can no longer find the containers.

> [!NOTE]
>
> The script also expects a variable `actimgVar` in the page header containing the permitted formats from `E-PIA_FileFormatList` and the error texts from the `FMSG-` tags. The guide shows the complete block.

Materials: WEBSALE JavaScript library

## The tags at a glance

| Tag | Single tag | Range tag | Negative range tag | Loop tag |
| - | - | - | - | - |
| `E-PIA_UPLOAD-ALLOWED` | – | yes | yes | – |
| `E-PIA_UPLOAD-SUCCESSFULL` | – | yes | yes | – |
| `E-PIA_UPLOAD-ERROR` | – | yes | yes | – |
| `E-PIA_AJAX` | – | yes | yes | – |
| `E-PIA_UploadLink` | yes | – | – | – |
| `E-PIA_HiddenTags()` | yes | – | – | – |
| `E-PIA_UserNameList()` | yes | – | – | – |
| `E-PIA_FileInput()` | yes | – | – | – |
| `E-PIA_CommentTextarea()` | yes | – | – | – |
| `E-PIA_FileFormatList` | yes | – | – | – |
| `E-PIA_FileMaxSize` | yes | – | – | – |
| `E-PIA_ErrorMsg` | yes | yes | yes | – |
| `E-PIA_InfoMsg` | yes | yes | yes | – |

`E-PIA_HiddenTags()`, `E-PIA_ErrorMsg` and `E-PIA_InfoMsg` are permitted in all three ProductsInAction templates. The other tags on this page only apply in the upload template.

## Related topics

* Guide: Offering ProductsInAction
* Reference: ProductsInAction section
* Reference: E-PIA\_ (Image data)
* Reference: E-PIA\_ (Gallery)
* Reference: E-PIA\_ (Single view and rating)


## Related topics

- [E-PIA_ (Gallery)](https://dokumentation.websale.de/en/v8s/referenz/tags/e-pia/galerie.md)
- [E-PIA_ (Image data)](https://dokumentation.websale.de/en/v8s/referenz/tags/e-pia/bilddaten.md)
- [E-PIA_ (Single view and rating)](https://dokumentation.websale.de/en/v8s/referenz/tags/e-pia/einzelansicht-und-bewertung.md)
- [PIA- (ProductsInAction)](https://dokumentation.websale.de/en/v8s/referenz/tags/pia-productsinaction.md)
- [Upload module: tags](https://dokumentation.websale.de/en/v8s/referenz/tags/upload-modul-tags.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.