From de95f90b2829714328ee583af073ef1b59ca58f5 Mon Sep 17 00:00:00 2001
From: Denis Chenu <courriel@shnoulle.net>
Date: Fri, 10 Apr 2015 16:00:50 +0200
Subject: [PATCH] Fixed issue #08028: File upload dialogue window can't be
 styled Dev: except the table in "question" part all is done by css Dev: fix
 some HTML and javascript

---
 .../controllers/UploaderController.php        |  33 ++-
 application/helpers/qanda_helper.php          |  42 ++--
 scripts/modaldialog.js                        |  77 ++++---
 scripts/uploader.js                           | 208 ++++++++++--------
 .../img/upload-delete.png                     | Bin
 .../img/upload-edit.png                       | Bin
 .../img/upload-error.png                      | Bin
 .../img/upload-placeholder.png                | Bin
 .../img/upload-success.png                    | Bin
 styles-public/uploader-files.css              |  44 ++++
 styles-public/uploader.css                    |  76 +++++--
 11 files changed, 297 insertions(+), 183 deletions(-)
 rename images/delete.png => styles-public/img/upload-delete.png (100%)
 rename images/edit.png => styles-public/img/upload-edit.png (100%)
 rename images/error_notice.png => styles-public/img/upload-error.png (100%)
 rename images/placeholder.png => styles-public/img/upload-placeholder.png (100%)
 rename images/success_notice.png => styles-public/img/upload-success.png (100%)
 create mode 100644 styles-public/uploader-files.css

