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 <#--
7 # Add required CSS and JavaScript files to use asynchronous uploads.
8 # This is only needed in Back Office or in FO page not served by the portal service.
9 -->
10 <#macro addRequiredJsFiles>
11 <link rel="stylesheet" href="css/plugins/asynchronousupload/jquery.fileupload.css" />
12 <link rel="stylesheet" href="css/plugins/asynchronousupload/jquery.fileupload-ui.css" />
13
14 <script type="text/javascript" src="js/plugins/asynchronousupload/load-image.min.js" ></script>
15 <script type="text/javascript" src="js/plugins/asynchronousupload/vendor/jquery.ui.widget.js" ></script>
16 <script type="text/javascript" src="js/plugins/asynchronousupload/jquery.iframe-transport.js" ></script>
17 <script type="text/javascript" src="js/plugins/asynchronousupload/jquery.fileupload.js" ></script>
18 <script type="text/javascript" src="js/plugins/asynchronousupload/jquery.fileupload-process.js" ></script>
19 <script type="text/javascript" src="js/plugins/asynchronousupload/canvas-to-blob.min.js"></script>
20
21 <script type="text/javascript" src="js/plugins/asynchronousupload/jquery.fileupload-image.js" ></script>
22
23
24 <script type="text/javascript" src="js/plugins/asynchronousupload/jquery.fileupload-validate.js" ></script>
25 </#macro>
26
27
28 <#macro addFileInput fieldLabel fieldName handler cssClass multiple=false>
29 <p class="champs-adresse">${fieldLabel}<span class="facultative">(facultatif)</span></p>
30 <!--BTN-->
31 <div class="btn fileupload fileinput-button">
32 <span class="addfile">
33 <object data="images/image-DMR/uploadFile.svg" style="enable-background:new 0 0 557 399.6" width="19" height="19" type="image/svg+xml">
34 <img src="images/image-DMR/uploadFile.svg" />
35 </object>
36 </span>
37 <span>Ajouter</span>
38 <input type="file" name="${fieldName}" style="padding: 14px 25px 14px 44px;" id="${fieldName}" <#if multiple>multiple="multiple"</#if> class="${cssClass!} ${handler.handlerName}" />
39 <input type="hidden" name="asynchronousupload.handler" value="${handler.handlerName}" />
40 <div id="progress_${fieldName}" class="progress" style="display:none;">
41 <div id="progress-bar_${fieldName}" class="progress-bar progress-bar-success progress-bar-striped"> </div>
42 </div>
43 </div>
44 <!--fin BTN-->
45 </#macro>
46 <#macro addFileInputImage fieldName handler cssClass multiple=false>
47 <span class="file-input btn btn-primary btn-file">
48 <input type="file" name="${fieldName}" id="${fieldName}" <#if multiple>multiple="multiple"</#if> class="${cssClass!} ${handler.handlerName}${fieldName}" />
49 <!-- <button class="btn btn-primary btn-sm" name="${handler.uploadSubmitPrefix}${fieldName}" id="${handler.uploadSubmitPrefix}${fieldName}" value="${handler.uploadSubmitPrefix}${fieldName}" type="submit" >
50 #i18n{asynchronousupload.action.send.name}
51 </button>-->
52 </span>
53 <input type="hidden" name="asynchronousupload.handler" value="${handler.handlerName}" />
54 <div id="progress_${fieldName}" class="progress" style="display: none;">
55 <div id="progress-bar_${fieldName}" class="progress-bar progress-bar-success progress-bar-striped"> </div>
56 </div>
57 </#macro>
58 <#macro addUploadedFilesBox fieldName handler listFiles >
59
60 <#-- file removing -->
61 <#assign has_files = false>
62 <#if listFiles?? && listFiles?has_content>
63 <#assign has_files = true>
64 </#if>
65
66 <div id="_file_error_box_${fieldName}" >
67 </div>
68
69
70 <div class="col-lg-12">
71 <div class="form-group" <#if !has_files>style="display:none;"</#if> id="_file_deletion_label_${fieldName}">
72 <div id="_file_deletion_${fieldName}">
73 <#assign baseUrl= "jsp/site/Portal.jsp?page=dansmarue&">
74 <#assign file_index = 0>
75 <#if has_files>
76 <#assign index = 0 />
77 <#list listFiles as file>
78 <#assign filename = ''>
79 <#if file.name?? && file.name != ''>
80 <#assign filename = file.name >
81 <#else>
82 <#if file.title?? && file.title != ''>
83 <#assign filename = file.title >
84 </#if>
85 </#if>
86 <#if filename != '' >
87 <div class="spec-file" id="_file_uploaded_${fieldName}${file_index}">
88 <span class="filename"><a href="${baseUrl}action=download&fieldName=${fieldName}">${filename}</a></span>
89 <span class="filesize">(<script>document.write(formatBytes(${file.size}));</script>)</span>
90 <a class="erase" href="javascript:removeFile('${fieldName}','${file_index}');">
91 <img src="images/image-DMR/erase.png" alt="supprimer la photo">
92 </a>
93 <#assign file_index = file_index + 1>
94 </div>
95 </#if>
96 </#list>
97 </#if>
98 </div>
99 <!-- <br />
100 <div class="">
101 <button class="btn btn-danger btn-sm" name="${handler.uploadDeletePrefix}${fieldName}" value="${handler.uploadDeletePrefix}${fieldName}" type="submit" >#i18n{asynchronousupload.action.delete.name}</button>
102 </div> -->
103 </div>
104 </div>
105 </#macro>
106
107 <#-- Macro to add a file input for asynchronous and synchronous uploads.
108 # @param fieldName The name of the field.
109 # @param handler The associated handler service.
110 # @param listUploadedFiles The list of files that have already been uploaded. Files must have a 'title' or a 'name' attribute.
111 # @param inputCssClass The CSS class to add to the input if any. Default value is an empty string.
112 # @param multiple True to use an HTML5 multiple file input, false otherwise. Default value if false.
113 -->
114 <#macro addFileInputAndfilesBox fieldLabel fieldName handler listUploadedFiles inputCssClass='' multiple=false>
115 <@addFileInput fieldLabel=fieldLabel fieldName=fieldName handler=handler cssClass=inputCssClass multiple=multiple />
116 <@addUploadedFilesBox fieldName=fieldName handler=handler listFiles=listUploadedFiles />
117 </#macro>
118
119 <#-- Macro to add a file image input for asynchronous and synchronous uploads.
120 # @param fieldName The name of the field.
121 # @param handler The associated handler service.
122 # @param listUploadedFiles The list of files that have already been uploaded. Files must have a 'title' or a 'name' attribute.
123 # @param inputCssClass The CSS class to add to the input if any. Default value is an empty string.
124 # @param multiple True to use an HTML5 multiple file input, false otherwise. Default value if false.
125 -->
126
127 <#macro addFileInputImageAndfilesBox fieldName handler listUploadedFiles inputCssClass='' multiple=false>
128 <@addFileInputImage fieldName=fieldName handler=handler cssClass=inputCssClass multiple=multiple />
129 <@addUploadedFilesBox fieldName=fieldName handler=handler listFiles=listUploadedFiles />
130 </#macro>