Merge branch '375-improve-file-upload' into '2-6-0'

Improve File Uploadsd

Closes #375

See merge request !15

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">
+                                <?php build_dropzone_markup('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>
                             </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">
+                    <?php build_dropzone_markup(); ?>
-                        <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>
                 </div>
             </div>
             <?php

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">
+                            <?php build_dropzone_markup(); ?>
-                                <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>
                         </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">
+                            <?php
-                                <div class="fallback">
+                            build_dropzone_markup();
-                                    <input type="hidden" name="use-legacy-attachments" value="1">
+                            display_dropzone_field($hesk_settings['hesk_url'] . '/internal-api/admin/knowledgebase/upload-attachment.php');
-                                    <?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'); ?>
-
-                            
                             ?>
                         </div>
                         <?php endif; //End attachments ?>

css/mods-for-hesk.css

@@ -331,4 +331,15 @@ div.setupButtons {
 
 .rate {
     margin: 0;
+}
+
+.fileinput-button {
+    width: 100%;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.file-row p.name {
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

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>
@@ -204,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;
 
@@ -225,18 +246,40 @@ 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('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 +296,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

@@ -979,20 +979,7 @@ function print_add_ticket()
                             :</label>
 
                         <div align="left" class="col-sm-9">
-                            <div class="dropzone" id="filedrop">
+                            <?php build_dropzone_markup(); ?>
-                                <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>
                         </div>
                     </div>
                     <?php

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';

ticket.php

@@ -654,20 +654,7 @@ function hesk_printCustomerReplyForm($reopen = 0)
                     :</label>
 
                 <div align="left" class="col-sm-9">
-                    <div class="dropzone" id="filedrop">
+                    <?php build_dropzone_markup(); ?>
-                        <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>
                 </div>
             </div>
             <?php