From 7ca3946f8a4b727aff94ba5c9c194a7eca14bf88 Mon Sep 17 00:00:00 2001
From: metal_gvc <metal.gvc@gmail.com>
Date: Fri, 14 Feb 2014 17:21:18 +0200
Subject: [PATCH] Uploading new plugins via the admin panel - fileuploader
 refactoring: drag&drop uploader multiple instances support #215

---
 plugins/box/filesmanager/js/fileuploader.js   | 39 +++++++++++--------
 .../filesmanager/views/backend/index.view.php | 18 +++++----
 .../box/plugins/views/backend/index.view.php  | 12 +++---
 3 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/plugins/box/filesmanager/js/fileuploader.js b/plugins/box/filesmanager/js/fileuploader.js
index cef0d4a..d272802 100644
--- a/plugins/box/filesmanager/js/fileuploader.js
+++ b/plugins/box/filesmanager/js/fileuploader.js
@@ -5,37 +5,44 @@ $.monstra.fileuploader = {
     conf: {
         uploadUrl: '',
         csrf: '',
-		errorMsg: ''
+		errorMsg: '',
+        uploaderId: ''
     },
-    
+
+    _uploaderObj: null,
+
     init: function(conf){
+        if (!conf.uploaderId) {
+            throw 'uploaderId not specified';
+        }
         $.extend(this.conf, conf);
-        var area = $('#uploadArea');
-        area.on('dragenter', function(e){
+        this._uploaderObj = $('#'+ this.conf.uploaderId);
+        var area = this._uploaderObj.find('.upload-area');
+        area.off('dragenter.fuploader').on('dragenter.fuploader', function(e){
             e.stopPropagation();
             e.preventDefault();
             $(this).addClass('upload-area-dragenter');
         });
-        area.on('dragover', function(e){
+        area.off('dragover.fuploader').on('dragover.fuploader', function(e){
             e.stopPropagation();
             e.preventDefault();
         });
-        area.on('drop', function(e){
+        area.off('drop.fuploader').on('drop.fuploader', function(e){
             $(this).removeClass('upload-area-dragenter').removeClass('upload-area-dragover').addClass('upload-area-drop');
             e.preventDefault();
             var files = e.originalEvent.dataTransfer.files;
             $.monstra.fileuploader.uploadFileHandle(files, area);
         });
-        $(document).on('dragover', function(e){
+        $(document).off('dragover.fuploader').on('dragover.fuploader', function(e){
             e.stopPropagation();
             e.preventDefault();
             area.removeClass('upload-area-dragenter').removeClass('upload-area-drop').addClass('upload-area-dragover');
         });
-        $(document).on('dragenter', function(e){
+        $(document).off('dragenter.fuploader').on('dragenter.fuploader', function(e){
             e.stopPropagation();
             e.preventDefault();
         });
-        $(document).on('drop', function(e){
+        $(document).off('drop.fuploader').on('drop.fuploader', function(e){
             e.stopPropagation();
             e.preventDefault();
         });
@@ -87,18 +94,18 @@ $.monstra.fileuploader = {
 					message : $.monstra.fileuploader.conf.errorMsg,
 					hideAfter: 3
 				});
-				$('#fuProgress').animate({ width: 0 }, 1);
-				$('#fuPlaceholder').show();
+                this._uploaderObj.find('.upload-progress').animate({ width: 0 }, 1);
+                this._uploaderObj.find('.upload-file-pholder').show();
 			}
         });
     },
     
     setProgress: function(progress){
         if (parseInt(progress) > 0) {
-            $('#fuPlaceholder').hide();
+            this._uploaderObj.find('.upload-file-pholder').hide();
         }
-        var progressBarWidth = progress * $('#uploadArea').width() / 100;  
-        $('#fuProgress').animate({ width: progressBarWidth }, 10);
+        var progressBarWidth = progress * this._uploaderObj.find('.upload-area').width() / 100;
+        this._uploaderObj.find('.upload-progress').animate({ width: progressBarWidth }, 10);
     },
     
     setFileNameSize: function(fname, fsize){
@@ -111,14 +118,14 @@ $.monstra.fileuploader = {
             sizeStr = sizeKB.toFixed(2)+' KB';
         }
         
-        $('#fileInfo').html(fname +' '+ sizeStr);
+        this._uploaderObj.find('.upload-file-info').html(fname +' '+ sizeStr);
     }
 };
 
 $(document).ready(function(){
     $val_fUploaderInit = $('#fUploaderInit').val();
     if ($val_fUploaderInit !== undefined) {
-        $.monstra.fileuploader.init($.parseJSON($val_fUploaderInit));
+        $.monstra.fileuploader.init($.extend({}, {uploaderId:'DgDfileUploader'}, $.parseJSON($val_fUploaderInit)));
     }
 });
 
diff --git a/plugins/box/filesmanager/views/backend/index.view.php b/plugins/box/filesmanager/views/backend/index.view.php
index c5127c4..612d0f4 100755
--- a/plugins/box/filesmanager/views/backend/index.view.php
+++ b/plugins/box/filesmanager/views/backend/index.view.php
@@ -25,14 +25,16 @@
       <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
     </div>
 
-    <div id="uploadArea" class="upload-area">
-        <div id="fuProgress" class="upload-progress"></div>
-        <div id="fuPlaceholder" class="upload-file-pholder"><?php echo __('Drop File Here', 'filesmanager'); ?></div>
-    </div>
-    <div id="fileInfo" class="upload-file-info"></div>
-    <div class="btn btn-link file-size-max-upload">
-        <?php echo __('Maximum upload file size: :upload_max_filesize', 'pages', array(':upload_max_filesize' => $upload_max_filesize)); ?>
-    </div>
+	<div id="DgDfileUploader">
+		<div class="upload-area">
+			<div class="upload-progress"></div>
+			<div class="upload-file-pholder"><?php echo __('Drop File Here', 'filesmanager'); ?></div>
+		</div>
+		<div class="upload-file-info"></div>
+		<div class="btn btn-link file-size-max-upload">
+			<?php echo __('Maximum upload file size: :upload_max_filesize', 'pages', array(':upload_max_filesize' => $upload_max_filesize)); ?>
+		</div>
+	</div>
     </div>
     <div class="col-md-2">
         <div class="pull-right">
diff --git a/plugins/box/plugins/views/backend/index.view.php b/plugins/box/plugins/views/backend/index.view.php
index b6c5d45..762f6c3 100755
--- a/plugins/box/plugins/views/backend/index.view.php
+++ b/plugins/box/plugins/views/backend/index.view.php
@@ -121,11 +121,13 @@
                     <span class="fileupload-preview"></span>
 
                 </div>
-                <div id="uploadArea" class="upload-area">
-                    <div id="fuProgress" class="upload-progress"></div>
-                    <div id="fuPlaceholder" class="upload-file-pholder"><?php echo __('Drop File Here', 'plugins'); ?></div>
-                </div>
-                <div id="fileInfo" class="upload-file-info"></div>
+				<div id="DgDfileUploader">
+					<div class="upload-area">
+						<div class="upload-progress"></div>
+						<div class="upload-file-pholder"><?php echo __('Drop File Here', 'plugins'); ?></div>
+					</div>
+					<div class="upload-file-info"></div>
+				</div>
             </div>
         </div>