Update uploader style to better match theme and template used. Use the new uploader for new documents only not for document versions.

mayan/apps/sources/forms.py

@@ -68,13 +68,16 @@ class StagingUploadForm(UploadBaseForm):
 
 
 class WebFormUploadForm(UploadBaseForm):
+    file = forms.FileField(label=_('File'))
+
+
+class WebFormUploadFormHTML5(WebFormUploadForm):
     file = forms.FileField(
         label=_('File'), widget=forms.widgets.FileInput(
             attrs={'class': 'hidden', 'hidden': True}
         )
     )
 
-
 class WebFormSetupForm(forms.ModelForm):
     class Meta:
         fields = ('label', 'enabled', 'uncompress')

mayan/apps/sources/static/sources/packages/dropzone.css

@@ -174,7 +174,7 @@
   box-sizing: border-box; }
 
 .dz-default {
-    border-style: dashed;
+    border-style: dotted;
 }
 
 .dropzone {
@@ -187,7 +187,7 @@
     .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
       cursor: pointer; }
   .dropzone.dz-started .dz-message {
-    display: none; }
+    display: none;  }
   .dropzone.dz-drag-hover {
     border-style: solid; }
     .dropzone.dz-drag-hover .dz-message {
@@ -199,36 +199,27 @@
     position: relative;
     display: inline-block;
     vertical-align: top;
-    margin: 16px;
+    margin: 5px;
-    min-height: 100px; }
+}
     .dropzone .dz-preview:hover {
       z-index: 1000; }
       .dropzone .dz-preview:hover .dz-details {
         opacity: 1; }
     .dropzone .dz-preview.dz-file-preview .dz-image {
-      border-radius: 20px;
+      }
-      background: #999;
-      background: linear-gradient(to bottom, #eee, #ddd); }
     .dropzone .dz-preview.dz-file-preview .dz-details {
-      opacity: 1; }
+      opacity: 1;
+      margin-top: 30px;
+    }
     .dropzone .dz-preview.dz-image-preview {
       background: white; }
       .dropzone .dz-preview.dz-image-preview .dz-details {
-        -webkit-transition: opacity 0.2s linear;
+        }
-        -moz-transition: opacity 0.2s linear;
+
-        -ms-transition: opacity 0.2s linear;
-        -o-transition: opacity 0.2s linear;
-        transition: opacity 0.2s linear; }
-    .dropzone .dz-preview .dz-remove {
-      font-size: 14px;
-      text-align: center;
-      display: block;
-      cursor: pointer;
-      border: none; }
-      .dropzone .dz-preview .dz-remove:hover {
-        text-decoration: underline; }
     .dropzone .dz-preview:hover .dz-details {
-      opacity: 1; }
+      opacity: 1;
+
+      }
     .dropzone .dz-preview .dz-details {
       z-index: 20;
       position: absolute;
@@ -240,7 +231,6 @@
       max-width: 100%;
       padding: 2em 1em;
       text-align: center;
-      color: rgba(0, 0, 0, 0.9);
       line-height: 150%; }
       .dropzone .dz-preview .dz-details .dz-size {
         margin-bottom: 1em;
@@ -258,20 +248,12 @@
       .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
         background-color: rgba(255, 255, 255, 0.4);
         padding: 0 0.4em;
-        border-radius: 3px; }
+        }
     .dropzone .dz-preview:hover .dz-image img {
-      -webkit-transform: scale(1.05, 1.05);
+      }
-      -moz-transform: scale(1.05, 1.05);
-      -ms-transform: scale(1.05, 1.05);
-      -o-transform: scale(1.05, 1.05);
-      transform: scale(1.05, 1.05);
-      -webkit-filter: blur(8px);
-      filter: blur(8px); }
     .dropzone .dz-preview .dz-image {
-      border-radius: 20px;
       overflow: hidden;
       width: 120px;
-      height: 120px;
       position: relative;
       display: block;
       z-index: 10; }
@@ -331,7 +313,7 @@
       position: absolute;
       height: 16px;
       left: 50%;
-      top: 50%;
+      top: 70%;
       margin-top: -8px;
       width: 80px;
       margin-left: -40px;
@@ -371,20 +353,16 @@
       transition: opacity 0.3s ease;
       border-radius: 8px;
       font-size: 13px;
-      top: 130px;
+      top: 10px;
       left: -10px;
       width: 140px;
