hr-design-system-handlebars 1.111.3 → 1.111.5

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# v1.111.5 (Tue Oct 22 2024)
+
+#### 🐛 Bug Fix
+
+- some bugfixes for UploadForm [#1124](https://github.com/mumprod/hr-design-system-handlebars/pull/1124) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
+# v1.111.4 (Fri Oct 18 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-3307: Upload [#1123](https://github.com/mumprod/hr-design-system-handlebars/pull/1123) (saad.elbaciri@hr.de [@vascoeduardo](https://github.com/vascoeduardo) [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 3
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.111.3 (Fri Oct 18 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/brand/hessenschau/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hessenschau . d e",
 	"meta_application_name": "hessenschau.de"
 }

package/dist/assets/brand/hr/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr . d e",
 	"meta_application_name": "hr.de"
 }

package/dist/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr-bigband . d e",
 	"meta_application_name": "hr-bigband.de"
 }

package/dist/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr-fernsehen . d e",
 	"meta_application_name": "hr-fernsehen.de"
 }

package/dist/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr-inforadio . d e",
 	"meta_application_name": "hr-inforadio.de"
 }

package/dist/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr-rundfunkrat . d e",
 	"meta_application_name": "hr-rundfunkrat.de"
 }

package/dist/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr-sinfonieorchester . d e",
 	"meta_application_name": "hr-sinfonieorchester.de"
 }

package/dist/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr-werbung . d e",
 	"meta_application_name": "hr-werbung.de"
 }

package/dist/assets/brand/hr1/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr1 . d e",
 	"meta_application_name": "hr1.de"
 }

package/dist/assets/brand/hr2/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr2 . d e",
 	"meta_application_name": "hr2.de"
 }

package/dist/assets/brand/hr3/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr3 . d e",
 	"meta_application_name": "hr3.de"
 }

package/dist/assets/brand/hr4/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr4 . d e",
 	"meta_application_name": "hr4.de"
 }

package/dist/assets/brand/you-fm/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite you-fm . d e",
 	"meta_application_name": "you-fm.de"
 }

package/dist/assets/index.css

@@ -1852,6 +1852,11 @@ article.indexTextDS .indexTextHighlighted .link {
 .min-w-full {
   min-width: 100%;
 }
+.min-w-min {
+  min-width: -webkit-min-content;
+  min-width: -moz-min-content;
+  min-width: min-content;
+}
 .max-w-3\/4 {
   max-width: 75%;
 }
@@ -2118,6 +2123,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .justify-around {
   justify-content: space-around;
 }
+.gap-2 {
+  gap: 0.5rem;
+}
 .gap-3 {
   gap: 0.75rem;
 }
@@ -2256,6 +2264,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .whitespace-pre-wrap {
   white-space: pre-wrap;
 }
+.text-nowrap {
+  text-wrap: nowrap;
+}
 .break-words {
   word-wrap: break-word;
 }
@@ -2537,6 +2548,11 @@ article.indexTextDS .indexTextHighlighted .link {
   background-color: rgba(243, 244, 246, 1);
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
 }
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(209, 213, 219, 1);
+  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
+}
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(107, 114, 128, 1);
@@ -2774,6 +2790,9 @@ article.indexTextDS .indexTextHighlighted .link {
   fill: #006eb7;
   fill: var(--color-link);
 }
