cInputDropFiles.ftl
1 <#-- Macro: cInputDropFiles
2
3 Description: Defines a macro that show a checkbox
4
5 Parameters:
6 @param - name - string - required - the name of of the element
7 @param - handler - object - optional - Handler used to manage files, default {}
8 @param - type - string - optional - the type default "dropzone" can be "file" or button. Change the look of the input.
9 @param - nbFiles - number - optional - Number of files, default 0
10 @param - nbUplodadedFiles - number - optional - Number of files uploaded by the user, default 0
11 @param - maxFileSize - number - optional - Max file size that can be uploaded, default 0
12 @param - unit - string - optional - the unit used to show the file size, default ''
13 @param - accept - string - optional - Mimit the extensions the user can upload, default ''
14 @param - label - string - optional - label associated to the upload input default '#i18n{theme.labelUploadFiles}'
15 @param - showLabel - number - optional - Show label if equal to one, otherwise hide it , default 1
16 @param - labelPos - number - optional - Set label before input if equal to one, otherwise set after input , default 1
17 @param - labelSelect - string - optional - label associated to the upload input default '#i18n{theme.labelSelect}' - deprecated
18 @param - labelSubmit - string - optional - label associated to the upload input default '#i18n{theme.labelSubmit}' - deprecated
19 @param - formSubmitButtonName - string - optional - name of the submit "button" of the parent form, used in js to prevent validation of mandatory fields, default 'action_doSaveStep'
20 @param - labelDelete - string - optional - label of the label button default '#i18n{theme.labelDelete}' - deprecated
21 @param - required - boolean - optional - Set element as required, default false
22 @param - disabled - boolean - optional - Disable element, default false
23 @param - multiple - boolean - optional - Set multiple attribute to select default false
24 @param - noJs - boolean - optional - Add nojs class to remove all button, default false
25 @param - hasFiles - boolean - optional - If true show the files, default false
26 @param - helpMsg - string - optional - Content of the help message for upload, default ''
27 @param - errorMsg - string - optional - Content of the error message for upload, default ''
28 @param - id - string - optional - the ID of the element, default ''
29 @param - class - string - optional - the CSS class of the element, default ''
30 @param - params - optional - additional HTML attributes to include in the ckeckbox element default ''
31 -->
32 <#macro cInputDropFiles name handler={} type='dropzone' nbFiles=0 nbUplodadedFiles=0 maxFileSize=0 unit='' accept='' label='#i18n{theme.labelUploadFiles}' showLabel=1 labelPos=1 labelSelect='#i18n{theme.labelSelect}' labelSubmit='#i18n{theme.labelSubmit}' formSubmitButtonName='action_doSaveStep' labelDelete='#i18n{theme.labelDelete}' required=false disabled=false multiple=true noJs=false helpMsg='' hasFiles=false errorMsg='' class='' id='' params='' deprecated...>
33 <@deprecatedWarning args=deprecated />
34 <#local cId><#if id!=''>${id!}<#else>${name!}</#if></#local>
35 <#local nbFiles = nbFiles?number >
36 <#local maxFileSize = maxFileSize?number >
37 <#local isDisabled><#if nbFiles?number = nbUplodadedFiles?number >true<#elseif disabled>true<#else>false</#if></#local>
38 <#if handler?has_content>
39 <#local deleteBtnName='_form_upload_delete_${cId}' >
40 <@cInput type='hidden' name='asynchronousupload.handler' value=handler.handlerName />
41 <div class="row group-files ${type} <#if !multiple> one-file</#if><#if nbUplodadedFiles?number=nbFiles?number> no-file</#if>">
42 <div class="col">
43 <#if labelPos == 1>
44 <label id="lb${cId!}" class="<#if showLabel=0>visually-hidden visually-hidden-focusable</#if><#if errorMsg !=''> main-danger-color</#if>" for="${cId!}">${label}<#if required> <span class="main-danger-color" tabindex="0" title="#i18n{theme.labelMandatory}">*</span></#if></label>
45 </#if>
46 <#if helpMsg !=''><@cFormHelp idMsg helpMsg /></#if>
47 <#if type="dropzone">
48 <div id="group-${cId!}" class="d-flex align-items-center file-input<#if errorMsg!=''> is-invalid</#if>">
49 <input type="file" class="form-control my-xs ${cssClass!}<#if isDisabled?boolean> disabled</#if><#if required> is-required</#if><#if handler?has_content> ${handler.handlerName}</#if><#if class!=''> ${class}</#if>"<#if required>aria-required="true"</#if> data-nbuploadedfiles="${nbUplodadedFiles}" name="${name}" id="${cId!}" <#if multiple>multiple="multiple"</#if><#if nbFiles gt 0> data-nof="${nbFiles}"</#if><#if maxFileSize gt 0> data-mfs="${maxFileSize}"</#if><#if accept !=''> accept="${accept}" data-atf="${accept}"</#if>>
50 <svg class="paris-icon paris-icon-upload white-color" role="img" aria-hidden="true" focusable="false">
51 <use xlink:href="#paris-icon-upload"></use>
52 </svg>
53 <p class="flex-1 text-left ms-sm mb-0">#i18n{theme.labelDropFiles} <span class="text-primary text-underline">#i18n{asynchronousupload.action.browse.name}</span></p>
54 </div>
55 <#if errorMsg !=''><@cFormError idMsg errorMsg /></#if>
56 <#elseif type="button">
57 <div id="group-${cId!}" class="<#if errorMsg!=''> is-invalid</#if>">
58 <#-- <label id="lb${cId!}" class="form-label" for="${cId}" data-browse="#i18n{asynchronousupload.action.browse.name}">#i18n{asynchronousupload.action.browse.name}</label> -->
59 <input type="file" <#if required>aria-required="true" required</#if><#if helpMsg!=''> aria-labelledby="${cId}Help"</#if> name="${name}" id="${cId}" class="form-control<#if isDisabled?boolean> disabled</#if><#if required> is-required</#if><#if handler?has_content> ${handler.handlerName}</#if><#if class!=''> ${class}</#if>"<#if multiple> multiple</#if><#if nbFiles gt 0> data-nof="${nbFiles}"</#if><#if maxFileSize gt 0> data-mfs="${maxFileSize}"</#if><#if accept !=''> accept="${accept}" data-atf="${accept}"</#if>>
60 <button hidden class="btn btn-link-primary" name="<#if handler.uploadSubmitPrefix?has_content>${handler.uploadSubmitPrefix}<#else>handler_</#if>${cId}" id="<#if handler.uploadSubmitPrefix?has_content>${handler.uploadSubmitPrefix}<#else>handler_</#if>${cId}" value="<#if handler.uploadSubmitPrefix?has_content>${handler.uploadSubmitPrefix}<#else>handler_</#if>${cId}" type="submit" >
61 <span class="file-input-text-noscript">#i18n{asynchronousupload.action.send.name}</span>
62 <span class="file-input-text-js" style="display:none;">#i18n{asynchronousupload.action.browse.name}</span>
63 </button>
64 </div>
65 <#if errorMsg !=''><@cFormError idMsg errorMsg /></#if>
66 </#if>
67 <#if labelPos != 1>
68 <label id="lb${cId!}" class="<#if showLabel=0>visually-hidden visually-hidden-focusable<#else>mt-m</#if><#if errorMsg !=''> main-danger-color</#if>" for="${cId!}">${label}</label>
69 </#if>
70 <#if !multiple>
71 </div>
72 <div class="col">
73 </#if>
74 <div id="_file_error_box_${cId}"></div>
75 <div id="progress_${cId}" class="progress" style="display:none;">
76 <div id="progress-bar_${cId}" class="progress-bar progress-bar-success progress-bar-striped"></div>
77 </div>
78 <div class="form-files-group" id="_file_deletion_label_${cId!}"<#if !hasFiles> style="display:none;"</#if>>
79 <ul id="_file_deletion_${cId}" class="files-group">
80 <#nested>
81 </ul>
82 </div>
83 </div>
84 </div>
85 <script>
86 window.addEventListener( 'DOMContentLoaded', (event) => {
87 const fieldName = $('#${cId!}');
88 const groupFieldName = $('#group-${cId!}');
89 const labelFieldName = $('#lb${cId!}');
90 let hasChecked = false, countFiles=${nbUplodadedFiles!};
91 mapFilesNumber.set( "${cId!}", ${nbFiles!} );
92 <#if errorMsg!=''>mapFileErrors.set( "${cId!}", "${errorMsg!}" );</#if>
93 <#-- Add FileUpload option to control number of files max to upload -->
94 <#if nbFiles?number > 0>fieldName.fileupload( { dropZone: fieldName<#if accept !=''>, acceptFileTypes: /(\.|\/)(${accept?replace('.','')?replace(',','|')})$/i</#if>});</#if>
95 const isInputFileRequired = fieldName.hasClass('is-required');
96
97 if( isInputFileRequired ){
98 if( countFiles > 0 ){ fieldName.attr('data-nbuploadedfiles', countFiles ); }
99 const validateButton = document.querySelector('#${formSubmitButtonName!}');
100 validateButton.addEventListener('click', (e) => {
101 const fileItemsList = $('#_file_deletion_${cId} .files-item');
102 const fileUploaded = fileItemsList.length;
103 /* TODO : Rewrite as Vanilla JS */
104 $('.form-control:user-invalid').addClass('is-invalid');
105 $('.form-control:invalid').addClass('is-invalid');
106 const hasErrors = $(".is-invalid").length;
107 if( fileUploaded == 0 ){
108 groupFieldName.addClass('is-invalid');
109 labelFieldName.addClass('main-danger-color');
110 if( groupFieldName.next().hasClass('invalid-feedback') ){
111 groupFieldName.next().text('Le champs est obligatoire')
112 } else {
113 groupFieldName.after('<div class="invalid-feedback" role="status">Le champs est obligatoire</div>')
114 }
115 if( hasErrors == 0 ){
116 e.preventDefault();
117 $('html, body').scrollTop( groupFieldName.offset().top - 50 );
118 }
119 } else {
120 groupFieldName.removeClass('is-invalid');
121 labelFieldName.removeClass('main-danger-color');
122 }
123 })
124
125 }
126 });
127 </script>
128 <#else>
129 <div class="custom-file">
130 <input type="file" <#if required>aria-required="true"</#if><#if helpMsg!=''> aria-labelledby="${name}Help"</#if> name="${name}" id="${cId}" class="custom-file-input ${cssClass!}<#if class!=''> ${class}</#if>"<#if multiple> multiple</#if>>
131 <label class="custom-file-label" for="${name}" data-browse="#i18n{asynchronousupload.action.browse.name}"></label>
132 <#if helpMsg!=''><small id="${name}Help" class="form-text text-muted">${helpMsg}</small></#if>
133 </div>
134 <script src="js/plugins/forms/bs-custom-file-input.min.js"></script>
135 <script>
136 window.addEventListener('DOMContentLoaded', (event) => {
137 bsCustomFileInput.init()
138 });
139 </script>
140 </#if>
141 </#macro>