src/fileupload/templates/fileupload/picture_form.html

   1 {% extends "documents/base.html" %}
   2 {% load i18n %}
   3
   4 {% block add_css %}
   5     <link rel="stylesheet" href="{{ STATIC_URL }}lib/jQuery-File-Upload-10.32.0/css/jquery.fileupload.css" />
   6     <link rel="stylesheet" href="{{ STATIC_URL }}lib/jQuery-File-Upload-10.32.0/css/jquery.fileupload-ui.css" />
   7     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
   8     <!-- CSS adjustments for browsers with JavaScript disabled -->
   9     <noscript
  10       ><link rel="stylesheet" href="{{ STATIC_URL }}lib/jQuery-File-Upload-10.32.0/css/jquery.fileupload-noscript.css"
  11     /></noscript>
  12     <noscript
  13       ><link rel="stylesheet" href="{{ STATIC_URL }}lib/jQuery-File-Upload-10.32.0/css/jquery.fileupload-ui-noscript.css"
  14              /></noscript>
  15 {% endblock %}
  16
  17
  18 {% block content %}
  19 <h1>
  20 {% trans "Browse:" %}
  21 {% for crumb in view.breadcrumbs %}
  22     {% if crumb.1 %}
  23         <a href="{{ crumb.1 }}">{{ crumb.0 }}</a>
  24     {% else %}
  25         {{ crumb.0 }}
  26     {% endif %}
  27     {% if not forloop.last %}/{% endif %}
  28 {% endfor %}
  29 </h1>
  30
  31 {% block note %}{% endblock %}
  32
  33
  34     <form id="fileupload" method="post" action="." enctype="multipart/form-data">{% csrf_token %}
  35         <div class="row fileupload-buttonbar">
  36             <div class="col-lg-7">
  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="fas fa-plus"></i>
  40                     <span>{% trans "Add files..." %}</span>
  41                     <input type="file" name="files[]" multiple />
  42                 </span>
  43                 <button class="btn btn-primary start" type="submit">
  44                     <i class="fas fa-upload"></i>
  45                     <span>{% trans "Start upload" %}</span>
  46                 </button>
  47                 <button class="btn btn-warning cancel" type="reset">
  48                     <i class="fas fa-ban"></i>
  49                     <span>{% trans "Cancel upload" %}</span>
  50                 </button>
  51                 <button class="btn btn-danger delete" type="button">
  52                     <i class="fas fa-trash"></i>
  53                     <span>{% trans "Delete" %}</span>
  54                 </button>
  55                 <input type="checkbox" class="toggle" />
  56                 <!-- The global file processing state -->
  57                 <span class="fileupload-process"></span>
  58             </div>
  59             <!-- The global progress state -->
  60             <div class="col-lg-5 fileupload-progress fade">
  61                 <!-- The global progress bar -->
  62                 <div
  63                   class="progress progress-striped active"
  64                   role="progressbar"
  65                   aria-valuemin="0"
  66                   aria-valuemax="100"
  67                 >
  68                   <div
  69                     class="progress-bar progress-bar-success"
  70                     style="width: 0%;"
  71                   ></div>
  72                 </div>
  73                 <!-- The extended global progress state -->
  74                 <div class="progress-extended">&nbsp;</div>
  75               </div>
  76             </div>
  77             <!-- The table listing the files available for upload/download -->
  78             <table role="presentation" class="table table-striped">
  79               <tbody class="files"></tbody>
  80             </table>
  81         </div>
  82     </form>
  83
  84 {% endblock %}
  85
  86
  87 {% block add_js %}
  88
  89 {% verbatim %}
  90     <script id="template-upload" type="text/x-tmpl">
  91       {% for (var i=0, file; file=o.files[i]; i++) { %}
  92           <tr class="template-upload fades{%=o.options.loadImageFileTypes.test(file.type)?' image':''%}">
  93               <td>
  94                   <span class="preview"></span>
  95               </td>
  96               <td>
  97                   <p class="name">{%=file.name%}</p>
  98                   <strong class="error text-danger"></strong>
  99               </td>
 100               <td>
 101                   <p class="size">{%=o.options.messages.processing%}</p>
 102                   <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>
 103               </td>
 104               <td>
 105                   {% if (!i && !o.options.autoUpload) { %}
 106                       <button class="btn btn-primary start" disabled>
 107                           <i class="fas fa-upload"></i>
 108                           <span>{%=o.options.messages.start%}</span>
 109                       </button>
 110                   {% } %}
 111                   {% if (!i) { %}
 112                       <button class="btn btn-warning cancel">
 113                           <i class="fas fa-ban"></i>
 114                           <span>{%=o.options.messages.cancel%}</span>
 115                       </button>
 116                   {% } %}
 117               </td>
 118           </tr>
 119       {% } %}
 120     </script>
 121     <!-- The template to display files available for download -->
 122     <script id="template-download" type="text/x-tmpl">
 123       {% for (var i=0, file; file=o.files[i]; i++) { %}
 124           <tr class="template-download fade{%=file.thumbnail_url?' image':''%}">
 125               <td>
 126                   <span class="preview">
 127                       {% if (file.thumbnail_url) { %}
 128                           <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnail_url%}"></a>
 129                       {% } %}
 130                   </span>
 131               </td>
 132               <td>
 133                   <p class="name">
 134                       {% if (file.url) { %}
 135                           <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnail_url?'data-gallery':''%}>{%=file.name%}</a>
 136                       {% } else { %}
 137                           <span>{%=file.name%}</span>
 138                       {% } %}
 139                   </p>
 140                   {% if (file.error) { %}
 141                       <div><span class="label label-danger">{%=o.options.messages.error%}</span> {%=file.error%}</div>
 142                   {% } %}
 143               </td>
 144               <td>
 145                   <span class="size">{%=o.formatFileSize(file.size)%}</span>
 146               </td>
 147               <td>
 148                   {% if (file.delete_url) { %}
 149                       <button class="btn btn-danger delete" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
 150                           <i class="fas fa-trash"></i>
 151                           <span>{%=o.options.messages.delete%}</span>
 152                       </button>
 153                       <input type="checkbox" name="delete" value="1" class="toggle">
 154                   {% } else { %}
 155                       <button class="btn btn-warning cancel">
 156                           <i class="fas fa-ban"></i>
 157                           <span>{%=o.options.messages.cancel%}</span>
 158                       </button>
 159                   {% } %}
 160               </td>
 161           </tr>
 162       {% } %}
 163     </script>
 164 {% endverbatim %}
 165
 166
 167     <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
 168     <script src="{{ STATIC_URL }}lib/jQuery-File-Upload-10.32.0/js/vendor/jquery.ui.widget.js"></script>
 169     <!-- The Templates plugin is included to render the upload/download listings -->
 170     <script src="{{ STATIC_URL }}lib/JavaScript-Templates/tmpl.min.js"></script>
 171     <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
 172
 173     <script src="{{ STATIC_URL }}lib/JavaScript-Load-Image/load-image.all.min.js"></script>
 174     <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
 175     <script src="{{ STATIC_URL }}lib/jQuery-File-Upload-10.32.0/js/jquery.iframe-transport.js"></script>
 176     <!-- The basic File Upload plugin -->
 177     <script src="{{ STATIC_URL }}lib/jQuery-File-Upload-10.32.0/js/jquery.fileupload.js"></script>
 178     <!-- The File Upload processing plugin -->
 179     <script src="{{ STATIC_URL }}lib/jQuery-File-Upload-10.32.0/js/jquery.fileupload-process.js"></script>
 180     <!-- The File Upload image preview & resize plugin -->
 181     <script src="{{ STATIC_URL }}lib/jQuery-File-Upload-10.32.0/js/jquery.fileupload-image.js"></script>
 182     <!-- The File Upload audio preview plugin -->
 183     <script src="{{ STATIC_URL }}lib/jQuery-File-Upload-10.32.0/js/jquery.fileupload-audio.js"></script>
 184     <!-- The File Upload video preview plugin -->
 185     <script src="{{ STATIC_URL }}lib/jQuery-File-Upload-10.32.0/js/jquery.fileupload-video.js"></script>
 186     <!-- The File Upload validation plugin -->
 187     <script src="{{ STATIC_URL }}lib/jQuery-File-Upload-10.32.0/js/jquery.fileupload-validate.js"></script>
 188     <!-- The File Upload user interface plugin -->
 189     <script src="{{ STATIC_URL }}lib/jQuery-File-Upload-10.32.0/js/jquery.fileupload-ui.js"></script>
 190     <!-- The main application script -->
 191     <script src="{{ STATIC_URL }}fileupload/js/main.js"></script>
 192     <script src="{{ STATIC_URL }}fileupload/js/csrf.js"></script>
 193 {% endblock %}