diff --git a/application/controllers/UploaderController.php b/application/controllers/UploaderController.php
index a455d56081e..ec35d0d63ce 100644
--- a/application/controllers/UploaderController.php
+++ b/application/controllers/UploaderController.php
@@ -15,23 +15,14 @@
 class UploaderController extends SurveyController {
     function run($actionID)
     {
-        if(isset($_SESSION['LEMsid']) && $oSurvey=Survey::model()->findByPk($_SESSION['LEMsid'])){
-            $surveyid= $_SESSION['LEMsid'];
-        }else{
+        $surveyid=Yii::app()->session['LEMsid'];
+        $oSurvey=Survey::model()->findByPk($surveyid);
+        if(!$oSurvey)
             throw new CHttpException(400);// See for debug > 1
-        }
-        if (isset($_SESSION['survey_'.$surveyid]['s_lang']))
-        {
-            $sLanguage = $_SESSION['survey_'.$surveyid]['s_lang'];
-        }
-        else
-        {
-            $sLanguage='';
-        }
 
+        $sLanguage=isset(Yii::app()->session['survey_'.$surveyid]['s_lang']) ? Yii::app()->session['survey_'.$surveyid]['s_lang']: "";
         $uploaddir = Yii::app()->getConfig("uploaddir");
         $tempdir = Yii::app()->getConfig("tempdir");
-
         Yii::app()->loadHelper("database");
 
         // Fill needed var
@@ -45,8 +36,8 @@ function run($actionID)
 
         // Validate and filter and throw error if problems
         // Using 'futmp_'.randomChars(15).'_'.$pathinfo['extension'] for filename, then remove all other characters
-        $sFileGetContentFiltered=preg_replace('/[^a-z0-9_]/', '', $sFileGetContent);
-        $sFileNameFiltered = preg_replace('/[^a-z0-9_]/', '',$sFileName);
+        $sFileGetContentFiltered=preg_replace('/[^a-zA-Z0-9_]/', '', $sFileGetContent);
+        $sFileNameFiltered = preg_replace('/[^a-zA-Z0-9_]/', '',$sFileName);
         $sFieldNameFiltered=preg_replace('/[^X0-9]/', '', $sFieldName);
         if($sFileGetContent!=$sFileGetContentFiltered || $sFileName!=$sFileNameFiltered || $sFieldName!=$sFieldNameFiltered)
         {// If one seems to be a hack: Bad request
@@ -149,13 +140,13 @@ function run($actionID)
             $valid_extensions_array = array_map('trim',$valid_extensions_array);
 
             $pathinfo = pathinfo($_FILES['uploadfile']['name']);
-            $ext = $pathinfo['extension'];
+            $ext = strtolower($pathinfo['extension']);
             $randfilename = 'futmp_'.randomChars(15).'_'.$pathinfo['extension'];
             $randfileloc = $sTempUploadDir . $randfilename;
 
             // check to see that this file type is allowed
             // it is also  checked at the client side, but jst double checking
-            if (!in_array(strtolower($ext), $valid_extensions_array))
+            if (!in_array($ext, $valid_extensions_array))
             {
                 $return = array(
                                 "success" => false,
@@ -291,7 +282,7 @@ function run($actionID)
             showpopups="'.Yii::app()->getConfig("showpopups").'";
         ';
         $sLangScriptVar="
-                translt = {
+                uploadLang = {
                      titleFld: '" . gT('Title','js') . "',
                      commentFld: '" . gT('Comment','js') . "',
                      errorNoMoreFiles: '" . gT('Sorry, no more files can be uploaded!','js') . "',
@@ -302,7 +293,9 @@ function run($actionID)
                      errorMoreAllowed: '" . gT('If you wish, you may upload %s more file(s); else you may return back to survey.','js') . "',
                      errorMaxReached: '" . gT('The maximum number of files has been uploaded. You may return back to survey.','js') . "',
                      errorTooMuch: '" . gT('The maximum number of files has been uploaded. You may return back to survey.','js') . "',
-                     errorNeedMoreConfirm: '" . gT("You need to upload %s more files for this question.\nAre you sure you want to exit?",'js') . "'
+                     errorNeedMoreConfirm: '" . gT("You need to upload %s more files for this question.\nAre you sure you want to exit?",'js') . "',
+                     deleteFile : '".gt('Delete','js') . "',
+                     editFile : '".gt('Edit','js') . "',
                     };
         ";
         $aSurveyInfo=getSurveyInfo($surveyid, $sLanguage);
@@ -321,6 +314,8 @@ function run($actionID)
         App()->getClientScript()->registerScriptFile(Yii::app()->getConfig("generalscripts").'uploader.js');
         App()->getClientScript()->registerScriptFile("{$sTemplateUrl}template.js");
         App()->clientScript->registerCssFile(Yii::app()->getConfig("publicstyleurl")."uploader.css");
+        App()->getClientScript()->registerCssFile(Yii::app()->getConfig('publicstyleurl') . "uploader-files.css");
+
         if (file_exists($sTemplateDir .DIRECTORY_SEPARATOR.'jquery-ui-custom.css'))
         {
             Yii::app()->getClientScript()->registerCssFile("{$sTemplateUrl}jquery-ui-custom.css");
diff --git a/application/helpers/qanda_helper.php b/application/helpers/qanda_helper.php
index c969a14498d..a3d0301404c 100644
--- a/application/helpers/qanda_helper.php
+++ b/application/helpers/qanda_helper.php
@@ -2734,8 +2734,6 @@ function do_file_upload($ia)
 {
     global $thissurvey;
 
-
-
     $checkconditionFunction = "checkconditions";
 
     $aQuestionAttributes=getQuestionAttributeValues($ia[0]);
@@ -2743,52 +2741,53 @@ function do_file_upload($ia)
     // Fetch question attributes
     $_SESSION['survey_'.Yii::app()->getConfig('surveyID')]['fieldname'] = $ia[1];
 
-    $currentdir = getcwd();
-    $pos = stripos($currentdir, "admin");
     $scriptloc = Yii::app()->getController()->createUrl('uploader/index');
+    $bPreview=Yii::app()->request->getParam('action')=="previewgroup" || Yii::app()->request->getParam('action')=="previewquestion" || $thissurvey['active'] != "Y";
 
-    if ($pos)
+    if ($bPreview)
     {
         $_SESSION['survey_'.Yii::app()->getConfig('surveyID')]['preview'] = 1 ;
         $questgrppreview = 1;   // Preview is launched from Question or group level
 
     }
-    else if ($thissurvey['active'] != "Y")
-        {
-            $_SESSION['survey_'.Yii::app()->getConfig('surveyID')]['preview'] = 1;
-            $questgrppreview = 0;
-        }
-        else
-        {
-            $_SESSION['survey_'.Yii::app()->getConfig('surveyID')]['preview'] = 0;
-            $questgrppreview = 0;
+    elseif ($thissurvey['active'] != "Y")
+    {
+        $_SESSION['survey_'.Yii::app()->getConfig('surveyID')]['preview'] = 1;
+        $questgrppreview = 0;
+    }
+    else
+    {
+        $_SESSION['survey_'.Yii::app()->getConfig('surveyID')]['preview'] = 0;
+        $questgrppreview = 0;
     }
 
-    $uploadbutton = "<h2><a id='upload_".$ia[1]."' class='upload' ";
+    $uploadbutton = "<div class='upload-button'><a id='upload_".$ia[1]."' class='upload' ";
     $uploadbutton .= " href='#' onclick='javascript:upload_$ia[1]();'";
-    $uploadbutton .=">" .gT('Upload files'). "</a></h2>";
+    $uploadbutton .=">" .gT('Upload files'). "</a></div>";
 
     $answer = "<script type='text/javascript'>
         function upload_$ia[1]() {
             var uploadurl = '{$scriptloc}?sid=".Yii::app()->getConfig('surveyID')."&fieldname={$ia[1]}&qid={$ia[0]}';
             uploadurl += '&preview={$questgrppreview}&show_title={$aQuestionAttributes['show_title']}';
-            uploadurl += '&show_comment={$aQuestionAttributes['show_comment']}&pos=".($pos?1:0)."';
+            uploadurl += '&show_comment={$aQuestionAttributes['show_comment']}';
             uploadurl += '&minfiles=' + LEMval('{$aQuestionAttributes['min_num_of_files']}');
             uploadurl += '&maxfiles=' + LEMval('{$aQuestionAttributes['max_num_of_files']}');
             $('#upload_$ia[1]').attr('href',uploadurl);
         }
-        var translt = {
+        var uploadLang = {
              title: '" . gT('Upload your files','js') . "',
              returnTxt: '" . gT('Return to survey','js') . "',
              headTitle: '" . gT('Title','js') . "',
              headComment: '" . gT('Comment','js') . "',
-             headFileName: '" . gT('File name','js') . "'
+             headFileName: '" . gT('File name','js') . "',
+             deleteFile : '".gt('Delete')."',
+             editFile : '".gt('Edit')."'
             };
         var imageurl =  '".Yii::app()->getConfig('imageurl')."';
         var uploadurl =  '".$scriptloc."';
     </script>\n";
     Yii::app()->getClientScript()->registerScriptFile(Yii::app()->getConfig('generalscripts')."modaldialog.js");
-
+    Yii::app()->getClientScript()->registerCssFile(Yii::app()->getConfig('publicstyleurl') . "uploader-files.css");
     // Modal dialog
     $answer .= $uploadbutton;
 
@@ -2821,8 +2820,7 @@ function upload_$ia[1]() {
     var json = $("#"+fieldname).val();
     var show_title = "'.$aQuestionAttributes["show_title"].'";
     var show_comment = "'.$aQuestionAttributes["show_comment"].'";
-    var pos = "'.($pos ? 1 : 0).'";
-    displayUploadedFiles(json, filecount, fieldname, show_title, show_comment, pos);
+    displayUploadedFiles(json, filecount, fieldname, show_title, show_comment);
     });
     </script>';
 
diff --git a/scripts/modaldialog.js b/scripts/modaldialog.js
index 6235cb212e6..be0ab49f3a4 100644
--- a/scripts/modaldialog.js
+++ b/scripts/modaldialog.js
@@ -1,35 +1,38 @@
 $(function() {
     openUploadModalDialog();
 });
-
 function openUploadModalDialog(){
+    $(document).on('click','.upload-edit',function(){
+        var fieldname=$(this).data('fieldname');
+        $('#upload_'+fieldname).click();
+    });
+
     $('.upload').click(function(e) {
         e.preventDefault();
         var $this = $(this);
-
         var show_title   = getQueryVariable('show_title', this.href);
         var show_comment = getQueryVariable('show_comment', this.href);
         var pos          = getQueryVariable('pos', this.href);
         var fieldname    = getQueryVariable('fieldname', this.href);
         var buttonsOpts = {};
-        buttonsOpts[translt.returnTxt] = function() {
+        buttonsOpts[uploadLang.returnTxt] = function() {
             $(this).dialog("close");
         };
-        // Get the dialogheigth and width from windows (with some maximum: same than old behaviour (why 440 ?)
         var windowwidth = $(window).width()-30;
-        var windowheight = $(window).height()-30;
         var dialogwidth= Math.min(windowwidth, 940);
-        var dialogheight= Math.min(windowheight, 440);
 
         $('#uploader').dialog('destroy').remove(); // destroy the old modal dialog
         $('<iframe id=\"uploader\" name=\"uploader\" class=\"externalSite\" src=\"' + this.href + '\" />').dialog({
-                title: translt.title,
+                title: uploadLang.title,
                 autoOpen: true,
                 width: dialogwidth,
-                height: dialogheight,
+                height: 'auto',
+                open: function( event, ui ) {
+                    setWidthUploader();
+                },
                 modal: true,
-                resizable: true,
-                autoResize: true,
+                resizable: false,
+                autoResize: false,
                 draggable: true,
                 closeOnEscape: false,
                 beforeClose: function() {
@@ -55,12 +58,27 @@ function openUploadModalDialog(){
                     checkconditions();
                 }
             });
-            // Fix the heigth and width of the iframe
-            var horizontalPadding = 20;
-            var verticalPadding = 20 + $("#uploader").closest(".ui-dialog").children(".ui-dialog-buttonpane").outerHeight() + $("#uploader").closest(".ui-dialog").children(".ui-dialog-titlebar").outerHeight();
-            $("#uploader").width(dialogwidth - horizontalPadding).height(dialogheight - verticalPadding);
     });
 }
+$(window).resize(function() { 
+    setWidthUploader();
+
+
+    if(typeof $("iframe#uploader")[0]!=="undefined" && jQuery.isFunction($("iframe#uploader")[0].contentWindow.fixParentHeigth))
+        $("iframe#uploader")[0].contentWindow.fixParentHeigth();
+});
+/* Reset the position of the dialog (recenter) */
+function resetUploaderPosition(){
+     $( "#uploader" ).dialog( "option", "position", $( "#uploader" ).dialog( "option", "position" ) );
+}
+/* Set the with of upload madal and uploader frame according to windows width */
+function setWidthUploader(){
+    var maxwidth=Math.min($("body").innerWidth()-4, 974);
+    if(maxwidth!=$( "#uploader" ).dialog( "option", "width" )){
+        $("#uploader").dialog( "option", "width", maxwidth).width(maxwidth-18) // Leave 20px for overflow
+    }
+    resetUploaderPosition();
+}
 
 function getQueryVariable(variable, url) {
     var vars = url.split("/");
@@ -91,7 +109,7 @@ function isValueInArray(arr, val) {
     return inArray;
 }
 
-function displayUploadedFiles(jsonstring, filecount, fieldname, show_title, show_comment, pos) {
+function displayUploadedFiles(jsonstring, filecount, fieldname, show_title, show_comment) {
     var jsonobj;
     var i;
     var display = '';
@@ -102,37 +120,28 @@ function displayUploadedFiles(jsonstring, filecount, fieldname, show_title, show
     }
 
     if (jsonstring !== '')
-        {
+    {
         jsonobj = eval('(' + jsonstring + ')');
         display = '<table width="100%" class="question uploadedfiles"><thead><tr><td width="20%">&nbsp;</td>';
         if (show_title != 0)
-            display += '<th>'+translt.headTitle+'</th>';
+            display += '<th>'+uploadLang.headTitle+'</th>';
         if (show_comment != 0)
-            display += '<th>'+translt.headComment+'</th>';
-        display += '<th>'+translt.headFileName+'</th><th class="edit"></th></tr></thead><tbody>';
+            display += '<th>'+uploadLang.headComment+'</th>';
+        display += '<th>'+uploadLang.headFileName+'</th><th class="edit"></th></tr></thead><tbody>';
         var image_extensions = new Array('gif', 'jpeg', 'jpg', 'png', 'swf', 'psd', 'bmp', 'tiff', 'jp2', 'iff', 'bmp', 'xbm', 'ico');
 
         for (i = 0; i < filecount; i++)
-            {
-            if (pos)
-                {
-                if (isValueInArray(image_extensions, jsonobj[i].ext))
-                    display += '<tr><td class="upload image"><img src="' + uploadurl + '/sid/'+surveyid+'/filegetcontents/'+decodeURIComponent(jsonobj[i].filename)+'" height=100px /></td>';
-                else
-                    display += '<tr><td class="upload placeholder"><img src="'+imageurl+'/placeholder.png" height=100px /></td>';
-            }
+        {
+            if (isValueInArray(image_extensions, jsonobj[i].ext))
+                display += '<tr><td class="upload image"><img src="' + uploadurl + '/filegetcontents/'+decodeURIComponent(jsonobj[i].filename)+'" class="uploaded" /></td>';
             else
-                {
-                if (isValueInArray(image_extensions, jsonobj[i].ext))
-                    display += '<tr><td class="upload image"><img src="' + uploadurl + 'filegetcontents/'+decodeURIComponent(jsonobj[i].filename)+'" height=100px /></td>';
-                else
-                    display += '<tr><td class="upload placeholder"><img src="'+imageurl+'/placeholder.png" height=100px /></td>';
-            }
+                display += '<tr><td class="upload placeholder"><div class="upload-placeholder" /></td>';
+
             if (show_title != 0)
                 display += '<td class="upload title">'+jsonobj[i].title+'</td>';
             if (show_comment != 0)                                                                                                  
                 display += '<td class="upload comment">'+jsonobj[i].comment+'</td>';
-            display +='<td class="upload edit">'+decodeURIComponent(jsonobj[i].name)+'</td><td>'+'<img src="'+imageurl+'/edit.png" onclick="javascript:upload_'+fieldname+'();$(\'#upload_'+fieldname+'\').click();" style="cursor:pointer"></td></tr>';
+            display +='<td class="upload edit">'+decodeURIComponent(jsonobj[i].name)+'</td><td>'+'<a class="upload-edit" data-fieldname="'+fieldname+'">'+uploadLang.editFile+'</a></td></tr>';
         }
         display += '</tbody></table>';
 
diff --git a/scripts/uploader.js b/scripts/uploader.js
index 216cce96a90..327f4261a38 100644
--- a/scripts/uploader.js
+++ b/scripts/uploader.js
@@ -1,7 +1,18 @@
 $(document).ready(function(){
     doFileUpload();
+    fixParentHeigth();
 });
 
+function fixParentHeigth()
+{
+    if(window != top)
+    {
+        frameheight=Math.max($('html').outerHeight()+30,150);
+        $(parent.jQuery.find('#uploader')).css("height",frameheight+"px");
+        if(jQuery.isFunction(parent.resetUploaderPosition))
+            parent.resetUploaderPosition();
+    }
+}
 function doFileUpload(){
     var fieldname = $('#ia').val();
 
@@ -23,33 +34,40 @@ function doFileUpload(){
 
         for (i = 1; i <=  filecount; i++)
         {
-            var previewblock =  "<li id='"+fieldname+"_li_"+i+"' class='previewblock'><div>"+
-                    "<table align='center'><tr>"+
-                       "<td  align='center' width='50%' padding='20px' >";
-
+            var previewblock =  "<li id='"+fieldname+"_li_"+i+"' class='previewblock file-element'>";
+            previewblock +="<div class='file-preview'>";
             if (isValueInArray(image_extensions, json[i-1].ext.toLowerCase()))
-                previewblock += "<img src='uploader.php?filegetcontents="+json[i-1].filename+"' height='60px' />"+decodeURIComponent(json[i-1].name);
+                previewblock += "<img src='"+uploadurl+"/filegetcontents/"+json[i-1].filename+"' onload='fixParentHeigth()' class='uploaded' />";
             else
-                previewblock += "<img src='"+imageurl+"placeholder.png' height='60px' /><br />"+decodeURIComponent(json[i-1].name);
-
-            previewblock += "</td>";
-            if ($('#'+fieldname+'_show_title').val() == 1 && $('#'+fieldname+'_show_comment').val() == 1)
-                previewblock += "<td align='center'><label>"+translt.titleFld+"</label><br /><br /><label>"+translt.commentFld+"</label></td><td align='center'><input type='text' value='"+escapeHtml(json[i-1].title)+"' id='"+fieldname+"_title_"+i+"' /><br /><br /><input type='text' value='"+escapeHtml(json[i-1].comment)+"' id='"+fieldname+"_comment_"+i+"' /></td>";
-            else if ($('#'+fieldname+'_show_title').val() == 1)
-                previewblock += "<td align='center'><label>"+translt.titleFld+"</label></td><td align='center'><input type='text' value='"+escapeHtml(json[i-1].title)+"' id='"+fieldname+"_title_"+i+"' /></td>";
-            else if ($('#'+fieldname+'_show_comment').val() == 1)
-                previewblock += "<td align='center'><label>"+translt.commentFld+"</label></td><td align='center'><input type='text' value='"+escapeHtml(json[i-1].comment)+"' id='"+fieldname+"_comment_"+i+"' /></td>";
-
-            previewblock += "<td align='center' width='20%' ><img style='cursor:pointer' src='"+imageurl+"delete.png' onclick='deletefile(\""+fieldname+"\", "+i+")' /></td></tr></table>"+
-                    "<input type='hidden' id='"+fieldname+"_size_"    +i+"' value="+json[i-1].size+" />"+
+                previewblock += "<div class='upload-placeholder' />";
+            previewblock += "<span class='file-name'>"+decodeURIComponent(json[i-1].name)+"</span>";
+            previewblock += "</div>";
+            
+            if ($('#'+fieldname+'_show_title').val() == 1 || $('#'+fieldname+'_show_comment').val() == 1)
+            {
+                previewblock +="<div class='file-info'><fieldset>";
+                if($('#'+fieldname+'_show_title').val() == 1)
+                    previewblock += "<label for='"+fieldname+"_title_"+i+"'>"+uploadLang.titleFld+"</label>"+"<div class='input-container'><input type='text' value='"+escapeHtml(json[i-1].title)+"' id='"+fieldname+"_title_"+i+"' /></div>";
+                if($('#'+fieldname+'_show_comment').val() == 1)
+                    previewblock += "<label for='"+fieldname+"_comment_"+i+"'>"+uploadLang.commentFld+"</label>"+"<div class='input-container'><input type='text' value='"+escapeHtml(json[i-1].comment)+"' id='"+fieldname+"_comment_"+i+"' /></div>";
+                previewblock += "</fieldset></div>";
+            }
+
+            previewblock +="<div class='file-tool'>";
+            previewblock += "<a class='delete-file' onclick='deletefile(\""+fieldname+"\", "+i+")'>"+uploadLang.deletefile+"</a>";
+            previewblock += "</div>";
+
+            previewblock += "<input type='hidden' id='"+fieldname+"_size_"    +i+"' value="+json[i-1].size+" />"+
                     "<input type='hidden' id='"+fieldname+"_name_"    +i+"' value="+json[i-1].name+" />"+
                     "<input type='hidden' id='"+fieldname+"_file_index_"+i+"' value="+i+" />"+
                     "<input type='hidden' id='"+fieldname+"_filename_"+i+"' value="+json[i-1].filename+" />"+
-                    "<input type='hidden' id='"+fieldname+"_ext_"     +i+"' value="+json[i-1].ext+"  />"+
-                    "</div></li>";
+                    "<input type='hidden' id='"+fieldname+"_ext_"     +i+"' value="+json[i-1].ext+"  />";
+
+            previewblock += "</li>";
 
             // add file to the list
             $('#field'+fieldname+'_listfiles').append(previewblock);
+            fixParentHeigth();
         }
     }
 
@@ -77,7 +95,8 @@ function doFileUpload(){
              * do not upload the file and display an error message ! */
             if (filecount >= maxfiles)
             {
-                $('#notice').html('<p class="error">'+translt.errorNoMoreFiles+'</p>');
+                $('#notice').html('<p class="error">'+uploadLang.errorNoMoreFiles+'</p>');
+                fixParentHeigth();
                 return false;
             }
 
@@ -96,12 +115,13 @@ function doFileUpload(){
             }
             if (allowSubmit == false)
             {
-                $('#notice').html('<p class="error">'+translt.errorOnlyAllowed.replace('%s',$('#'+fieldname+'_allowed_filetypes').val())+'</p>');
+                $('#notice').html('<p class="error">'+uploadLang.errorOnlyAllowed.replace('%s',$('#'+fieldname+'_allowed_filetypes').val())+'</p>');
+                fixParentHeigth();
                 return false;
             }
 
             // change button text, when user selects file
-            button.text(translt.uploading);
+            button.text(uploadLang.uploading);
 
             // If you want to allow uploading only 1 file at time,
             // you can disable upload button
@@ -113,12 +133,12 @@ function doFileUpload(){
                 if (text.length < 13){
                     button.text(text + '.');
                 } else {
-                    button.text(translt.uploading);
+                    button.text(uploadLang.uploading);
                 }
             }, 400);
         },
         onComplete: function(file, response){
-            button.text(translt.selectfile);
+            button.text(uploadLang.selectfile);
             window.clearInterval(interval);
             // enable upload button
             this.enable();
@@ -139,32 +159,37 @@ function doFileUpload(){
                 if( $('#field'+fieldname+'_listfiles').length==0){
                     $("<ul id='field"+fieldname+"_listfiles' class='files-list' />").insertAfter("#uploadstatus");
                 }
-                var previewblock =  "<li id='"+fieldname+"_li_"+count+"' class='previewblock'><div>"+
-                                        "<table align='center'><tr>"+
-                                            "<td  align='center' width='50%'>";
+                var previewblock =  "<li id='"+fieldname+"_li_"+count+"' class='previewblock file-element'>";
 
-                // If the file is not an image, use a placeholder
+                previewblock +="<div class='file-preview'>";
                 if (isValueInArray(image_extensions, metadata.ext.toLowerCase()))
-                    previewblock += "<img src='"+uploadurl+"/filegetcontents/"+decodeURIComponent(metadata.filename)+"' height='60px' />";
+                    previewblock += "<img src='"+uploadurl+"/filegetcontents/"+decodeURIComponent(metadata.filename)+"' onload='fixParentHeigth()' class='uploaded' />";
                 else
-                    previewblock += "<img src='"+imageurl+"placeholder.png' height='60px' />";
-
-                previewblock += "<br />"+decodeURIComponent(metadata.name)+"</td>";
-                if ($("#"+fieldname+"_show_title").val() == 1 && $("#"+fieldname+"_show_comment").val() == 1)
-                    previewblock += "<td align='center'><label>"+translt.titleFld+"</label><br /><br /><label>"+translt.commentFld+"</label></td><td align='center'><input type='text' value='' id='"+fieldname+"_title_"+count+"' /><br /><br /><input type='text' value='' id='"+fieldname+"_comment_"+count+"' /></td>";
-                else if ($("#"+fieldname+"_show_title").val() == 1)
-                    previewblock += "<td align='center'><label>"+translt.titleFld+"</label></td><td align='center'><input type='text' value='' id='"+fieldname+"_title_"+count+"' /></td>";
-                else if ($("#"+fieldname+"_show_comment").val() == 1)
-                    previewblock += "<td align='center'><label>"+translt.commentFld+"</label></td><td align='center'><input type='text' value='' id='"+fieldname+"_comment_"+count+"' /></td>";
-
-                previewblock += "<td  align='center' width='20%'><img style='cursor:pointer' src='"+imageurl+"delete.png' onclick='deletefile(\""+fieldname+"\", "+count+")'/></td>"+
-                                        "</tr></table>"+
-                                        "<input type='hidden' id='"+fieldname+"_size_"+count+"' value="+metadata.size+" />"+
-                                        "<input type='hidden' id='"+fieldname+"_file_index_"+count+"' value="+metadata.file_index+" />"+
-                                        "<input type='hidden' id='"+fieldname+"_name_"+count+"' value="+metadata.name+" />"+
-                                        "<input type='hidden' id='"+fieldname+"_filename_"+count+"' value="+metadata.filename+" />"+
-                                        "<input type='hidden' id='"+fieldname+"_ext_" +count+"' value="+metadata.ext+"  />"+
-                                    "</div></li>";
+                    previewblock += "<div class='upload-placeholder' />";
+                previewblock += "<span class='file-name'>"+decodeURIComponent(metadata.name)+"<span>";
+                previewblock += "</div>";
+
+                if ($('#'+fieldname+'_show_title').val() == 1 || $('#'+fieldname+'_show_comment').val() == 1)
+                {
+                    previewblock +="<div class='file-info'><fieldset>";
+                    if($('#'+fieldname+'_show_title').val() == 1)
+                        previewblock += "<label for='"+fieldname+"_title_"+count+"'>"+uploadLang.titleFld+"</label>"+"<div class='input-container'><input type='text' value='' id='"+fieldname+"_title_"+count+"' /></div>";
+                    if($('#'+fieldname+'_show_comment').val() == 1)
+                        previewblock += "<label for='"+fieldname+"_comment_"+count+"'>"+uploadLang.commentFld+"</label>"+"<div class='input-container'><input type='text' value='' id='"+fieldname+"_comment_"+count+"' /></div>";
+                    previewblock += "</fieldset></div>";
+                }
+
+                previewblock +="<div class='file-tool'>";
+                previewblock += "<a class='delete-file' onclick='deletefile(\""+fieldname+"\", "+count+")'>"+uploadLang.deletefile+"</a>";
+                previewblock += "</div>";
+
+                previewblock += "<input type='hidden' id='"+fieldname+"_size_"+count+"' value="+metadata.size+" />"+
+                                "<input type='hidden' id='"+fieldname+"_file_index_"+count+"' value="+metadata.file_index+" />"+
+                                "<input type='hidden' id='"+fieldname+"_name_"+count+"' value="+metadata.name+" />"+
+                                "<input type='hidden' id='"+fieldname+"_filename_"+count+"' value="+metadata.filename+" />"+
+                                "<input type='hidden' id='"+fieldname+"_ext_" +count+"' value="+metadata.ext+"  />";
+
+                previewblock += "</li>";
 
                 // add file to the list
                 $('#field'+fieldname+'_listfiles').prepend(previewblock);
@@ -175,19 +200,22 @@ function doFileUpload(){
                 $('#'+fieldname+'_filecount').val(filecount);
 
                 if (filecount < minfiles)
-                    $('#uploadstatus').html(translt.errorNeedMore.replace('%s',(minfiles - filecount)));
+                    $('#uploadstatus').html(uploadLang.errorNeedMore.replace('%s',(minfiles - filecount)));
                 else if (filecount < maxfiles)
-                    $('#uploadstatus').html(translt.errorMoreAllowed.replace('%s',(maxfiles - filecount)));
+                    $('#uploadstatus').html(uploadLang.errorMoreAllowed.replace('%s',(maxfiles - filecount)));
                 else
-                    $('#uploadstatus').html(translt.errorMaxReached);
+                    $('#uploadstatus').html(uploadLang.errorMaxReached);
 
                 if (filecount >= maxfiles)
-                    $('#notice').html('<p class="success">'+translt.errorTooMuch+'</p>');
+                    $('#notice').html('<p class="success">'+uploadLang.errorTooMuch+'</p>');
+                fixParentHeigth();
             }
             else
             {
                 $('#notice').html('<p class="error">'+metadata.msg+'</p>');
+                fixParentHeigth();
             }
+            
         }
     });
 
@@ -241,7 +269,7 @@ function saveAndExit(fieldname, show_title, show_comment, pos) {
 
     if (minfiles != 0 && filecount < minfiles && showpopups)
     {
-        var confirmans = confirm(translt.errorNeedMoreConfirm.replace('%s', (minfiles - filecount)))
+        var confirmans = confirm(uploadLang.errorNeedMoreConfirm.replace('%s', (minfiles - filecount)))
         if (confirmans)
         {
             passJSON(fieldname, show_title, show_comment, pos);
@@ -260,53 +288,51 @@ function saveAndExit(fieldname, show_title, show_comment, pos) {
 function deletefile(fieldname, count) {
 
     var file_index;
-    var xmlhttp;
-    if (window.XMLHttpRequest)
-        xmlhttp=new XMLHttpRequest();
-    else
-        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
+    var filename=$("#"+fieldname+"_filename_"+count).val();
+    var name=$("#"+fieldname+"_name_"+count).val();
 
     var filecount = parseInt($('#'+fieldname+'_filecount').val());
     var licount   = parseInt($('#'+fieldname+'_licount').val());
-
-    xmlhttp.onreadystatechange=function()
+    
+    $.ajax(
+    {
+        method: "POST",
+        url: uploadurl,
+        data: { 
+            'delete': 1, 
+            'fieldname': fieldname,
+            'filename' : filename,
+            'name' : name,
+            YII_CSRF_TOKEN : csrfToken
+            }
+    })
+    .done(function( msg )
     {
-        if (xmlhttp.readyState==4 && xmlhttp.status==200)
+        $('#notice').html('<p class="success">'+msg+'</p>');
+        setTimeout(function() {
+            $(".success").remove();
+        }, 5000);
+        $("#"+fieldname+"_li_"+count).hide();
+        filecount--;
+        $('#'+fieldname+'_filecount').val(filecount);
+        file_index = $("#"+fieldname+"_file_index_"+count).val();
+        for (j = count; j <= licount; j++)
         {
-            $('#notice').html('<p class="success">'+xmlhttp.responseText+'</p>');
-            setTimeout(function() {
-                $(".success").remove();
-            }, 5000);
-
-            $("#"+fieldname+"_li_"+count).hide();
-            filecount--;
-            $('#'+fieldname+'_filecount').val(filecount);
-
-            // rearrange the file indexes
-            // i.e move the files below i to one step up
-
-            file_index = $("#"+fieldname+"_file_index_"+count).val();
-            for (j = count; j <= licount; j++)
+            if ($('#'+fieldname+'_li_'+j).is(":visible"))
             {
-                if ($('#'+fieldname+'_li_'+j).is(":visible"))
-                {
-                    $('#'+fieldname+'_file_index_'+j).val(file_index);
-                    file_index++;
-                }
+                $('#'+fieldname+'_file_index_'+j).val(file_index);
+                file_index++;
             }
-            var minfiles = parseInt($('#'+fieldname+'_minfiles').val());
-            var maxfiles = parseInt($('#'+fieldname+'_maxfiles').val());
-
-            if (filecount < minfiles)
-                $('#uploadstatus').html(translt.errorNeedMore.replace('%s',(minfiles - filecount)));
-            else
-                $('#uploadstatus').html(translt.errorMoreAllowed.replace('%s',(maxfiles - filecount)));
         }
-    }
-    filename=$("#"+fieldname+"_filename_"+count).val();
-    name=$("#"+fieldname+"_name_"+count).val();
-    xmlhttp.open('GET',uploadurl+'/delete/1/fieldname/'+fieldname+'/filename/'+filename+'/name/'+encodeURI(name), true);
-    xmlhttp.send();
+        var minfiles = parseInt($('#'+fieldname+'_minfiles').val());
+        var maxfiles = parseInt($('#'+fieldname+'_maxfiles').val());
+
+        if (filecount < minfiles)
+            $('#uploadstatus').html(uploadLang.errorNeedMore.replace('%s',(minfiles - filecount)));
+        else
+            $('#uploadstatus').html(uploadLang.errorMoreAllowed.replace('%s',(maxfiles - filecount)));
+        fixParentHeigth();
+    });
 }
 
 
diff --git a/images/delete.png b/styles-public/img/upload-delete.png
similarity index 100%
rename from images/delete.png
rename to styles-public/img/upload-delete.png
diff --git a/images/edit.png b/styles-public/img/upload-edit.png
similarity index 100%
rename from images/edit.png
rename to styles-public/img/upload-edit.png
diff --git a/images/error_notice.png b/styles-public/img/upload-error.png
similarity index 100%
rename from images/error_notice.png
rename to styles-public/img/upload-error.png
diff --git a/images/placeholder.png b/styles-public/img/upload-placeholder.png
similarity index 100%
rename from images/placeholder.png
rename to styles-public/img/upload-placeholder.png
diff --git a/images/success_notice.png b/styles-public/img/upload-success.png
similarity index 100%
rename from images/success_notice.png
rename to styles-public/img/upload-success.png
diff --git a/styles-public/uploader-files.css b/styles-public/uploader-files.css
new file mode 100644
index 00000000000..78bcbebc931
--- /dev/null
+++ b/styles-public/uploader-files.css
@@ -0,0 +1,44 @@
+
+img.uploaded{
+display:block;
+margin:5px auto;
+max-width:96%;
+* width:100%;
+height:auto;
+max-height:100px;
+}
+
+
+.delete-file{
+cursor:pointer;
+margin:0 auto;
+display:block;
+width:35px;
+height:35px;
+overflow:hidden;
+text-indent: 40px;
+background:url("img/upload-delete.png") 50% 50% no-repeat;
+border: 0 none;
+}
+.upload-placeholder
+{
+display:block;
+margin:0 auto;
+width:60px;
+height:70px;
+overflow:hidden;
+text-indent: 70px;
+background:url("img/upload-placeholder.png") 50% 50% no-repeat;
+}
+.upload-edit
+{
+cursor:pointer;
+display:block;
+width:35px;
+height:35px;
+overflow:hidden;
+text-indent: 40px;
+background:url("img/upload-edit.png") 50% 50% no-repeat;
+border: 0 none;
+}
+
diff --git a/styles-public/uploader.css b/styles-public/uploader.css
index 7808a3344f5..9541a919bc2 100644
--- a/styles-public/uploader.css
+++ b/styles-public/uploader.css
@@ -5,19 +5,60 @@ a:hover, a.hover {color: #C7D92C;}
 ul { list-style: none; }
 #dialog-confirm { padding: 0 20px; float: left; width: 750px; }
 
-.previewblock {
-    background-color: #99CCFF;
-    margin: 10px auto;
-    padding: 5px 20px;
+/* Using display:table and hack for IE6/7 */
+.files-list{display:table;table-layout:fixed;width:100%;list-style:none}
+.file-element{display:table-row;width:100%;padding:0.5em 0;}
+.file-preview,.file-info,.file-tool{
+display:table-cell;vertical-align:middle;
+* float:left 
 }
+.file-preview{width:50%;text-align:center;min-height:80px;}
+.file-info{
+text-align:left;
+* width:40%
+}
+.file-tool{width:50px;text-align:center}
 
-img {
-    display: block;
-    margin: 5px;
-    border: 0 none;
-    border-style: solid;
+@media handled,screen and (max-width: 479px) {
+    .files-list{
+    display:block;
+    }
+    .file-element{
+    display:block;
+    }
+    .file-preview,.file-info,.file-tool{
+    width:100%;
+    display:block;
+    }
 }
 
+
+
+.file-info label{
+    float:left;
+    clear:left;
+    display:block;
+    width:12em;
+    padding:0 1em;
+    line-height:1.5;
+    text-align:right;
+}
+
+.file-info .input-container{
+    display:block;
+    margin-left:13em;
+}
+@media only screen and (max-width: 767px) {
+    .file-info label{
+    display:bloc;
+    float:none;
+    width:auto;
+    text-align:left;
+    }
+    .file-info .input-container{
+        margin-left:0;
+    }
+}
 .upload-div{
     text-align: center;
 }
@@ -43,26 +84,27 @@ img {
     margin: 0.5em 0.4em 0.5em 0;
     overflow: visible;
     padding: 0.6em 0.6em 0.6em 0.6em;
-    min-width: 100px;
+    min-width: 10em;
     text-align: center;
 }
 
-.success, .error {
+#notice .success,#notice  .error {
     border: 1px solid;
-    margin: 15px 200px 20px 200px;
-    padding:15px 60px 15px 60px;
+    margin: 1.3em auto 1.5em auto;
+    padding:1.3em 60px;
     background-repeat: no-repeat;
     background-position: 20px center;
+    max-width:40em;
 }
 
-.success {
+#notice .success {
     color: #4F8A10;
     background-color: #DFF2BF;
-    background-image:url('../images/success_notice.png');
+    background-image:url('img/upload-success.png');
 }
 
-.error {
+#notice .error {
     color: #D8000C;
     background-color: #FFBABA;
-    background-image: url('../images/error_notice.png');
+    background-image: url('img/upload-error.png');
 }