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 <link rel="stylesheet" href="css/plugins/asynchronousupload/jquery.fileupload.css" />
11 <link rel="stylesheet" href="css/plugins/asynchronousupload/jquery.fileupload-ui.css" />
12 <script src="js/jquery/plugins/ui/jquery-ui-1.9.2.custom.min.js"></script>
13 <script src="js/plugins/asynchronousupload/load-image.all.min.js" ></script>
14 <script src="js/plugins/asynchronousupload/vendor/jquery.ui.widget.js" ></script>
15 <script src="js/plugins/asynchronousupload/jquery.iframe-transport.js" ></script>
16 <script src="js/plugins/asynchronousupload/jquery.fileupload.js" ></script>
17 <script src="js/plugins/asynchronousupload/jquery.fileupload-process.js" ></script>
18 <script src="js/plugins/asynchronousupload/vendor/canvas-to-blob.js"></script>
19 <script src="js/plugins/asynchronousupload/config.js"></script>
20 <script src="js/plugins/asynchronousupload/jquery.fileupload-image.js" ></script>
21 <script src="js/plugins/asynchronousupload/jquery.fileupload-validate.js" ></script>
22 <script>
23 /* Maps to manage files field errors */
24 var mapFileErrors = new Map();
25 var mapFilesNumber = new Map();
26 </script>
27 </#macro>
28 <#macro addFileInput fieldName handler cssClass multiple=false submitBtnName="${handler.uploadSubmitPrefix}${fieldName}" hasError=false>
29 <span class="form-inline file-input<#if hasError> is-invalid</#if>">
30 <input type="file" name="${fieldName}" id="${fieldName}" <#if multiple>multiple="multiple"</#if> class="${cssClass!} ${handler.handlerName}" />
31 <button class="btn btn-primary btn-sm" name="${submitBtnName}" id="${handler.uploadSubmitPrefix}${fieldName}" value="${handler.uploadSubmitPrefix}${fieldName}" type="submit" >
32 <i class="fa fa-upload"></i>
33 <span class="file-input-text-noscript">#i18n{asynchronousupload.action.send.name}</span>
34 <span class="file-input-text-js" style="display:none;">#i18n{asynchronousupload.action.browse.name}</span>
35 </button>
36 </span>
37 <input type="hidden" name="asynchronousupload.handler" value="${handler.handlerName}" />
38 <div id="progress_${fieldName}" class="progress" style="display:none;">
39 <div id="progress-bar_${fieldName}" class="progress-bar progress-bar-success progress-bar-striped"> </div>
40 </div>
41 </#macro>
42 <#macro addFileInputImage fieldName handler cssClass multiple=false>
43 <span class="form-inline file-input">
44 <input type="file" style="display:inline-block;" name="${fieldName}" id="${fieldName}" <#if multiple>multiple="multiple"</#if> class="${cssClass!} ${handler.handlerName}" />
45 <button class="btn btn-primary btn-sm" name="${handler.uploadSubmitPrefix}${fieldName}" id="${handler.uploadSubmitPrefix}${fieldName}" value="${handler.uploadSubmitPrefix}${fieldName}" type="submit" >
46 <i class="fa fa-upload"></i>
47 <span class="file-input-text-noscript">#i18n{asynchronousupload.action.send.name}</span>
48 <span class="file-input-text-js" style="display:none;">#i18n{asynchronousupload.action.browse.name}</span>
49 </button>
50 </span>
51 <input type="hidden" name="asynchronousupload.handler" value="${handler.handlerName}" />
52 <div id="progress_${fieldName}" class="progress" style="display: none;">
53 <div id="progress-bar_${fieldName}" class="progress-bar progress-bar-success progress-bar-striped"> </div>
54 </div>
55 </#macro>
56 <#macro addUploadedFilesBox fieldName handler listFiles submitBtnName="${handler.uploadDeletePrefix}${fieldName}" noJs=false>
57 <#-- file removing -->
58 <#assign has_files = false>
59 <#if listFiles?? && listFiles?has_content>
60 <#assign has_files = true>
61 </#if>
62 <div id="_file_error_box_${fieldName}" ></div>
63 <div class="form-files-group" <#if !has_files>style="display:none;"</#if> id="_file_deletion_label_${fieldName}">
64 <label class="col-xs-12 col-sm-12">#i18n{asynchronousupload.file.uploadedFile}</label>
65 <div id="_file_deletion_${fieldName}" class="col-md-12">
66 <#assign file_index = 0>
67 <#if has_files>
68 <#assign index = 0 />
69 <#list listFiles as file>
70 <#assign filename = ''>
71 <#if file.name?? && file.name != ''>
72 <#assign filename = file.name >
73 <#else>
74 <#if file.title?? && file.title != ''>
75 <#assign filename = file.title >
76 </#if>
77 </#if>
78 <#if file.size??>
79 <#if file.size < 1024 >
80 <#assign octetUnit="o">
81 <#assign octetNumber=file.size>
82 <#elseif file.size < 1024 * 1024 >
83 <#assign octetUnit="Ko">
84 <#assign octetNumber=file.size/1024>
85 <#else >
86 <#assign octetUnit="Mo">
87 <#assign octetNumber=file.size/(1024*1024)>
88 </#if>
89 </#if>
90 <#if filename != '' >
91 <div class="checkbox" id="_file_uploaded_${fieldName}${file_index}">
92 <label class="col-xs-12 col-sm-12" for="${handler.uploadCheckboxPrefix}${fieldName}${file_index}">
93 <input type="checkbox" id="${handler.uploadCheckboxPrefix}${fieldName}${file_index}" name="${handler.uploadCheckboxPrefix}${fieldName}${file_index}" value="${uploadHandler.uploadCheckboxPrefix}${fieldName}${file_index}" />
94 <a href="jsp/site/plugins/asynchronousupload/DoDownloadFile.jsp?asynchronousupload.handler=${handler.handlerName}&fieldname=${fieldName}&field_index=${file_index}&fileName=${filename}" download="${filename}">
95 ${filename}
96 </a>
97 <#if file.size?has_content> (${octetNumber?string["0"]} ${octetUnit})</#if>
98 </label>
99 <#assign file_index = file_index + 1>
100 </div>
101 </#if>
102 </#list>
103 </#if>
104 </div>
105 <br />
106 <div class="col-xs-12 col-sm-12">
107 <button class="btn btn-danger btn-sm" name="${submitBtnName}" value="${handler.uploadDeletePrefix}${fieldName}" type="submit" <#if noJs>nojs</#if> >#i18n{asynchronousupload.action.delete.name}</button>
108 </div>
109 </div>
110 </#macro>
111 <#-- Macro to add a file input for asynchronous and synchronous uploads.
112 # @param fieldName The name of the field.
113 # @param handler The associated handler service.
114 # @param listUploadedFiles The list of files that have already been uploaded. Files must have a 'title' or a 'name' attribute.
115 # @param inputCssClass The CSS class to add to the input if any. Default value is an empty string.
116 # @param multiple True to use an HTML5 multiple file input, false otherwise. Default value if false.
117 -->
118 <#macro addFileInputAndfilesBox fieldName handler listUploadedFiles inputCssClass='' multiple=false>
119 <@addFileInput fieldName=fieldName handler=handler cssClass=inputCssClass multiple=multiple />
120 <@addUploadedFilesBox fieldName=fieldName handler=handler listFiles=listUploadedFiles />
121 </#macro>
122 <#-- Macro to add a file image input for asynchronous and synchronous uploads.
123 # @param fieldName The name of the field.
124 # @param handler The associated handler service.
125 # @param listUploadedFiles The list of files that have already been uploaded. Files must have a 'title' or a 'name' attribute.
126 # @param inputCssClass The CSS class to add to the input if any. Default value is an empty string.
127 # @param multiple True to use an HTML5 multiple file input, false otherwise. Default value if false.
128 -->
129 <#macro addFileInputImageAndfilesBox fieldName handler listUploadedFiles inputCssClass='' multiple=false>
130 <@addFileInputImage fieldName=fieldName handler=handler cssClass=inputCssClass multiple=multiple />
131 <@addUploadedFilesBox fieldName=fieldName handler=handler listFiles=listUploadedFiles />
132 </#macro>