winery/org.eclipse.winery.topologymodeler/src/main/webapp/WEB-INF/tags/common/jquery-file-upload-full.tag

   1 <%--
   2 /*******************************************************************************
   3  * Copyright (c) 2012-2013 University of Stuttgart.
   4  * All rights reserved. This program and the accompanying materials
   5  * are made available under the terms of the Eclipse Public License v1.0
   6  * and the Apache License 2.0 which both accompany this distribution,
   7  * and are available at http://www.eclipse.org/legal/epl-v10.html
   8  * and http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Contributors:
  11  *    Oliver Kopp - initial API and implementation and/or initial documentation
  12  *******************************************************************************/
  13 --%>
  14 <%@tag description="HTML + JavaScript enabling the full jQuery file upload as shown at http://blueimp.github.com/jQuery-File-Upload/" pageEncoding="UTF-8"%>
  15
  16 <%-- Original Source https://raw.github.com/blueimp/jQuery-File-Upload/9.5.4/jquery-ui.html, License: MIT; See also CQ 8006 --%>
  17
  18 <%@attribute name="action" required="false" description="custom action for the upload"%>
  19 <%@attribute name="loadexistingfiles" type="java.lang.Boolean" required="true" description="load existing files from files/ url. false if that should not happen"%>
  20
  21 <%--
  22 !! USES HARD-CODED URL "files/" for data !!
  23 It is OK since it is currently only used in "files.jsp"
  24 If it will be used in other places, there has to be a parameter "url" introduced
  25 (and this jsp updated to a tag file)
  26 --%>
  27
  28 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  29
  30 <%-- The File Upload user interface plugin --%>
  31
  32         <!-- The file upload form used as target for the file upload widget -->
  33         <form id="fileupload" method="POST" enctype="multipart/form-data" <c:if test="${not empty action}">action="${action}"</c:if>>
  34                 <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
  35                 <div class="row fileupload-buttonbar">
  36                         <div class="span7"> <!-- should be col-lg-7, but then the add button does not work any more -->
  37                                 <!-- The fileinput-button span is used to style the file input field as button -->
  38                                 <span class="btn btn-success fileinput-button">
  39                                         <i class="glyphicon glyphicon-plus"></i>
  40                                         <span>Add files...</span>
  41                                         <input type="file" name="files[]" multiple>
  42                                 </span>
  43                         </div>
  44                         <!-- The global progress information -->
  45                         <div class="span5 fileupload-progress fade">
  46                                 <!-- The global progress bar -->
  47                                 <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
  48                                         <div class="bar" style="width:0%;"></div>
  49                                 </div>
  50                                 <!-- The extended global progress information -->
  51                                 <div class="progress-extended">&nbsp;</div>
  52                         </div>
  53                 </div>
  54                 <!-- The loading indicator is shown during file processing -->
  55                 <div class="fileupload-loading"></div>
  56                 <br>
  57                 <!-- The table listing the files available for upload/download -->
  58                 <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
  59         </form>
  60
  61 <!-- The template to display files available for upload -->
  62 <script id="template-upload" type="text/x-tmpl">
  63 {% for (var i=0, file; file=o.files[i]; i++) { %}
  64         <tr class="template-upload fade">
  65                 <td>
  66                         <span class="preview"></span>
  67                 </td>
  68                 <td>
  69                         <p class="name">{%=file.name%}</p>
  70                         <strong class="error text-danger"></strong>
  71                 </td>
  72                 <td>
  73                         <p class="size">Processing...</p>
  74                         <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
  75                 </td>
  76                 <td>
  77                         {% if (!i && !o.options.autoUpload) { %}
  78                                 <button class="btn btn-primary start" disabled>
  79                                         <i class="glyphicon glyphicon-upload"></i>
  80                                         <span>Start</span>
  81                                 </button>
  82                         {% } %}
  83                         {% if (!i) { %}
  84                                 <button class="btn btn-warning cancel">
  85                                         <i class="glyphicon glyphicon-ban-circle"></i>
  86                                         <span>Cancel</span>
  87                                 </button>
  88                         {% } %}
  89                 </td>
  90         </tr>
  91 {% } %}
  92 </script>
  93 <!-- The template to display files available for download -->
  94 <script id="template-download" type="text/x-tmpl">
  95 {% for (var i=0, file; file=o.files[i]; i++) { %}
  96         <tr class="template-download fade">
  97                 <td>
  98                         <span class="preview">
  99                                 {% if (file.thumbnailUrl) { %}
 100                                         <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
 101                                 {% } %}
 102                         </span>
 103                 </td>
 104                 <td>
 105                         <p class="name">
 106                                 {% if (file.url) { %}
 107                                         <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
 108                                 {% } else { %}
 109                                         <span>{%=file.name%}</span>
 110                                 {% } %}
 111                         </p>
 112                         {% if (file.error) { %}
 113                                 <div><span class="label label-danger">Error</span> {%=file.error%}</div>
 114                         {% } %}
 115                 </td>
 116                 <td>
 117                         <span class="size">{%=o.formatFileSize(file.size)%}</span>
 118                 </td>
 119                 <td>
 120                         {% if (file.deleteUrl) { %}
 121                                 <button class="btn btn-danger btn-sm delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
 122                                         <i class="glyphicon glyphicon-trash"></i>
 123                                         <span>Delete</span>
 124                                 </button>
 125                         {% } else { %}
 126                                 <button class="btn btn-warning cancel">
 127                                         <i class="glyphicon glyphicon-ban-circle"></i>
 128                                         <span>Cancel</span>
 129                                 </button>
 130                         {% } %}
 131                 </td>
 132         </tr>
 133 {% } %}
 134 </script>
 135
 136 <script>
 137 /*
 138  * Based on jQuery File Upload Plugin JS Example
 139  * https://github.com/blueimp/jQuery-File-Upload
 140  *
 141  * Copyright 2010, Sebastian Tschan
 142  * https://blueimp.net
 143  *
 144  * Licensed under the MIT license:
 145  * http://www.opensource.org/licenses/MIT
 146  */
 147
 148 /*jslint nomen: true, unparam: true, regexp: true */
 149 /*global $, window, document */
 150
 151 $(function () {
 152         'use strict';
 153
 154         // jquery.fileupload.process for image resizing capabilities
 155         // has to be included in all cases as jquery.ui.widget depends on it without specifying the depencency explicitly
 156         requirejs(['tmpl', 'jquery.ui.widget', 'jquery.fileupload', 'jquery.fileupload-ui', 'jquery.fileupload-process'], function() {
 157                 // Initialize the jQuery File Upload widget:
 158                 $('#fileupload').fileupload( {
 159                         autoUpload: true,
 160                         url: "files/"
 161                 });
 162
 163                 <c:if test="${loadexistingfiles}">
 164                 // Load existing files
 165                 $('#fileupload').addClass('fileupload-processing');
 166                 $.ajax({
 167                         url: $('#fileupload').fileupload('option', 'url'),
 168                         dataType: 'json',
 169                         context: $('#fileupload')[0]
 170                 }).always(function () {
 171                         $(this).removeClass('fileupload-processing');
 172                 }).done(function (result) {
 173                         $(this).fileupload('option', 'done')
 174                                 .call(this, $.Event('done'), {result: result});
 175                 }).fail(function(jqXHR, textStatus, errorThrown) {
 176                         vShowAJAXError("Could not add upload file", jqXHR, errorThrown);
 177                 });
 178                 </c:if>
 179         });
 180 });
 181 </script>