Several attachment changes

- Use an "Add File" button at the bottom of the dropzone instead of clicking directly on the dropzone
- Adjust layout to hopefully fix issue with long file names (haven't tested yet)
- Show percentage in percentage bar
- Fix issue where percentage bar would still animate even after upload finished

css/mods-for-hesk.css

@@ -332,3 +332,9 @@ div.setupButtons {
 .rate {
     margin: 0;
 }
+
+.fileinput-button {
+    width: 100%;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}

inc/view_attachment_functions.inc.php

@@ -176,18 +176,22 @@ function output_dropzone_window() {
     <div class="table table-striped" class="files" id="previews" style="display:none">
         <div id="template" class="file-row">
             <!-- This is used as the file preview template -->
-            <div>
-                <span class="preview"><img data-dz-thumbnail /></span>
-            </div>
             <div class="row">
-                <div class="col-md-4 col-sm-12">
+                <div class="col-md-4">
-                    <p class="name" data-dz-name></p>
+                    <span class="preview"><img data-dz-thumbnail></span>
-                    <i class="fa fa-trash fa-2x" style="color: gray; cursor: pointer" title="Remove file" data-dz-remove></i>
                 </div>
-                <div class="col-md-8 col-sm-12">
+                <div class="col-md-8">
-                    <p class="size" data-dz-size></p>
+                    <div class="row">
-                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" id="total-progress">
+                        <p class="name" data-dz-name></p>
-                        <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
+                        <i class="fa fa-trash fa-2x" style="color: gray; cursor: pointer" title="Remove file" data-dz-remove></i>
+                        <span class="size" data-dz-size></span>
+                    </div>
+                    <div class="row">
+                        <div class="progress progress-striped active" role="progressbar" id="total-progress">
+                            <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress>
+                                <span id="percentage"></span>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -229,14 +233,19 @@ function display_dropzone_field($url, $id = 'filedrop') {
                 // Remove the attachment from the database and the filesystem.
                 removeAttachment(file['databaseId']);
             });
-            this.on('queuecomplete', function(progress) {
+            this.on('complete', function(file) {
                 // Stop animating if complete.
-                $('#total-progress').removeClass('active');
+                $(file.previewTemplate).find('#total-progress').removeClass('active');
+            });
+            this.on('queuecomplete', function() {
                 $('input[type=\"submit\"]').attr('disabled', false);
             });
             this.on('processing', function() {
                 $('input[type=\"submit\"]').attr('disabled', true);
             });
+            this.on('uploadprogress', function(file, percentage) {
+                $(file.previewTemplate).find('#percentage').text(percentage + '%');
+            });
         },
         paramName: 'attachment',
         url: '" . $url . "',
@@ -253,7 +262,8 @@ function display_dropzone_field($url, $id = 'filedrop') {
         dictCancelUpload: ".json_encode($hesklang['attachment_cancel']).",
         dictCancelUploadConfirmation: ".json_encode($hesklang['attachment_confirm_cancel']).",
         dictRemoveFile: ".json_encode($hesklang['attachment_remove']).",
-        previewTemplate: $('#previews').html()
+        previewTemplate: $('#previews').html(),
+        clickable: '.fileinput-button'
     };
     </script>
     ";

index.php

@@ -990,7 +990,7 @@ function print_add_ticket()
                                     ?>
                                 </div>
                             </div>
-
+                            <button class="btn btn-default btn-xs fileinput-button"><?php echo $hesklang['add_files']; ?></button><br>
                             <a href="file_limits.php" target="_blank"
                                onclick="Javascript:hesk_window('file_limits.php',250,500);return false;"><?php echo $hesklang['ful']; ?></a>
                         </div>

language/en/text.php

@@ -32,7 +32,7 @@ $hesklang['warning_title_case'] = 'Warning';
 $hesklang['logs'] = 'Logs';
 $hesklang['view_message_log'] = 'View Message Log';
 $hesklang['can_view_logs'] = 'Can view message logs';
-$hesklang['attachment_viewer_message'] = 'Drag or click here to select files to upload.';
+$hesklang['attachment_viewer_message'] = "Drag files here or click the 'Add File' button below to select files to upload.";
 $hesklang['attachment_invalid_type_message'] = 'Sorry, but the file type you tried to upload is not allowed.';
 $hesklang['attachment_upload_error'] = 'An error occurred when trying to upload. Please try again later.';
 $hesklang['attachment_too_large'] = 'This attachment is larger than the max filesize permitted.';
@@ -104,6 +104,7 @@ $hesklang['tickets_and_events'] = 'Tickets and events';
 $hesklang['tickets_only'] = 'Tickets only';
 $hesklang['events_only'] = 'Events only';
 $hesklang['events'] = 'Events';
+$hesklang['add_files'] = '<i class="fa fa-plus"></i> Add File';
 
 // ADDED OR MODIFIED IN Mods for HESK 2.5.2
 $hesklang['manage_statuses'] = 'Manage Statuses';