From fcf54ac9ca8627241ef392ac7fccc9c2228a98e7 Mon Sep 17 00:00:00 2001
From: Mike Koch <mkoch227@gmail.com>
Date: Fri, 6 May 2016 22:22:41 -0400
Subject: [PATCH 1/4] 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                 |  6 +++++
 inc/view_attachment_functions.inc.php | 36 +++++++++++++++++----------
 index.php                             |  2 +-
 language/en/text.php                  |  3 ++-
 4 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/css/mods-for-hesk.css b/css/mods-for-hesk.css
index d67bbd49..37725234 100644
--- a/css/mods-for-hesk.css
+++ b/css/mods-for-hesk.css
@@ -331,4 +331,10 @@ div.setupButtons {
 
 .rate {
     margin: 0;
+}
+
+.fileinput-button {
+    width: 100%;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
 }
\ No newline at end of file
diff --git a/inc/view_attachment_functions.inc.php b/inc/view_attachment_functions.inc.php
index df3e80ee..6bdc230b 100644
--- a/inc/view_attachment_functions.inc.php
+++ b/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">
-                    <p class="name" data-dz-name></p>
-                    <i class="fa fa-trash fa-2x" style="color: gray; cursor: pointer" title="Remove file" data-dz-remove></i>
+                <div class="col-md-4">
+                    <span class="preview"><img data-dz-thumbnail></span>
                 </div>
-                <div class="col-md-8 col-sm-12">
-                    <p class="size" data-dz-size></p>
-                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" id="total-progress">
-                        <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
+                <div class="col-md-8">
+                    <div class="row">
+                        <p class="name" data-dz-name></p>
+                        <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>
     ";
diff --git a/index.php b/index.php
index 90d99636..59ec77c5 100644
--- a/index.php
+++ b/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>
diff --git a/language/en/text.php b/language/en/text.php
index 7448851a..1a687e4c 100644
--- a/language/en/text.php
+++ b/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';

From 18ffc0b6573e4dc93003a3e98cd8fd83a5a76270 Mon Sep 17 00:00:00 2001
From: Mike Koch <mkoch227@gmail.com>
Date: Fri, 6 May 2016 22:34:01 -0400
Subject: [PATCH 2/4] Properly overflow text if the name is too long

---
 css/mods-for-hesk.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/css/mods-for-hesk.css b/css/mods-for-hesk.css
index 37725234..7e894def 100644
--- a/css/mods-for-hesk.css
+++ b/css/mods-for-hesk.css
@@ -337,4 +337,9 @@ div.setupButtons {
     width: 100%;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
+}
+
+.file-row p.name {
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
\ No newline at end of file

From be6659b18354ce342a398240a5a0281510e8bf61 Mon Sep 17 00:00:00 2001
From: Mike Koch <mkoch227@gmail.com>
Date: Sat, 7 May 2016 21:58:41 -0400
Subject: [PATCH 3/4] Disable button when max attachments reached

---
 inc/view_attachment_functions.inc.php | 17 +++++++++++++++++
 index.php                             |  2 +-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/inc/view_attachment_functions.inc.php b/inc/view_attachment_functions.inc.php
index 6bdc230b..c8f4eed3 100644
--- a/inc/view_attachment_functions.inc.php
+++ b/inc/view_attachment_functions.inc.php
@@ -229,9 +229,26 @@ function display_dropzone_field($url, $id = 'filedrop') {
                 // Add the database id to the file
                 file['databaseId'] = response;
             });
+            this.on('addedfile', function() {
+                var numberOfFiles = $('#" . $id . " .file-row').length;
+
+                var disabled = false;
+                if (numberOfFiles >= " . $max_files . ") {
+                    disabled = true;
+                }
+                $('." . $id . "-button').attr('disabled', disabled);
+            });
             this.on('removedfile', function(file) {
                 // Remove the attachment from the database and the filesystem.
                 removeAttachment(file['databaseId']);
+
+                var numberOfFiles = $('#" . $id . " .file-row').length;
+
+                var disabled = false;
+                if (numberOfFiles >= " . $max_files . ") {
+                    disabled = true;
+                }
+                $('." . $id . "-button').attr('disabled', disabled);
             });
             this.on('complete', function(file) {
                 // Stop animating if complete.
diff --git a/index.php b/index.php
index 59ec77c5..535325b1 100644
--- a/index.php
+++ b/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>
+                            <button class="btn btn-default btn-xs fileinput-button filedrop-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>

From 41bbeaf97f5bbe9b288bf6452d70f9f98571373b Mon Sep 17 00:00:00 2001
From: Mike Koch <Mike.Koch@emerson.com>
Date: Tue, 10 May 2016 12:53:25 -0400
Subject: [PATCH 4/4] Use the new button layout on all dropzones

---
 admin/admin_ticket.php                | 27 ++--------------------
 admin/manage_knowledgebase.php        | 33 ++++-----------------------
 inc/view_attachment_functions.inc.php | 17 ++++++++++++++
 index.php                             | 15 +-----------
 ticket.php                            | 15 +-----------
 5 files changed, 25 insertions(+), 82 deletions(-)

diff --git a/admin/admin_ticket.php b/admin/admin_ticket.php
index aa77f1b5..0a480cdc 100644
--- a/admin/admin_ticket.php
+++ b/admin/admin_ticket.php
@@ -1298,18 +1298,7 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
                                 </div>
                             </div>
                             <div class="col-md-6">
-                                <div class="dropzone" id="notesFiledrop">
-                                    <div class="fallback">
-                                        <input type="hidden" name="use-legacy-attachments" value="1">
-                                        <?php
-                                        for ($i = 1; $i <= $hesk_settings['attachments']['max_number']; $i++) {
-                                            echo '<input type="file" name="attachment[' . $i . ']" size="50" /><br />';
-                                        }
-                                        ?>
-                                    </div>
-                                </div>
-                                <a href="file_limits.php" target="_blank"
-                                   onclick="Javascript:hesk_window('file_limits.php',250,500);return false;"><?php echo $hesklang['ful']; ?></a>
+                                <?php build_dropzone_markup('notesFiledrop'); ?>
                             </div>
                         </div>
                         <?php display_dropzone_field($hesk_settings['hesk_url'] . '/internal-api/ticket/upload-attachment.php', 'notesFiledrop'); ?>
@@ -1869,19 +1858,7 @@ function hesk_printReplyForm()
                 <label for="attachments" class="col-sm-3 control-label"><?php echo $hesklang['attachments']; ?>:</label>
 
                 <div class="col-sm-9">
-                    <div class="dropzone" id="filedrop">
-                        <div class="fallback">
-                            <input type="hidden" name="use-legacy-attachments" value="1">
-                            <?php
-                            for ($i = 1; $i <= $hesk_settings['attachments']['max_number']; $i++) {
-                                $cls = ($i == 1 && in_array('attachments', $_SESSION['iserror'])) ? ' class="isError" ' : '';
-                                echo '<input type="file" name="attachment[' . $i . ']" size="50" ' . $cls . ' /><br />';
-                            }
-                            ?>
-                        </div>
-                    </div>
-                    <a href="file_limits.php" target="_blank"
-                       onclick="Javascript:hesk_window('file_limits.php',250,500);return false;"><?php echo $hesklang['ful']; ?></a>
+                    <?php build_dropzone_markup(); ?>
                 </div>
             </div>
             <?php
diff --git a/admin/manage_knowledgebase.php b/admin/manage_knowledgebase.php
index 9c6969a3..462bcda9 100644
--- a/admin/manage_knowledgebase.php
+++ b/admin/manage_knowledgebase.php
@@ -442,17 +442,7 @@ if (!isset($_SESSION['hide']['new_article']))
                         <?php if ($hesk_settings['attachments']['use']): ?>
                         <div class="form-group">
                             <label for="attachments" class="control-label"><?php echo $hesklang['attachments']; ?> (<a href="Javascript:void(0)" onclick="Javascript:hesk_window('../file_limits.php',250,500);return false;"><?php echo $hesklang['ful']; ?></a>)</label>
-                            <div class="dropzone" id="filedrop">
-                                <div class="fallback">
-                                    <input type="hidden" name="use-legacy-attachments" value="1">
-                                    <?php
-                                    for ($i=1;$i<=$hesk_settings['attachments']['max_number'];$i++)
-									{
-										echo '<input type="file" name="attachment['.$i.']" size="50" /><br />';
-									}
-                                    ?>
-                                </div>
-                            </div>
+                            <?php build_dropzone_markup(); ?>
                         </div>
                         <?php 
 							display_dropzone_field($hesk_settings['hesk_url'] . '/internal-api/admin/knowledgebase/upload-attachment.php'); 
@@ -1505,24 +1495,9 @@ function edit_article()
                             }
                             ?>
 
-                            <div class="dropzone" id="filedrop">
-                                <div class="fallback">
-                                    <input type="hidden" name="use-legacy-attachments" value="1">
-                                    <?php
-                                    // New attachments
-									if ($hesk_settings['attachments']['use'])
-									{
-										for ($i=1;$i<=$hesk_settings['attachments']['max_number'];$i++)
-										{
-											echo '<input type="file" name="attachment['.$i.']" size="50" /><br />';
-										}
-									}
-                                    ?>
-                                </div>
-                            </div>
-                            <?php display_dropzone_field($hesk_settings['hesk_url'] . '/internal-api/admin/knowledgebase/upload-attachment.php'); ?>
-
-                            
+                            <?php
+                            build_dropzone_markup();
+                            display_dropzone_field($hesk_settings['hesk_url'] . '/internal-api/admin/knowledgebase/upload-attachment.php');
                             ?>
                         </div>
                         <?php endif; //End attachments ?>
diff --git a/inc/view_attachment_functions.inc.php b/inc/view_attachment_functions.inc.php
index c8f4eed3..28e061ae 100644
--- a/inc/view_attachment_functions.inc.php
+++ b/inc/view_attachment_functions.inc.php
@@ -208,6 +208,23 @@ function output_attachment_id_holder_container($id) {
     echo '<div id="attachment-holder-' . $id . '" class="hide"></div>';
 }
 
+function build_dropzone_markup($id = 'filedrop') {
+    global $hesklang, $hesk_settings;
+
+    echo '<div class="dropzone" id="' . $id . '">
+        <div class="fallback">
+            <input type="hidden" name="use-legacy-attachments" value="1">';
+            for ($i = 1; $i <= $hesk_settings['attachments']['max_number']; $i++) {
+                $cls = ($i == 1 && in_array('attachments', $_SESSION['iserror'])) ? ' class="isError" ' : '';
+                echo '<input type="file" name="attachment[' . $i . ']" size="50" ' . $cls . ' /><br />';
+            }
+        echo '</div>
+    </div>
+    <button class="btn btn-default btn-xs fileinput-button filedrop-button">' . $hesklang['add_files'] . '</button><br>
+    <a href="file_limits.php" target="_blank"
+       onclick="Javascript:hesk_window(\'file_limits.php\',250,500);return false;">'. $hesklang['ful'] . '</a>';
+}
+
 function display_dropzone_field($url, $id = 'filedrop') {
     global $hesk_settings, $hesklang;
 
diff --git a/index.php b/index.php
index 535325b1..9ed243b7 100644
--- a/index.php
+++ b/index.php
@@ -979,20 +979,7 @@ function print_add_ticket()
                             :</label>
 
                         <div align="left" class="col-sm-9">
-                            <div class="dropzone" id="filedrop">
-                                <div class="fallback">
-                                    <input type="hidden" name="use-legacy-attachments" value="1">
-                                    <?php
-                                    for ($i = 1; $i <= $hesk_settings['attachments']['max_number']; $i++) {
-                                        $cls = ($i == 1 && in_array('attachments', $_SESSION['iserror'])) ? ' class="isError" ' : '';
-                                        echo '<input type="file" name="attachment[' . $i . ']" size="50" ' . $cls . ' /><br />';
-                                    }
-                                    ?>
-                                </div>
-                            </div>
-                            <button class="btn btn-default btn-xs fileinput-button filedrop-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>
+                            <?php build_dropzone_markup(); ?>
                         </div>
                     </div>
                     <?php
diff --git a/ticket.php b/ticket.php
index 6d4ab56c..75149564 100644
--- a/ticket.php
+++ b/ticket.php
@@ -654,20 +654,7 @@ function hesk_printCustomerReplyForm($reopen = 0)
                     :</label>
 
                 <div align="left" class="col-sm-9">
-                    <div class="dropzone" id="filedrop">
-                        <div class="fallback">
-                            <input type="hidden" name="use-legacy-attachments" value="1">
-                            <?php
-                            for ($i = 1; $i <= $hesk_settings['attachments']['max_number']; $i++) {
-                                $cls = ($i == 1 && in_array('attachments', $_SESSION['iserror'])) ? ' class="isError" ' : '';
-                                echo '<input type="file" name="attachment[' . $i . ']" size="50" ' . $cls . ' /><br />';
-                            }
-                            ?>
-                        </div>
-                    </div>
-
-                    <a href="file_limits.php" target="_blank"
-                       onclick="Javascript:hesk_window('file_limits.php',250,500);return false;"><?php echo $hesklang['ful']; ?></a>
+                    <?php build_dropzone_markup(); ?>
                 </div>
             </div>
             <?php