coo_quickanfrage
Upload-Feld für Formular Manager
HTML-Template: el-form-manager-file-input.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
{namespace anfrage=TYPO3\CooQuickanfrage\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<bh:variable.typoscript path="plugin.tx_cooquickanfrage.form-manager" as="form-manager">
<f:if condition="{cObj.allSettings.style.upload-filetype}">
<f:then>
<f:variable name="filetypes">
<f:for each="{cObj.allSettings.style.upload-filetype}" as="filetypeKey" iteration="i">
<f:if condition="{i.isLast}">
<f:then>{cObj.allSettings.file-types.{filetypeKey}.mime-type}</f:then>
<f:else>{cObj.allSettings.file-types.{filetypeKey}.mime-type},</f:else>
</f:if>
</f:for>
</f:variable>
<f:variable name="filetypeslabel">
<f:for each="{cObj.allSettings.style.upload-filetype}" as="filetypeKey" iteration="i">
<f:if condition="{i.isLast}">
<f:then>
<f:translate key="label-{filetypeKey}" extensionName="CooQuickanfrage" />
</f:then>
<f:else>
<f:translate key="label-{filetypeKey}" extensionName="CooQuickanfrage" />,
</f:else>
</f:if>
</f:for>
</f:variable>
<label class="bh-form-manager__item__label bh-form-manager__label"
for="{cObj.allSettings.inputname}-{cObj.uid}">
<bh:property.text tag="span"
property="{f:if(condition: '!{form-manager.config.label}', then: 'subtext', else: 'text')}"
class="{f:if(condition: '!{form-manager.config.label}' , then: 'bh-form-manager__label-hidden')}" />
<f:if condition=" !{cObj.allSettings.hideFileRequirements}">
<span class="bh-form-manager__item__label bh-form-manager__label-extension bh-bodytext">
<f:if condition="!{form-manager.config.label}">
<f:translate key="form-upluad-filetypes" extensionName="CooQuickanfrage" />
</f:if>
<f:if condition="{form-manager.config.label}">(</f:if>{filetypeslabel} -
<f:translate key="form-upluad-maxsize" extensionName="CooQuickanfrage" />
{cObj.allSettings.maxsize} MB.<f:if condition="{form-manager.config.label}">)</f:if>
</span>
</f:if>
</label>
<div class="bh-form-manager__field bh-form-mananger__field--upload bh-form-manager__field--show-placeholder {f:if(condition: '{cObj.allSettings.style.bh-form-manager__item--required}', then: 'bh-form-manager__field--required')}"
data-bh-form-manager-name-label="{cObj.allSettings.inputname}">
<div class="bh-form-manager__field__icon bh-font-upload"></div>
<f:if condition="{form-manager.config.placeholder}">
<bh:property.text tag="span" rte="false"
class="bh-form-manager__field__input bh-form-manager__field__input--property"
property="subtext" />
</f:if>
<f:if condition="{form-manager.config.placeholder}">
<f:then>
<f:variable name="placeholder">{cObj.subtext ->
f:format.htmlentitiesDecode()}{f:if(condition:
cObj.allSettings.style.bh-form-manager__item--required, then: '*')}</f:variable>
</f:then>
</f:if>
<div class="bh-form-manager__field__placeholder" data-placeholder="{placeholder}" data-text="">
</div>
<f:form.textfield type="file"
class="bh-form-manager__field__input bh-form-manager__field__input--upload"
id="{cObj.allSettings.inputname}-{cObj.uid}" name="{cObj.allSettings.inputname}[]"
additionalAttributes="{f:if(condition: cObj.allSettings.multiselect, then: '{accept: filetypes, data-max-upload:\'{cObj.allSettings.maxsize}000000\', data-max-text:\'{cObj.allSettings.maxsize}MB\', multiple: \'true\'}', else: '{accept: filetypes, data-max-upload:\'{cObj.allSettings.maxsize}000000\', data-max-text:\'{cObj.allSettings.maxsize}MB\'}')}"
required="{cObj.allSettings.style.bh-form-manager__item--required}" />
</div>
</f:then>
<f:else>
Bitte einen Dateityp in den Settings wählen
</f:else>
</f:if>
</bh:variable.typoscript>
</bh:tmpl.element>
Typoscript: el-form-manager-file-input.typoscript
TYPOSCRIPT
plugin.tx_bh.settings.contentElements.el-form-manager-file-input < abstract.bhElement
plugin.tx_bh.settings.contentElements.el-form-manager-file-input {
name = Datei-Upload
description = Dieses Element kann nur im Formular-Manager verwendet werden
templateFile = el-form-manager-file-input.html
templatePath = EXT:coo_quickanfrage/Resources/Public/Elements/el-form-manager-items/el-form-manager-file-input/
settingsForm = EXT:coo_quickanfrage/Resources/Public/Elements/el-form-manager-items/el-form-manager-file-input/el-form-manager-file-input-settings.html
iconFile = EXT:bh/Resources/Public/Icons/Elemente/upload-small.svg
bheParentElement = el-form-manager
bheSortPriority = 40
options.translate = 1
options.oncreate = advanced
maxsize = 10
file-types {
jpg {
settingsName = jpg & jpeg (Bild)
mime-type = image/jpeg
}
png {
settingsName = png (Bild)
mime-type = image/png
}
gif {
settingsName = gif (Bild)
mime-type = image/gif
}
pdf {
settingsName = pdf
mime-type = application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document
}
doc {
settingsName = doc & docx (Word)
mime-type = application/pdf
}
xls {
settingsName = xls & xlsx (Excel)
mime-type = application/msexcel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
}
csv {
settingsName = csv (Tabelle)
mime-type = text/csv
}
zip {
settingsName = zip
mime-type = application/zip
}
video {
settingsName = video
mime-type = video/mp4,video/x-msvideo,video/x-matroska,video/quicktime,video/mpeg,video/webm,video/mov,video/3gpp,video/3gpp2,video/ogg,video/x-flv,video/avi,video/wmv,video/divx
}
}
styleOptions {
size < plugin.tx_cooquickanfrage.form-manager.styleOptions.size
upload-filetype {
jpg = jpg & jpeg (Bild)
png = png (Bild)
gif = gif (Bild)
pdf = pdf
doc = doc & docx (Word)
xls = xls & xlsx (Excel)
csv = csv (Tabelle)
zip = zip
video = video (Video)
}
}
dummyData.text = Datei-Upload
dummyData.subtext = Datei-Upload
userClass = bh-form-manager__item
}
plugin.tx_cooquickanfrage.form-manager.items := addToList(el-form-manager-file-input)
bh.page.includeCSSLibs.el-form-manager-file-input = EXT:coo_quickanfrage/Resources/Public/Elements/el-form-manager-items/el-form-manager-file-input/el-form-manager-file-input.css
bh.page.includeJS.el-form-manager-file-input = EXT:coo_quickanfrage/Resources/Public/Elements/el-form-manager-items/el-form-manager-file-input/el-form-manager-file-input.js
[bh.isMobile]
bhDefaultMobilePage.includeCSSLibs.el-form-manager-file-input < bh.page.includeCSSLibs.el-form-manager-file-input
bhDefaultMobilePage.includeJS.el-form-manager-file-input < bh.page.includeJS.el-form-manager-file-input
[global]
Settings-HTML: el-form-manager-file-input-settings.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
{namespace anfrage=TYPO3\CooQuickanfrage\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<anfrage:manager.item.settings item="{cObj}" />
<div class="bhe-formsettings-option">
<label>Erlaubte Dateiformate</label>
<f:form.select multiple="true" name="style[upload-filetype]" value="{cObj.allSettings.style.upload-filetype}"
required="1">
<f:for each="{cObj.allSettings.file-types}" as="file-type" key="file-type-key" iteration="i">
<f:form.select.option value="{file-type-key}">{file-type.settingsName}</f:form.select.option>
</f:for>
</f:form.select>
</div>
<div class="bhe-formsettings-option">
<label>Maximale Größe aller Dateien in MB</label>
<f:form.textfield name="maxsize" type="number" value="{cObj.allSettings.maxsize}" required="1"
additionalAttributes="{min: '0.5', step: '0.5'}" />
</div>
<div class="bhe-formsettings-option">
<label>Mehrere Dateien auswählbar</label>
<f:form.checkbox name="multiselect" value="multiselect" checked="{cObj.allSettings.multiselect}" />
</div>
<div class="bhe-formsettings-option">
<label>Datei-Bedingungen ausblenden</label>
<f:form.checkbox name="hideFileRequirements" value="hideFileRequirements"
checked="{cObj.allSettings.hideFileRequirements}" />
</div>
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
<f:form.submit value="Speichern" />
</bh:form.settingsform>