Legacy-Mode: Datei-Uploads über Form-POST ohne JavaScript übermitteln

Geändert am Tue, 14 Aug 2018 um 04:46 PM

Ein Formular kann mit einem Datei-Upload (oder mehrere) ausgestattet werden. Die Übermittlung der Datei(en) 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.


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 für Datei-Uploads 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]]" />


Weiters 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:

<div class="contact row form-group">
    <label for="contactFormFieldId_[[CONTACT_FORM_FIELD_ID]]">[[CONTACT_FORM_FIELD_LABEL]]</label>
    <input class="contactFormClass_file" id="contactFormFieldId_[[CONTACT_FORM_FIELD_ID]]" type="file" name="contactFormField_[[CONTACT_FORM_FIELD_ID]]" />
</div>


War dieser Artikel hilfreich?

Das ist großartig!

Vielen Dank für das Feedback

Leider konnten wir nicht helfen

Vielen Dank für das Feedback

Wie können wir diesen Artikel verbessern?

Wählen Sie wenigstens einen der Gründe aus

Feedback gesendet

Wir wissen Ihre Bemühungen zu schätzen und werden versuchen, den Artikel zu korrigieren