-      background: #be2626;
-      background: linear-gradient(to bottom, #be2626, #a92222);
       padding: 0.5em 1.2em;
-      color: white; }
+  }
-      .dropzone .dz-preview .dz-error-message:after {
+
-        content: '';
+    .btn-dz-remove {
-        position: absolute;
+        margin-top: 5px;
-        top: -6px;
+    }
-        left: 64px;
+
-        width: 0;
+    .dz-message {
-        height: 0;
+        background: white;
-        border-left: 6px solid transparent;
+    }
-        border-right: 6px solid transparent;
-        border-bottom: 6px solid #be2626; }

mayan/apps/sources/templates/sources/upload_multiform_subtemplate.html

@@ -1,22 +1,50 @@
+{% load i18n %}
 {% load static %}
 
+<link href="{% static 'sources/packages/dropzone.css' %}" media="screen" rel="stylesheet" type="text/css" />
+
 {% include 'appearance/generic_multiform_subtemplate.html' %}
 
-{% block stylesheets %}
+<script type="text/javascript" src="{% static 'sources/packages/dropzone.js' %}"></script>
-    <link href="{% static 'sources/packages/dropzone.css' %}" media="screen" rel="stylesheet" type="text/css" />
+<script type="text/javascript" src="{% url 'common:javascript_catalog' 'sources' %}"></script>
-{% endblock %}
 
-{% block javascript %}
+<script type="text/x-template" id="previewTemplate">
-    <script type="text/javascript" src="{% static 'sources/packages/dropzone.js' %}"></script>
+    <div class="dz-preview dz-file-preview">
+        <i class="fa fa-file-o" style="font-size: 150px;"></i>
 
-    <script>
+        <div class="dz-image"><img data-dz-thumbnail></div>
-        'use strict';
+        <div class="dz-details">
+            <div class="dz-filename"><span data-dz-name></span></div>
+            <div class="dz-size"><span data-dz-size></span></div>
+        </div>
+        <div class="dz-progress">
+            <span class="dz-upload" data-dz-uploadprogress>
+                <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" style="width: 100%">
+                </div>
+            </span>
+        </div>
+        <div class="dz-error-message alert alert-danger"><span data-dz-errormessage></span></div>
+        <div class="dz-success-mark">
+            <i class="text-success fa fa-4x fa-check-circle"></i>
+        </div>
+        <div class="dz-error-mark">
+            <i class="text-danger fa fa-4x fa-exclamation-circle"></i>
+        </div>
 
+        <div class="text-center">
+            <a class="btn btn-default btn-xs btn-dz-remove" data-dz-remove>{% trans 'Clear' %}</a>
+        </div>
+    </div>
+</script>
+<script>
+    var previewTemplate = document.querySelector('#previewTemplate').innerHTML;
+
+    {% verbatim %}
         Dropzone.options.html5upload = {
             paramName: 'source-file',
-            addRemoveLinks: true,
+            addRemoveLinks: false,
             createImageThumbnails: false,
-            dictDefaultMessage: gettext('Drop files or click here to upload files'),
+            dictDefaultMessage: '<i class="fa fa-cloud-upload"></i> ' + gettext('Drop files or click here to upload files'),
             dictFallbackMessage: gettext('Your browser does not support drag\'n\'drop file uploads.'),
             dictFallbackText: gettext('Please use the fallback form below to upload your files like in the olden days.'),
             dictFileTooBig: gettext('File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.'),
@@ -27,6 +55,7 @@
             dictRemoveFile: gettext('Clear'),
             dictMaxFilesExceeded: gettext('You can not upload any more files.'),
             maxFilesize: 1024,
+            previewTemplate: previewTemplate,
         };
-    </script>
+    {% endverbatim %}
-{% endblock %}
+</script>

mayan/apps/sources/views.py

@@ -29,7 +29,8 @@ from navigation import Link
 from permissions import Permission
 
 from .forms import (
-    NewDocumentForm, NewVersionForm
+    NewDocumentForm, NewVersionForm, WebFormUploadForm,
+    WebFormUploadFormHTML5
 )
 from .literals import (
     SOURCE_CHOICE_STAGING, SOURCE_CHOICE_WEB_FORM,
@@ -169,10 +170,6 @@ class UploadBaseView(MultiFormView):
             subtemplates_list.append({
                 'name': 'sources/upload_multiform_subtemplate.html',
                 'context': {
-                    'form_action': self.request.get_full_path(),
-                    'form_class': 'dropzone',
-                    'form_disable_submit': True,
-                    'form_id': 'html5upload',
                     'forms': context['forms'],
                     'is_multipart': True,
                     'title': _('Document properties'),
@@ -190,7 +187,6 @@ class UploadBaseView(MultiFormView):
 
 
 class UploadInteractiveView(UploadBaseView):
-
     def dispatch(self, request, *args, **kwargs):
         self.subtemplates_list = []
 
@@ -291,9 +287,15 @@ class UploadInteractiveView(UploadBaseView):
         )
 
     def get_form_classes(self):
+        source_form_class = get_upload_form_class(self.source.source_type)
+
+        # Override source form class to enable the HTML5 file uploader
+        if source_form_class == WebFormUploadForm:
+            source_form_class = WebFormUploadFormHTML5
+
         return {
             'document_form': NewDocumentForm,
-            'source_form': get_upload_form_class(self.source.source_type)
+            'source_form': source_form_class
         }
 
     def get_context_data(self, **kwargs):
@@ -301,6 +303,15 @@ class UploadInteractiveView(UploadBaseView):
         context['title'] = _(
             'Upload a local document from source: %s'
         ) % self.source.label
+        if not isinstance(self.source, StagingFolderSource):
+            context['subtemplates_list'][0]['context'].update(
+                {
+                    'form_action': self.request.get_full_path(),
+                    'form_class': 'dropzone',
+                    'form_disable_submit': True,
+                    'form_id': 'html5upload',
+                }
+            )
         return context