+.fill-red-600 {
+  fill: #dc2626;
+}
 .fill-search {
   fill: #000000;
   fill: var(--search-icon-color);
@@ -2980,6 +2999,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .pl-9 {
   padding-left: 2.25rem;
 }
+.pr-1 {
+  padding-right: 0.25rem;
+}
 .pr-10 {
   padding-right: 2.5rem;
 }
@@ -3252,6 +3274,11 @@ article.indexTextDS .indexTextHighlighted .link {
   color: #000000;
   color: var(--color-footer-text);
 }
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgba(107, 114, 128, 1);
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
 .text-gray-dark {
   --tw-text-opacity: 1;
   color: rgba(112, 112, 112, 1);
@@ -3570,7 +3597,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1729261006294;
+  counter-reset: cnt1729601409591;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -3984,7 +4011,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1729261006294 1;
+  counter-increment: cnt1729601409591 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4002,7 +4029,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1729261006294);
+  content: counter(cnt1729601409591);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4138,7 +4165,7 @@ select:has(option:checked:not([value=''])) + label {
 select:has(option:checked[value='']) {
   color: transparent;
 }
-input[type='checkbox']:checked::after {
+.form-checkbox:checked::after {
         position: absolute;
         content: '';
         width: 15px;
@@ -4151,7 +4178,7 @@ input[type='checkbox']:checked::after {
         border-right: none;
         transform: rotate(-45deg);
     }
-input[type='radio']::after {
+.form-radio::after {
         content: '';
         position: absolute;
         width: 16px;
@@ -4163,7 +4190,7 @@ input[type='radio']::after {
         background-color: var(--color-primary-ds);
         border-radius: 50%;
     }
-input[type='radio']:checked::after {
+.form-radio:checked::after {
         transform: translate(-50%, -50%) scale(1);
     }
 .\[-T\:\+Z\] {
@@ -7307,6 +7334,10 @@ input[type='radio']:checked::after {
     padding-left: 0.75rem;
   }
 
+  .md\:pl-4 {
+    padding-left: 1rem;
+  }
+
   .md\:pl-5 {
     padding-left: 1.25rem;
   }
@@ -7315,6 +7346,10 @@ input[type='radio']:checked::after {
     padding-right: 0px;
   }
 
+  .md\:pr-2 {
+    padding-right: 0.5rem;
+  }
+
   .md\:pr-5 {
     padding-right: 1.25rem;
   }

package/dist/assets/js/components/forms/js/inputHandler.alpine.js

@@ -6,6 +6,30 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
         isFocused: false,
         typeMismatch: true,
         valueMissing: true,
+        outputText: "",
+        isFileSelected: false,
+
+        setFile(event) {
+            const file = event.target.files[0];
+            if (file) {
+                this.fileName = file.name;
+                this.isFileSelected = true;
+            }
+            else{
+                this.fileName = "";
+                this.isFileSelected = false;
+            }
+        },
+        getFileName() {
+            return this.fileName;
+        },
+        clearFile() {
+            this.fileName = "";
+            this.isFileSelected = false;
+            this.valid = false;
+            var uploadEelement = document.getElementById(element);
+            uploadEelement.value = null;
+        },
 
         errorMessage() { 
             if( type == "email"){
@@ -37,7 +61,10 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
                 case "select":
                     return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
                 case "choice-group":
+                    //to-do: Server error
                     return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
+                case "upload":
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
                 default:
                     return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
             }
@@ -55,6 +82,10 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
             var choice = document.getElementById(element)  
             this.valid = choice.checkValidity()
         },
+        validateUpload() {
+            var choice = document.getElementById(element)  
+            this.valid = choice.checkValidity()
+        },
         hasServerError() {
             return Boolean(this.$store.forms.serverErrorFields[formId]?.[name]);
         },

package/dist/views/components/forms/components/choice.hbs

@@ -10,7 +10,7 @@
    {{/unless}}
 >
 <div class="flex flex-row items-center w-full cursor-pointer ">
-  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight"," checked:bg-white checked:border-form-highlight rounded-full",""]'}}"
+  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight form-checkbox"," checked:bg-white checked:border-form-highlight rounded-full form-radio",""]'}}"
       {{#if _required}}
             :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}
@@ -60,7 +60,7 @@
          {{/if}}
       {{/if~}}
    >
-  <label for="input{{getRandom}}" class="min-h-6 pt-0.5 items-center justify-center pl-2 text-xs cursor-pointer md:pl-3 text-text dark:text-text-dark md:text-sm font-headingSerif ">
+  <label for="input{{getRandom}}" class="min-h-6 pt-0.5 items-center justify-center pl-2 cursor-pointer md:pl-3 text-text dark:text-text-dark md:text-base text-sm">
       {{#if _hasBody}}
         {{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
       {{else}}

package/dist/views/components/forms/components/fields.hbs

@@ -4,11 +4,11 @@
         {{#if this.caption}}         
             <fieldset>
                 <legend class="mb-5 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">{{this.caption}}</legend>
-                {{~> components/forms/components/fields}}
+                {{~> components/forms/components/fields _formId=../_formId}}
             </fieldset>            
         {{else}}
             <fieldset>
-                {{~> components/forms/components/fields}}
+                {{~> components/forms/components/fields _formId=../_formId}}
             </fieldset>
         {{/if}}
         
@@ -86,14 +86,15 @@
                     }}
                 {{/if}}
             {{else if this.type.isUpload}}
-                {{~> components/forms/upload
+                {{~> components/forms/components/upload
                     _name=this.name
                     _label=this.label
                     _description=this.description
                     _multiple=false
                     _required=this.isRequired
-                    _locaKeyButton="uploadForm_label_file_button"
+                    _errorMandatory="Bitte laden Sie eine Datei hoch"
                     _formId=../_formId
+                    _type=(if this.type.isUpload "upload")
                 }}
             {{/if}}
         </div>

package/dist/views/components/forms/components/upload.hbs

@@ -0,0 +1,73 @@
+<div class="relative flex flex-col w-full mb-6 gap-y-1 md:mb-12"
+        ax-load
+        x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
+        x-init="validateUpload()"
+        x-ignore
+>
+    <div @change="setFile($event)" class="relative flex flex-row items-center w-full gap-x-2 md:gap-x-3">   
+        <input class="absolute w-2 opacity-0 appearance-none cursor-pointer -z-1" 
+            type="file"
+            size="36700160" {{!-- 35MB --}}
+            id="input{{getRandom}}"
+            {{#if _required}}
+                @focus="isFocused = true"
+                @blur="wasFocused = true; isFocused=false"
+            {{/if}}
+            
+            {{#if _required}}
+                @change="validateUpload()"
+            {{/if}}
+
+            {{#if _multiple}}
+                multiple
+                data-multiple-caption="{count} Dateien ausgewählt"
+            {{/if}}
+            name="{{#if _name}}{{_name}}{{/if}}"
+            {{#if _accept}}
+                accept="{{_accept}}"
+            {{/if}}
+
+            {{#if _locaKeyButton}}
+                title="{{~loca _locaKeyButton}}"
+            {{else}}
+                {{#if _label}}
+                    title="{{_label}}{{#if _required}}*{{/if}}"
+                {{/if}}
+            {{/if}}
+                    
+            {{#if _formField.forHtmlAttribute}}
+                value="{{_formField.forHtmlAttribute}}"
+            {{else}}
+                {{#if _value}}
+                    value="{{_value}}"
+                {{else}}
+                    value="{{_defaultValue}}"
+                {{/if}}
+            {{/if}}
+            
+            {{#if _required}}required{{/if}}
+        />
+        <label for="input{{getRandom}}" class="cursor-pointer min-w-min {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
+            <span class="pr-1 md:pr-2">
+                {{> components/base/image/icon _icon="upload" _addClass="w-6 h-6 fill-white dark:fill-text-dark"}}
+            </span>
+            <span class="text-nowrap">{{loca "webform_upload_label" }}</span>
+        </label>
+        <span x-show="!isFileSelected" class="items-center justify-center text-sm text-text dark:text-text-dark md:text-base" >{{_label}}{{#if _required}}*{{/if}}</span>
+        <div x-cloak x-show="isFileSelected" class="flex items-center gap-2 p-1 text-sm bg-gray-300">
+            <span x-text="getFileName" class="items-center justify-center text-black overflow-anywhere" ></span>
+            <button class="flex-shrink-0" @click="clearFile" type="button">
+                <span >{{~> components/base/image/icon _icon="close" _addClass="h-3 w-3 fill-red-600" _iconmap="icons"~}}</span>
+            </button>
+        </div>
+    </div>
+    <div class="font-heading">     
+        {{#if _description}}  
+            <div class="pl-3 text-xs text-gray-500 md:pl-4 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
+        {{/if}}
+        {{#if _required}}
+            <div class="hidden pl-3 text-xs text-error dark:text-error-dark md:pl-4" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+        {{/if}}
+    </div>
+</div>
+

package/dist/views_static/components/forms/components/choice.hbs

@@ -10,7 +10,7 @@
    {{/unless}}
 >
 <div class="flex flex-row items-center w-full cursor-pointer ">
-  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight"," checked:bg-white checked:border-form-highlight rounded-full",""]'}}"
+  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight form-checkbox"," checked:bg-white checked:border-form-highlight rounded-full form-radio",""]'}}"
       {{#if _required}}
             :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}
@@ -60,7 +60,7 @@
          {{/if}}
       {{/if~}}
    >
-  <label for="input{{getRandom}}" class="min-h-6 pt-0.5 items-center justify-center pl-2 text-xs cursor-pointer md:pl-3 text-text dark:text-text-dark md:text-sm font-headingSerif ">
+  <label for="input{{getRandom}}" class="min-h-6 pt-0.5 items-center justify-center pl-2 cursor-pointer md:pl-3 text-text dark:text-text-dark md:text-base text-sm">
       {{#if _hasBody}}
         {{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
       {{else}}

package/dist/views_static/components/forms/components/fields.hbs

@@ -4,11 +4,11 @@
         {{#if this.caption}}         
             <fieldset>
                 <legend class="mb-5 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">{{this.caption}}</legend>
-                {{~> components/forms/components/fields}}
+                {{~> components/forms/components/fields _formId=../_formId}}
             </fieldset>            
         {{else}}
             <fieldset>
-                {{~> components/forms/components/fields}}
+                {{~> components/forms/components/fields _formId=../_formId}}
             </fieldset>
         {{/if}}
         
@@ -86,14 +86,15 @@
                     }}
                 {{/if}}
             {{else if this.type.isUpload}}
-                {{~> components/forms/upload
+                {{~> components/forms/components/upload
                     _name=this.name
                     _label=this.label
                     _description=this.description
                     _multiple=false
                     _required=this.isRequired
-                    _locaKeyButton="uploadForm_label_file_button"
+                    _errorMandatory="Bitte laden Sie eine Datei hoch"
                     _formId=../_formId
+                    _type=(if this.type.isUpload "upload")
                 }}
             {{/if}}
         </div>

package/dist/views_static/components/forms/components/upload.hbs

@@ -0,0 +1,73 @@
+<div class="relative flex flex-col w-full mb-6 gap-y-1 md:mb-12"
+        ax-load
+        x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
+        x-init="validateUpload()"
+        x-ignore
+>
+    <div @change="setFile($event)" class="relative flex flex-row items-center w-full gap-x-2 md:gap-x-3">   
+        <input class="absolute w-2 opacity-0 appearance-none cursor-pointer -z-1" 
+            type="file"
+            size="36700160" {{!-- 35MB --}}
+            id="input{{getRandom}}"
+            {{#if _required}}
+                @focus="isFocused = true"
+                @blur="wasFocused = true; isFocused=false"
+            {{/if}}
+            
+            {{#if _required}}
+                @change="validateUpload()"
+            {{/if}}
+
+            {{#if _multiple}}
+                multiple
+                data-multiple-caption="{count} Dateien ausgewählt"
+            {{/if}}
+            name="{{#if _name}}{{_name}}{{/if}}"
+            {{#if _accept}}
+                accept="{{_accept}}"
+            {{/if}}
+
+            {{#if _locaKeyButton}}
+                title="{{~loca _locaKeyButton}}"
+            {{else}}
+                {{#if _label}}
+                    title="{{_label}}{{#if _required}}*{{/if}}"
+                {{/if}}
+            {{/if}}
+                    
+            {{#if _formField.forHtmlAttribute}}
+                value="{{_formField.forHtmlAttribute}}"
+            {{else}}
+                {{#if _value}}
+                    value="{{_value}}"
+                {{else}}
+                    value="{{_defaultValue}}"
+                {{/if}}
+            {{/if}}
+            
+            {{#if _required}}required{{/if}}
+        />
+        <label for="input{{getRandom}}" class="cursor-pointer min-w-min {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
+            <span class="pr-1 md:pr-2">
+                {{> components/base/image/icon _icon="upload" _addClass="w-6 h-6 fill-white dark:fill-text-dark"}}
+            </span>
+            <span class="text-nowrap">{{loca "webform_upload_label" }}</span>
+        </label>
+        <span x-show="!isFileSelected" class="items-center justify-center text-sm text-text dark:text-text-dark md:text-base" >{{_label}}{{#if _required}}*{{/if}}</span>
+        <div x-cloak x-show="isFileSelected" class="flex items-center gap-2 p-1 text-sm bg-gray-300">
+            <span x-text="getFileName" class="items-center justify-center text-black overflow-anywhere" ></span>
+            <button class="flex-shrink-0" @click="clearFile" type="button">
+                <span >{{~> components/base/image/icon _icon="close" _addClass="h-3 w-3 fill-red-600" _iconmap="icons"~}}</span>
+            </button>
+        </div>
+    </div>
+    <div class="font-heading">     
+        {{#if _description}}  
+            <div class="pl-3 text-xs text-gray-500 md:pl-4 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
+        {{/if}}
+        {{#if _required}}
+            <div class="hidden pl-3 text-xs text-error dark:text-error-dark md:pl-4" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+        {{/if}}
+    </div>
+</div>
+

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.111.3",
+  "version": "1.111.5",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/assets/brand/_default/conf/locatags.json

@@ -191,5 +191,6 @@
     "teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
     "teaser_more_video_livestream_sr": "zum Livestream",
     "webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
-    "webform_send_text_error": "Das Formular konnte nicht versendet werden."
+    "webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+    "webform_upload_label": "Datei auswählen"
 }

package/src/assets/brand/hessenschau/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hessenschau . d e",
 	"meta_application_name": "hessenschau.de"
 }

package/src/assets/brand/hr/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr . d e",
 	"meta_application_name": "hr.de"
 }

package/src/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr-bigband . d e",
 	"meta_application_name": "hr-bigband.de"
 }

package/src/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr-fernsehen . d e",
 	"meta_application_name": "hr-fernsehen.de"
 }

package/src/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr-inforadio . d e",
 	"meta_application_name": "hr-inforadio.de"
 }

package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr-rundfunkrat . d e",
 	"meta_application_name": "hr-rundfunkrat.de"
 }

package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr-sinfonieorchester . d e",
 	"meta_application_name": "hr-sinfonieorchester.de"
 }

package/src/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr-werbung . d e",
 	"meta_application_name": "hr-werbung.de"
 }

package/src/assets/brand/hr1/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr1 . d e",
 	"meta_application_name": "hr1.de"
 }

package/src/assets/brand/hr2/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr2 . d e",
 	"meta_application_name": "hr2.de"
 }

package/src/assets/brand/hr3/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr3 . d e",
 	"meta_application_name": "hr3.de"
 }

package/src/assets/brand/hr4/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite hr4 . d e",
 	"meta_application_name": "hr4.de"
 }

package/src/assets/brand/you-fm/conf/locatags.merged.json

@@ -192,6 +192,7 @@
 	"teaser_more_video_livestream_sr": "zum Livestream",
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
+	"webform_upload_label": "Datei auswählen",
 	"header_homepage_link_title": "Startseite you-fm . d e",
 	"meta_application_name": "you-fm.de"
 }

package/src/assets/css/custom-utilities.css

@@ -465,7 +465,7 @@
         @apply text-transparent;
     }
 
-    input[type='checkbox']:checked::after {
+    .form-checkbox:checked::after {
         position: absolute;
         content: '';
         width: 15px;
@@ -479,7 +479,7 @@
         transform: rotate(-45deg);
     }
 
-    input[type='radio']::after {
+    .form-radio::after {
         content: '';
         position: absolute;
         width: 16px;
@@ -491,7 +491,7 @@
         border-radius: 50%;
     }
 
-    input[type='radio']:checked::after {
+    .form-radio:checked::after {
         transform: translate(-50%, -50%) scale(1);
     }
 }

package/src/assets/fixtures/content/copytext/copytext_webform.json

@@ -22,6 +22,16 @@
                         "@->jsoninclude": "forms/form_fields.inc.json",
                         "@->contentpath": "input-text-nachname-required"
                     },
+                    {
+                        "@->jsoninclude": "forms/form_fields.inc.json",
+                        "@->contentpath": "upload",
+                        "@->overrides": [
+                         {
+                            "@->contentpath": "isRequired",
+                            "@->value": true
+                         }
+                      ]
+                    },
                     {
                         "@->jsoninclude": "forms/form_fields.inc.json",
                         "@->contentpath": "select"

package/src/assets/fixtures/forms/form_fields.inc.json

@@ -242,9 +242,9 @@
             "isUpload":true,
             "asString":"upload"
         },
-        "name":"lieblingsfarbe",
-        "label":"Wählen Sie Ihre Lieblingsfarbe",
-        "description":"Bitte wählen Sie eine der folgenden Farben aus.",
-        "isRequired":false
+        "name":"Datei Hochladen",
+        "label":"Wählen Sie eine Datei zum Hochladen",
+        "description":"Maximale Dateigröße: 35 MB.",
+        "isRequired":true
     }
 }

package/src/assets/fixtures/forms/form_upload.json

@@ -0,0 +1,8 @@
+{
+    "fields":[
+                {
+                  "@->jsoninclude": "forms/form_fields.inc.json",
+                  "@->contentpath": "upload"
+                }
+             ]
+ }

package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json

@@ -1 +1 @@
-{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"errorMessages","isMultipart":"isMultipart","trackingInformations":"trackingInformations","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":true,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]},{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen","isMeta":false,"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.","isRequired":false,"options":[{"value":"sport","label":"sport","title":"sport","isSelected":false},{"value":"musik","label":"musik","title":"musik","isSelected":false},{"value":"lesen","label":"lesen","title":"lesen","isSelected":false},{"value":"reisen","label":"reisen","title":"reisen","isSelected":false},{"value":"kochen","label":"kochen","title":"kochen","isSelected":false},{"value":"filme","label":"filme","title":"filme","isSelected":false},{"value":"tanzen","label":"tanzen","title":"tanzen","isSelected":false},{"value":"fotografie","label":"fotografie","title":"fotografie","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":true,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":false,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":false},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"errorMessages","isMultipart":"isMultipart","trackingInformations":"trackingInformations","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isUpload":true,"asString":"upload"},"name":"Datei Hochladen","label":"Wählen Sie eine Datei zum Hochladen","description":"Maximale Dateigröße: 35 MB.","isRequired":true},{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":true,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]},{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen","isMeta":false,"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.","isRequired":false,"options":[{"value":"sport","label":"sport","title":"sport","isSelected":false},{"value":"musik","label":"musik","title":"musik","isSelected":false},{"value":"lesen","label":"lesen","title":"lesen","isSelected":false},{"value":"reisen","label":"reisen","title":"reisen","isSelected":false},{"value":"kochen","label":"kochen","title":"kochen","isSelected":false},{"value":"filme","label":"filme","title":"filme","isSelected":false},{"value":"tanzen","label":"tanzen","title":"tanzen","isSelected":false},{"value":"fotografie","label":"fotografie","title":"fotografie","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":true,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":false,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":false},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}

package/src/stories/views/components/forms/components/choice.hbs

@@ -10,7 +10,7 @@
    {{/unless}}
 >
 <div class="flex flex-row items-center w-full cursor-pointer ">
-  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight"," checked:bg-white checked:border-form-highlight rounded-full",""]'}}"
+  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight form-checkbox"," checked:bg-white checked:border-form-highlight rounded-full form-radio",""]'}}"
       {{#if _required}}
             :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}
@@ -60,7 +60,7 @@
          {{/if}}
       {{/if~}}
    >
-  <label for="input{{getRandom}}" class="min-h-6 pt-0.5 items-center justify-center pl-2 text-xs cursor-pointer md:pl-3 text-text dark:text-text-dark md:text-sm font-headingSerif ">
+  <label for="input{{getRandom}}" class="min-h-6 pt-0.5 items-center justify-center pl-2 cursor-pointer md:pl-3 text-text dark:text-text-dark md:text-base text-sm">
       {{#if _hasBody}}
         {{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
       {{else}}

package/src/stories/views/components/forms/components/fields.hbs

@@ -4,11 +4,11 @@
         {{#if this.caption}}         
             <fieldset>
                 <legend class="mb-5 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">{{this.caption}}</legend>
-                {{~> components/forms/components/fields}}
+                {{~> components/forms/components/fields _formId=../_formId}}
             </fieldset>            
         {{else}}
             <fieldset>
-                {{~> components/forms/components/fields}}
+                {{~> components/forms/components/fields _formId=../_formId}}
             </fieldset>
         {{/if}}
         
@@ -86,14 +86,15 @@
                     }}
                 {{/if}}
             {{else if this.type.isUpload}}
-                {{~> components/forms/upload
+                {{~> components/forms/components/upload
                     _name=this.name
                     _label=this.label
                     _description=this.description
                     _multiple=false
                     _required=this.isRequired
-                    _locaKeyButton="uploadForm_label_file_button"
+                    _errorMandatory="Bitte laden Sie eine Datei hoch"
                     _formId=../_formId
+                    _type=(if this.type.isUpload "upload")
                 }}
             {{/if}}
         </div>

package/src/stories/views/components/forms/components/upload.hbs

@@ -0,0 +1,73 @@
+<div class="relative flex flex-col w-full mb-6 gap-y-1 md:mb-12"
+        ax-load
+        x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
+        x-init="validateUpload()"
+        x-ignore
+>
+    <div @change="setFile($event)" class="relative flex flex-row items-center w-full gap-x-2 md:gap-x-3">   
+        <input class="absolute w-2 opacity-0 appearance-none cursor-pointer -z-1" 
+            type="file"
+            size="36700160" {{!-- 35MB --}}
+            id="input{{getRandom}}"
+            {{#if _required}}
+                @focus="isFocused = true"
+                @blur="wasFocused = true; isFocused=false"
+            {{/if}}
+            
+            {{#if _required}}
+                @change="validateUpload()"
+            {{/if}}
+
+            {{#if _multiple}}
+                multiple
+                data-multiple-caption="{count} Dateien ausgewählt"
+            {{/if}}
+            name="{{#if _name}}{{_name}}{{/if}}"
+            {{#if _accept}}
+                accept="{{_accept}}"
+            {{/if}}
+
+            {{#if _locaKeyButton}}
+                title="{{~loca _locaKeyButton}}"
+            {{else}}
+                {{#if _label}}
+                    title="{{_label}}{{#if _required}}*{{/if}}"
+                {{/if}}
+            {{/if}}
+                    
+            {{#if _formField.forHtmlAttribute}}
+                value="{{_formField.forHtmlAttribute}}"
+            {{else}}
+                {{#if _value}}
+                    value="{{_value}}"
+                {{else}}
+                    value="{{_defaultValue}}"
+                {{/if}}
+            {{/if}}
+            
+            {{#if _required}}required{{/if}}
+        />
+        <label for="input{{getRandom}}" class="cursor-pointer min-w-min {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
+            <span class="pr-1 md:pr-2">
+                {{> components/base/image/icon _icon="upload" _addClass="w-6 h-6 fill-white dark:fill-text-dark"}}
+            </span>
+            <span class="text-nowrap">{{loca "webform_upload_label" }}</span>
+        </label>
+        <span x-show="!isFileSelected" class="items-center justify-center text-sm text-text dark:text-text-dark md:text-base" >{{_label}}{{#if _required}}*{{/if}}</span>
+        <div x-cloak x-show="isFileSelected" class="flex items-center gap-2 p-1 text-sm bg-gray-300">
+            <span x-text="getFileName" class="items-center justify-center text-black overflow-anywhere" ></span>
+            <button class="flex-shrink-0" @click="clearFile" type="button">
+                <span >{{~> components/base/image/icon _icon="close" _addClass="h-3 w-3 fill-red-600" _iconmap="icons"~}}</span>
+            </button>
+        </div>
+    </div>
+    <div class="font-heading">     
+        {{#if _description}}  
+            <div class="pl-3 text-xs text-gray-500 md:pl-4 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
+        {{/if}}
+        {{#if _required}}
+            <div class="hidden pl-3 text-xs text-error dark:text-error-dark md:pl-4" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+        {{/if}}
+    </div>
+</div>
+

package/src/stories/views/components/forms/fixtures/form_upload.json

@@ -0,0 +1 @@
+{"fields":[{"type":{"isUpload":true,"asString":"upload"},"name":"Datei Hochladen","label":"Wählen Sie eine Datei zum Hochladen","description":"Maximale Dateigröße: 35 MB.","isRequired":true}]}

package/src/stories/views/components/forms/form_upload.stories.js

@@ -0,0 +1,34 @@
+
+import uploadJson from './fixtures/form_upload.json'
+
+const handlebars = require('hrHandlebars')
+
+
+export default {
+    title: 'Komponenten/Formulare',
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-page">
+                        <div class="grid bg-white grid-article">
+                            ${Story()}
+                        </div>
+                    </div>`
+        },
+    ],
+}
+const Template = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    {{#>components/forms/backgroundBox  }}  
+            <form class="relative flex flex-col justify-center overflow-hidden group" id="form{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
+                {{> components/forms/components/fields }}
+            </form>
+    {{/components/forms/backgroundBox }}
+  `)
+    return hbsTemplate({ ...args })
+}
+
+export const Upload = {
+    render: Template.bind({}),
+    name: 'Upload',
+    args: uploadJson,
+}

package/src/stories/views/components/forms/js/inputHandler.alpine.js

@@ -6,6 +6,30 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
         isFocused: false,
         typeMismatch: true,
         valueMissing: true,
+        outputText: "",
+        isFileSelected: false,
+
+        setFile(event) {
+            const file = event.target.files[0];
+            if (file) {
+                this.fileName = file.name;
+                this.isFileSelected = true;
+            }
+            else{
+                this.fileName = "";
+                this.isFileSelected = false;
+            }
+        },
+        getFileName() {
+            return this.fileName;
+        },
+        clearFile() {
+            this.fileName = "";
+            this.isFileSelected = false;
+            this.valid = false;
+            var uploadEelement = document.getElementById(element);
+            uploadEelement.value = null;
+        },
 
         errorMessage() { 
             if( type == "email"){
@@ -37,7 +61,10 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
                 case "select":
                     return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
                 case "choice-group":
+                    //to-do: Server error
                     return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
+                case "upload":
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
                 default:
                     return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
             }
@@ -55,6 +82,10 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
             var choice = document.getElementById(element)  
             this.valid = choice.checkValidity()
         },
+        validateUpload() {
+            var choice = document.getElementById(element)  
+            this.valid = choice.checkValidity()
+        },
         hasServerError() {
             return Boolean(this.$store.forms.serverErrorFields[formId]?.[name]);
         },