upload_commons.html
1 <#--
2 # The main macro is addFileInputAndfilesBox. The macro addRequiredJsFiles is used to include required JavaScript and CSS files.
3 # Others macros are private.
4 -->
5 <#--
6 # Add required CSS and JavaScript files to use asynchronous uploads.
7 # This is only needed in Back Office or in FO page not served by the portal service.
8 -->
9 <#macro addRequiredJsFiles>
10 <script>
11 /* Maps to manage files field errors */
12 var mapFileErrors = new Map();
13 var mapFilesNumber = new Map();
14 </script>
15 </#macro>
16 <#macro addFileInput fieldName handler cssClass multiple=false submitBtnName="${handler.uploadSubmitPrefix}${fieldName}" type="button" ariaDescribedby="" required=false hasError=false >
17 <@input type='hidden' name='asynchronousupload.handler' value='${handler.handlerName}' />
18 <#assign inputClass>async file-input<#if hasError> is-invalid</#if></#assign>
19 <@formLabel for='${fieldName}' id='dropzone_${fieldName!}' class='sr-only'>#i18n{asynchronousupload.action.browse.name}</@formLabel>
20 <#assign pmultiple><#if multiple>multiple="multiple"</#if></#assign>
21 <@input type='file' name='${fieldName}' placeHolder='#i18n{asynchronousupload.action.browse.name}' id='${fieldName}' class='${cssClass!} ${handler.handlerName}' params=pmultiple />
22 <@progressBar id="progress_${fieldName}" />
23 <@div id="_file_error_box_${fieldName}" />
24 </#macro>
25 <#macro addUploadedFilesBox fieldName handler listFiles submitBtnName="${handler.uploadDeletePrefix}${fieldName}" noJs=false>
26 <#-- file removing -->
27 <#assign has_files = false>
28 <#if listFiles?? && listFiles?has_content><#assign has_files = true></#if>
29 <#assign paramGroup><#if !has_files>style="display:none;"</#if></#assign>
30 <@row>
31 <@columns>
32 <@div id='_file_deletion_label_${fieldName}' params=paramGroup >
33 <h3>#i18n{asynchronousupload.file.uploadedFile}</h3>
34 <@div id='_file_deletion_${fieldName}' >
35 <#assign file_index = 0>
36 <#if has_files>
37 <#assign index = 0 />
38 <@listGroup id='listUpload-man'>
39 <#list listFiles as file>
40 <#assign filename = ''>
41 <#if file.name?? && file.name != ''>
42 <#assign filename = file.name >
43 <#else>
44 <#if file.title?? && file.title != ''>
45 <#assign filename = file.title >
46 </#if>
47 </#if>
48 <#if file.size??>
49 <#if file.size < 1024 >
50 <#assign octetUnit="o">
51 <#assign octetNumber=file.size>
52 <#elseif file.size < 1024 * 1024 >
53 <#assign octetUnit="Ko">
54 <#assign octetNumber=file.size/1024>
55 <#else >
56 <#assign octetUnit="Mo">
57 <#assign octetNumber=file.size/(1024*1024)>
58 </#if>
59 </#if>
60 <#if filename != '' >
61 <div class="list-group-item" >
62 <label for="${handler.uploadCheckboxPrefix}${fieldName}${file_index}">
63 <input type="checkbox" name="${handler.uploadCheckboxPrefix}${fieldName}${file_index}" id="${handler.uploadCheckboxPrefix}${fieldName}${file_index}">
64 </label>
65 <a title="${filename}" href="jsp/admin/plugins/asynchronousupload/DoDownloadFile.jsp?asynchronousupload.handler=${handler.handlerName}&fieldname=${fieldName}&field_index=${file_index}&fileName=${filename}" data-type="${filename?keep_after_last('.')}" data-img="" >
66 <span>${filename}</span>
67 </a>
68 <a href="#" class="text-danger is-danger deleteSingleFile" fieldName="${filename}" handlerName="formsAsynchronousUploadHandler" index="${file_index}">
69 <i class="fa fa-times fa-fw"></i>
70 </a>
71 <small><#if file.size?has_content>${octetNumber?string["0"]} ${octetUnit}</#if> </small>
72 </div>
73 </#if>
74 </#list>
75 </@listGroup>
76 </#if>
77 </@div>
78 </@div>
79 </@columns>
80 </@row>
81 <@row>
82 <@columns>
83 <div class="checkbox">
84 <input type="checkbox" class="sr-only" id="selectAll${fieldName}" aria-hidden="true">
85 <label id="btn-select-all${fieldName}" class="btn btn-primary button is-primary is-small" for="selectAll${fieldName}">
86 <i class="fa fa-check fa-fw mr-2" aria-hidden="true"></i> Tout sélectionner
87 </label>
88 <button id="rmAll${fieldName}" class="btn btn-danger btn-rm-all button is-danger is-small" name="${submitBtnName}" value="${handler.uploadDeletePrefix}${fieldName}" type="submit" <#if noJs>nojs</#if> >
89 <i class="fa fa-trash fa-fw mr-2" aria-hidden="true"></i> #i18n{asynchronousupload.action.delete.name}
90 </button>
91 </div>
92 </@columns>
93 </@row>
94 <script>
95 var hasChecked=false;
96 $('#progress_${fieldName}' ).hide();
97 $('#rmAll${fieldName}').prop('disabled','disabled');
98 $('#selectAll${fieldName}').on('click', function(){
99 if( !hasChecked ){
100 $('#_file_deletion_${fieldName} input[type="checkbox"]').prop('checked','checked');
101 $('#rmAll${fieldName}').prop('disabled','');
102 $('#btn-select-all${fieldName}').html('<i class="fa fa-times fa-fw mr-2" aria-hidden="true"></i> Tout désélectionner');
103 hasChecked=true;
104 } else {
105 $('#_file_deletion_${fieldName} input[type="checkbox"]').prop('checked','');
106 $('#rmAll${fieldName}').prop('disabled','disabled');
107 $('#btn-select-all${fieldName}').html('<i class="fa fa-check fa-fw mr-2" aria-hidden="true"></i> Tout sélectionner');
108 hasChecked=false;
109 }
110 $( '#_file_deletion_${fieldName} input[type="checkbox"]' ).change( function(){
111 if ( $(this).prop( "checked" ) ){
112 $('#rmAll${fieldName}').prop('disabled','');
113 };
114 });
115 })
116 $('#btn-select-all${fieldName}').on( 'click', function(){
117 $('#_file_deletion_${fieldName} input[type="checkbox"]').prop('checked','checked');
118 })
119 </script>
120 </#macro>
121 <#-- Macro to add a file input for asynchronous and synchronous uploads.
122 # @param fieldName The name of the field.
123 # @param handler The associated handler service.
124 # @param listUploadedFiles The list of files that have already been uploaded. Files must have a 'title' or a 'name' attribute.
125 # @param inputCssClass The CSS class to add to the input if any. Default value is an empty string.
126 # @param multiple True to use an HTML5 multiple file input, false otherwise. Default value if false.
127 -->
128 <#macro addFileInputAndfilesBox fieldName handler listUploadedFiles inputCssClass='' multiple=false>
129 <@addFileInput fieldName=fieldName handler=handler cssClass=inputCssClass multiple=multiple />
130 <@addUploadedFilesBox fieldName=fieldName handler=handler listFiles=listUploadedFiles />
131 </#macro>