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

> Das Formular, mit dem Kunden ein eigenes Produktfoto hochladen: Zustände, fertige Eingabefelder, versteckte Felder und die Meldungen dazu.

ProductsInAction lebt davon, dass Kunden eigene Fotos einsenden. Das Formular dafür steht in einem eigenen Template, das Sie in der Shopkonfiguration `shop.config` im Abschnitt `<ProductsInAction>` beim Parameter `Upload` eintragen. Eingebunden wird es über `WS-ExternInclude`, der Inhalt steht dort innerhalb der Klammerung `WS-Include`.

Diese Seite beschreibt die Tags, die nur in diesem Template zur Verfügung stehen.

Wegweiser: [ProductsInAction anbieten](https://dokumentation.websale.de/v8s/interaktive-funktionen/productsinaction-modul.md)

> [!WARNING]
>
> Das Upload-Template wird nur ausgegeben, wenn der Aufruf einen Produktindex mitbringt. Fehlt er, liefert ProductsInAction eine leere Seite zurück. Der Link zum Formular gehört deshalb immer mit `&pi=~PR-ProdIndex~` in das Produkt-Template.

## Darf dieser Besucher überhaupt hochladen

`E-PIA_UPLOAD-ALLOWED` ist die erste Entscheidung im Template. Nur innerhalb dieser Klammerung ist es sinnvoll, ein Formular aufzubauen.

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

Der Bereich greift nur, wenn alle vier Bedingungen erfüllt sind.

| Bedingung | Meldung aus `<ProductsInAction-Txt>`, wenn sie fehlt |
| - | - |
| Der Besucher ist im Shop angemeldet | `NotLoggedIn` |
| Im Kundenkonto steht ein Name | `NoUserName` |
| Der Upload ist für den Shop freigeschaltet | `UploadNotActive` |
| Der bereitgestellte Speicherplatz ist nicht ausgeschöpft | `DiscUsageExceeded` |

Der negative Bereich ist deshalb kein Randfall, sondern der Normalfall für jeden nicht angemeldeten Besucher. Geben Sie dort `E-PIA_ErrorMsg` aus, dann erfährt der Besucher auch, woran es liegt, und Sie können zusätzlich auf die Anmeldung verlinken.

## Das Formular

```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 | Erzeugt |
| - | - |
| `E-PIA_UploadLink` | die Zieladresse des Formulars, ohne Protokoll |
| `E-PIA_HiddenTags()` | alle versteckten Felder, die der Versand braucht |
| `E-PIA_UserNameList()` | die Auswahlliste für die Schreibweise des Namens |
| `E-PIA_FileInput()` | das Feld zum Auswählen der Datei |
| `E-PIA_CommentTextarea()` | das Textfeld für den Kommentar |
| `E-PIA_FileFormatList` | die erlaubten Dateiformate, durch Komma getrennt |
| `E-PIA_FileMaxSize` | die zulässige Dateigröße als Zahl ohne Einheit |

> [!WARNING]
>
> `E-PIA_UploadLink` liefert die Adresse absichtlich ohne `http:` oder `https:`. Schreiben Sie davor `//` und nicht das Protokoll. Ein fest eingetragenes `http://` bricht im gesicherten Bestellprozess den Upload ab, weil der Browser den Wechsel auf eine ungesicherte Adresse blockiert.
>
> Ohne `E-PIA_HiddenTags(upload)` schlägt der Upload fehl. Das Tag setzt nicht nur Shop-, Mall- und Subshopkennung, sondern auch den Sitzungsschlüssel. Fehlt er, weist ProductsInAction den Versand mit der Meldung `LimitExceeded` ab.

Der Parameter von `E-PIA_HiddenTags()` benennt die Aktion. Für das Upload-Formular ist das `upload`, für das Bewertungsformular in der Detailansicht `rating`. Ohne Parameter schreibt das Tag nur die Kennungen und den Sitzungsschlüssel, was für ein Formular ohne eigene Aktion genügt, etwa für die Sortierung in der Galerie.

### Die Auswahlliste für den Namen

`E-PIA_UserNameList()` baut eine Auswahlliste mit bis zu zwei Einträgen: dem vollständigen Namen aus dem Kundenkonto und, sofern der Name ein Leerzeichen enthält, der abgekürzten Form nach dem Muster "Vorname N.".

Damit entscheidet der Kunde selbst, wie viel von seinem Namen unter dem Foto steht. Das senkt die Hemmschwelle spürbar und ist der Grund, warum es hier eine Auswahlliste und kein einfaches Eingabefeld gibt.

> [!WARNING]
>
> Setzen Sie um `E-PIA_UserNameList()`, `E-PIA_FileInput()` und `E-PIA_CommentTextarea()` kein eigenes `select`-, `input`- oder `textarea`-Element. Die Tags bringen das vollständige Element samt Feldnamen mit. Was Sie in die Klammern schreiben, wird als zusätzliches Attribut übernommen, also etwa eine CSS-Klasse oder eine Kennung.

`E-PIA_FileMaxSize` gibt nur die konfigurierte Zahl aus. Die Einheit schreiben Sie im Template dahinter.

## Meldungen und Bestätigung

| Tag | Wirkung |
| - | - |
| `E-PIA_ErrorMsg` | der Fehlertext zur letzten Aktion |
| `E-PIA_InfoMsg` | der Hinweistext zur letzten Aktion |
| `E-PIA_UPLOAD-SUCCESSFULL` | greift, wenn der Upload angekommen ist |
| `E-PIA_UPLOAD-ERROR` | greift, wenn beim Upload etwas schiefging |

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

Innerhalb von `E-PIA_UPLOAD-SUCCESSFULL` sind auch die Bilddaten-Tags gefüllt, also etwa `E-PIA_FileName` oder `E-PIA_CreateDate`. Vorher beziehen sie sich auf kein Bild und bleiben leer.

Referenz: [E-PIA\_ (Bilddaten)](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/bilddaten.md)

> [!WARNING]
>
> Alle Texte der Meldungen stehen in der Shopkonfiguration `shop.config` im Abschnitt `<ProductsInAction-Txt>` und nicht im Template. Ein dort fehlender Eintrag führt zu einer leeren Meldung, der Besucher sieht dann einen Fehler ohne Begründung.

Referenz: [Abschnitt ProductsInAction-Txt](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md#productsinaction-txt)

## Der Upload per AJAX

`E-PIA_AJAX` klammert die Marker ein, mit denen die mitgelieferte JavaScript-Bibliothek die Rückmeldung nach dem Absenden in die Seite einsetzt. Die Marker erscheinen nur beim AJAX-Aufruf, im normalen Seitenaufbau bleiben sie weg.

```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]
>
> Öffnender und schließender Marker gehören jeweils in eine eigene `E-PIA_AJAX`-Klammer. Der Inhalt dazwischen steht außerhalb, denn er soll auch ohne AJAX in der Seite stehen.
>
> Die CSS-Klassennamen `box_info_hinweis` und `text_gross` sowie die Kennungen `ws_actimg_info_div`, `ws_actimg_error_div` und `ws_actimg_uploadForm` sind in der JavaScript-Bibliothek fest hinterlegt. Benennen Sie sie nicht um, sonst findet das Skript die Container nicht mehr.

Das Skript erwartet außerdem eine Variable `actimgVar` im Kopf der Seite, in der die erlaubten Formate aus `E-PIA_FileFormatList` und die Fehlertexte aus den `FMSG-`Tags stehen. Der Wegweiser zeigt den vollständigen Block.

Materialien: [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md)

## Die Tags im Überblick

| Tag | Einzel-Tag | Bereichs-Tag | negatives Bereichs-Tag | Schleifen-Tag |
| - | - | - | - | - |
| `E-PIA_UPLOAD-ALLOWED` | – | ja | ja | – |
| `E-PIA_UPLOAD-SUCCESSFULL` | – | ja | ja | – |
| `E-PIA_UPLOAD-ERROR` | – | ja | ja | – |
| `E-PIA_AJAX` | – | ja | ja | – |
| `E-PIA_UploadLink` | ja | – | – | – |
| `E-PIA_HiddenTags()` | ja | – | – | – |
| `E-PIA_UserNameList()` | ja | – | – | – |
| `E-PIA_FileInput()` | ja | – | – | – |
| `E-PIA_CommentTextarea()` | ja | – | – | – |
| `E-PIA_FileFormatList` | ja | – | – | – |
| `E-PIA_FileMaxSize` | ja | – | – | – |
| `E-PIA_ErrorMsg` | ja | ja | ja | – |
| `E-PIA_InfoMsg` | ja | ja | ja | – |

`E-PIA_HiddenTags()`, `E-PIA_ErrorMsg` und `E-PIA_InfoMsg` sind in allen drei ProductsInAction-Templates zulässig. Die übrigen Tags dieser Seite gelten nur im Upload-Template.

## Verwandte Themen

* Wegweiser: ProductsInAction anbieten
* Referenz: [Abschnitt ProductsInAction](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md#productsinaction)
* Referenz: [E-PIA\_ (Bilddaten)](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/bilddaten.md)
* Referenz: [E-PIA\_ (Galerie)](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/galerie.md)
* Referenz: [E-PIA\_ (Einzelansicht und Bewertung)](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/einzelansicht-und-bewertung.md)


## Related topics

- [E-PIA_ (Bilddaten)](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/bilddaten.md)
- [E-PIA_ (Galerie)](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/galerie.md)
- [E-PIA_ (Einzelansicht und Bewertung)](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/einzelansicht-und-bewertung.md)
- [ProductsInAction-Modul](https://dokumentation.websale.de/v8s/interaktive-funktionen/productsinaction-modul.md)
- [PIA- (ProductsInAction)](https://dokumentation.websale.de/v8s/referenz/tags/pia-productsinaction.md)


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