Wie lade ich Dateien in Formularen ohne JavaScript hoch?

Ein Formular kann mit einem oder mehreren Datei-Uploader ausgestattet werden. Die Übermittlung der Dateien wird vom Cloudrexx Uploader übernommen. Dies ermöglicht es Dateien beliebiger Größe bei einer Formular-Anfrage zu übermitteln. Der Cloudrexx Uploader verwendet dazu JavaScript.

Datei-Übermittlung ohne JavaScript

Alternativ kann mit dem Legacy-Mode die Datei-Übermittlung ohne JavaScript ermöglicht werden. Im Legacy-Mode werden die Datei-Uploads direkt über die native Web-Technologie Form-POST übermittelt. Vorteil dieser Lösung ist, dass dazu keine Plugins und JavaScript benötigt wird. Nachteil ist jedoch, dass bei dieser Variante nicht beliebig Grosse Dateien übermittelt werden können. Die maximal erlaubte Dateigrösse ist dabei von der Server-Konfiguration abhängig.

Legacy-Mode einrichten

Um den Legacy-Mode zu aktivieren, muss in der zum Formular dazugehörenden Anwendungsvorlage der folgende HTML-Code entfernt werden:

<input type="hidden" name="unique_id" value="[[CONTACT_UNIQUE_ID]]" />

Weiter muss der HTML-Code der Datei-Upload-Felder angepasst werden. Der originale HTML-Code eines Datei-Upload-Feldes sieht in etwa wie folgt aus:

<div class="contact row form-group">
    <label for="contactFormFieldId_[[CONTACT_FORM_FIELD_ID]]">[[CONTACT_FORM_FIELD_LABEL]]<!-- BEGIN contact_form_field_required --> <strong class="is_required">*</strong><!-- END contact_form_field_required --></label>
    <div class="contactFormUpload" id="contactFormUpload_[[CONTACT_FORM_FIELD_ID]]">
        [[CONTACT_UPLOADER_FOLDER_WIDGET]]
        <input type="hidden" name="contactFormUploadId_[[CONTACT_FORM_FIELD_ID]]" value="[[CONTACT_FORM_FIELD_VALUE]]" />
        <input class="contactFormClass_file" id="contactFormFieldId_[[CONTACT_FORM_FIELD_ID]]" type="file" name="contactFormField_[[CONTACT_FORM_FIELD_ID]]" disabled="disabled" />
    </div>
</div>

Das komplette div innerhalb des contact row-DIVs muss durch ein normales HTML-Input-File Element ersetzt werden:

<input class="contactFormClass_file" id="contactFormFieldId_[[CONTACT_FORM_FIELD_ID]]" type="file" name="contactFormField_[[CONTACT_FORM_FIELD_ID]]" />

Der geänderte Code sollte dann wie folgt aussehen: