[TASK] Improve usability of Filelist "Drag-Upload" 64/27064/7
authorFrans Saris <frans@beech.it>
Sun, 26 Jan 2014 21:00:39 +0000 (22:00 +0100)
committerBenjamin Mack <benni@typo3.org>
Fri, 31 Jan 2014 20:20:44 +0000 (21:20 +0100)
We now can drag & drop files in the file list to upload.
But it looks ugly and has some issues.

This change adds a progress overview as provided by the
UX team and improves the usability.
The progress is shown for files added by drag & drop but
also when you use the file picker.

We switched to the jQuery ajax function as this has
a generic event and response handler.

Resolves: #51361, #53829
Release: 6.2
Change-Id: Ifd7b189f84594149b9590bbd4058ad68e4439344
Reviewed-on: https://review.typo3.org/27064
Reviewed-by: Anja Leichsenring
Tested-by: Anja Leichsenring
Reviewed-by: Stefan Froemken
Tested-by: Stefan Froemken
Reviewed-by: Benjamin Mack
Tested-by: Benjamin Mack
typo3/sysext/backend/Classes/Controller/File/FileController.php
typo3/sysext/backend/Resources/Public/JavaScript/DragUploader.js
typo3/sysext/filelist/Classes/FileList.php
typo3/sysext/lang/locallang_core.xlf
typo3/sysext/t3skin/Resources/Public/Css/visual/module_file_list.css

index fe8704e..e2aee15 100644 (file)
@@ -29,6 +29,7 @@ namespace TYPO3\CMS\Backend\Controller\File;
  ***************************************************************/
 
 use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Backend\Utility\BackendUtility;
 
 /**
  * Gateway for TCE (TYPO3 Core Engine) file-handling through POST forms.
@@ -144,7 +145,7 @@ class FileController {
        public function finish() {
                // Push errors to flash message queue, if there are any
                $this->fileProcessor->pushErrorMessagesToFlashMessageQueue();
-               \TYPO3\CMS\Backend\Utility\BackendUtility::setUpdateSignal('updateFolderTree');
+               BackendUtility::setUpdateSignal('updateFolderTree');
                if ($this->redirect) {
                        \TYPO3\CMS\Core\Utility\HttpUtility::redirect($this->redirect);
                }
@@ -172,7 +173,13 @@ class FileController {
                                foreach ($result as $files) {
                                        /** @var $file \TYPO3\CMS\Core\Resource\File */
                                        foreach ($files as $file) {
-                                               $fileData[$action][] = $file->toArray();
+                                               $fileData[$action][] = array_merge(
+                                                       $file->toArray(),
+                                                       array (
+                                                               'date' => BackendUtility::date($file->getModificationTime()),
+                                                               'iconClasses' => \TYPO3\CMS\Backend\Utility\IconUtility::mapFileExtensionToSpriteIconClass($file->getExtension()),
+                                                       )
+                                               );
                                        }
                                }
                        }
index 1f8a6c0..cfb6769 100644 (file)
@@ -29,10 +29,12 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery'], function($) {
                var me = this;
 
                me.$body = $('body');
-               me.$element = $('<div />').addClass('DragUpload-DropZone t3-dropzone').appendTo(me.$body);
-               me.$progress = $('<div />').addClass('DragUpload-ProgressInformation').hide().appendTo(me.$body);
-               me.uploadCompletedCount = 0;
-               me.fileQueue = [];
+               me.$dragMask = $('<div />').addClass('t3-body-drag-mask').appendTo(me.$body);
+               me.$dropzone = $('<div />').addClass('t3-dropzone').hide().insertAfter('#typo3-inner-docbody h1:first');
+               me.$dropzoneMask = $('<div />').addClass('t3-dropzone-mask').appendTo(me.$dropzone);
+               me.$fileInput = $('<input type="file" multiple name="files[]" />').addClass('t3-upload-file-picker').appendTo(me.$body);
+               me.$fileList = $('#typo3-filelist');
+               me.fileListColumnCount = $('thead tr:first td', me.$fileList).length;
 
                me.fileDenyPattern = new RegExp($('[data-file-deny-pattern]').attr('data-file-deny-pattern'), 'i');
                me.maxFileSize = parseInt($('[data-max-file-size]').attr('data-max-file-size'));
@@ -45,150 +47,245 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery'], function($) {
                        Progress: "upload" in new XMLHttpRequest
                };
 
+               me.showDropzone = function() {
+                       me.$dropzone.show();
+               };
+
+               me.hideDropzone = function(event) {
+                       event.stopPropagation();
+                       event.preventDefault();
+                       me.$dropzone.hide();
+               }
+
                me.dragFileIntoDocument = function(event) {
-                       event.preventDefault && event.preventDefault();
-                       event.dataTransfer.dropEffect = 'copy';
-                       me.$body.addClass('dropInProgess');
-                       me.$element.html(TYPO3.l10n.localize('file_upload.dropzonehint'));
+                       event.stopPropagation();
+                       event.preventDefault();
+                       me.$body.addClass('t3-drop-in-progress');
+                       me.showDropzone();
                        return false;
                };
 
                me.dragAborted = function(event) {
-                       event.preventDefault && event.preventDefault();
-                       me.$body.removeClass('dropInProgess');
+                       event.stopPropagation();
+                       event.preventDefault();
+                       me.$body.removeClass('t3-drop-in-progress');
                        return false;
                };
 
                me.ignoreDrop = function(event) {
-                       if (event.stopPropagation) {
-                               event.stopPropagation(); // stops the browser from redirecting.
-                       }
+                       // stops the browser from redirecting.
+                       event.stopPropagation();
+                       event.preventDefault();
                        me.dragAborted(event);
                        return false;
                };
 
-               me.updateProgress = function() {
-                       var fileCount = me.fileQueue.length;
-                       if (fileCount > 0 && fileCount === me.uploadCompletedCount) {;
-                               me.$progress.html('<p><strong>' + TYPO3.l10n.localize('file_upload.upload-finished') + '</strong></p>').show();
-                               window.location.reload();
-                       } else {
-                               me.$progress.html(
-                                       '<p><strong>' + TYPO3.l10n.localize('file_upload.upload-in-progress') + '</strong></p>' +
-                                       '<p>' + TYPO3.l10n.localize('file_upload.upload-progress-info').replace(/\{0\}/g, me.uploadCompletedCount).replace(/\{1\}/g, fileCount) + '</p>'
-                               ).show();
-                       }
-               };
-
                me.handleDrop = function (event) {
-
-                       if (event.stopPropagation) {
-                               event.stopPropagation(); // stops the browser from redirecting.
-                       }
                        me.ignoreDrop(event);
+                       me.processFiles(event.originalEvent.dataTransfer.files);
+                       me.$dropzone.removeClass('t3-dropzone-drop-ok');
+               };
+
+               me.processFiles = function (files) {
 
                        // ask user if we should override files
                        var override = confirm(TYPO3.l10n.localize('file_upload.overwriteExistingFiles'));
 
-                       // Add each file to queue and trigger upload
-                       $.each(event.dataTransfer.files, function(i, file) {
-
-                               // check filesize, fileextension
-                               if (file.size > me.maxFileSize) {
-                                       TYPO3.Flashmessage.display(
-                                               TYPO3.Severity.error,
-                                               'Error',
-                                               TYPO3.l10n.localize('file_upload.maxFilesizeExceeded').replace(/\{0\}/g, file.name).replace(/\{1\}/g, me.maxFileSize)
-                                       );
-                               // check filename/extension
-                               } else if (file.name.match(me.fileDenyPattern)) {
-                                       TYPO3.Flashmessage.display(
-                                               TYPO3.Severity.error,
-                                               'Error',
-                                               TYPO3.l10n.localize('file_upload.fileNotAllowwed').replace(/\{0\}/g, file.name)
-                                       );
-                               } else {
-
-                                       var formData = new FormData();
-                                       formData.append('file[upload][1][target]', me.target);
-                                       formData.append('file[upload][1][data]', '1');
-                                       if(override) {
-                                               formData.append('overwriteExistingFiles', '1');
-                                       }
-                                       formData.append('redirect', '');
-                                       formData.append('upload_1[]', file);
-
-                                       // now post a new XHR request
-                                       var xhr = new XMLHttpRequest();
-                                       xhr.open('POST', 'tce_file.php');
-
-                                       xhr.onload = function () {
-                                               me.uploadCompletedCount++;
-                                               me.updateProgress();
-                                       };
-                                       xhr.onerror = function() {
-                                               TYPO3.Flashmessage.display(
-                                                       TYPO3.Severity.error,
-                                                       'Error',
-                                                       TYPO3.l10n.localize('file_upload.uploadFailed').replace(/\{0\}/g, file.name)
-                                               );
-                                               me.uploadCompletedCount++;
-                                               me.updateProgress();
-                                       };
-                                       xhr.onprogress = function(progressEvent) {
-                                               me.updateProgress();
-                                       };
-                                       me.fileQueue.push(file);
-                                       me.updateProgress();
-
-                                       // start upload
-                                       xhr.send(formData);
-                               }
+                       // Add each file to queue and start upload
+                       $.each(files, function(i, file) {
+                               new FileQueueItem(me, file, override);
                        });
-                       me.$element.removeClass('t3-dropzone-dropReceiveOK');
-                       return false;
                };
 
                me.fileInDropzone = function(event) {
-                       me.$element.addClass('t3-dropzone-dropReceiveOK');
+                       me.$dropzone.addClass('t3-dropzone-drop-ok');
                };
 
                me.fileOutOfDropzone = function(event) {
-                       me.$element.removeClass('t3-dropzone-dropReceiveOK');
+                       me.$dropzone.removeClass('t3-dropzone-drop-ok');
                };
 
                if (me.browserCapabilities.DnD) {
-                       var doc = document.documentElement;
-                       me.$body.get(0).ondragover = me.dragFileIntoDocument;
-
-                       me.$body.get(0).ondragend = me.dragAborted;
-                       me.$body.get(0).ondrop = me.ignoreDrop;
-
-                       me.$body.get(0).ondragenter = me.fileInDropzone;
-                       me.$body.get(0).ondragleave = me.dragAborted;
-                       me.$body.get(0).ondrop = me.handleDrop;
-
-                       // if upload button is present, remove it
-                       var $uploadButton = $('#button-upload');
-                       me.flashMessageShown = false;
-                       if ($uploadButton.length > 0) {
-                               $uploadButton.click(function(event) {
-                                       if (!me.flashMessageShown) {
-                                               event.preventDefault();
-                                               TYPO3.Flashmessage.display(
-                                                       TYPO3.Severity.information,
-                                                       TYPO3.l10n.localize('file_upload.draginformation.title'),
-                                                       TYPO3.l10n.localize('file_upload.draginformation.message')
-                                               );
-                                               me.flashMessageShown = true;
-                                               return false;
-                                       }
-                               });
+                       me.$body.on('dragover', me.dragFileIntoDocument);
+                       me.$body.on('dragend', me.dragAborted);
+                       me.$body.on('drop', me.ignoreDrop);
+
+                       me.$dropzone.on('dragenter', me.fileInDropzone);
+                       me.$dropzoneMask.on('dragenter', me.fileInDropzone);
+                       me.$dropzoneMask.on('dragleave', me.fileOutOfDropzone);
+                       me.$dropzoneMask.on('drop', me.handleDrop);
+
+                       me.$dropzone.prepend('<h4>'+TYPO3.l10n.localize('file_upload.dropzonehint.title')+'</h4><p>'+TYPO3.l10n.localize('file_upload.dropzonehint.message')+'</p>')
+                               .click(function(){me.$fileInput.click()});
+                       $('<span />').addClass('t3-icon t3-icon-actions t3-icon-actions-close t3-dropzone-close').html('&nbsp;').click(me.hideDropzone).appendTo(me.$dropzone);
+
+                       me.$fileInput.on('change', function() {
+                               me.processFiles(this.files);
+                       });
+
+                       // bind file picker to default upload button
+                       $('#button-upload').click(function(event) {
+                               event.preventDefault();
+                               me.$fileInput.click();
+                               me.showDropzone();
+                       });
+               }
+       };
+
+       var FileQueueItem = function(dragUploader, file, override) {
+               var me = this;
+               me.dragUploader = dragUploader;
+               me.file = file;
+               me.override = override;
+
+               me.$row = $('<tr />').addClass('file_list_normal t3-upload-queue-item uploading');
+               me.$iconCol = $('<td />').addClass('col-icon').appendTo(me.$row);
+               me.$fileName = $('<td />').text(file.name).appendTo(me.$row);
+               me.$progress = $('<td />').addClass('t3-upload-queue-progress')
+                                                                 .attr('colspan', me.dragUploader.fileListColumnCount-2).appendTo(me.$row);
+               me.$progressContainer = $('<div />').addClass('t3-upload-queue-progress').appendTo(me.$progress);
+               me.$progressBar = $('<div />').addClass('t3-upload-queue-progress-bar').appendTo(me.$progressContainer);
+               me.$progressPercentage = $('<span />').addClass('t3-upload-queue-progress-percentage').appendTo(me.$progressContainer);
+               me.$progressMessage = $('<span />').addClass('t3-upload-queue-progress-message').appendTo(me.$progressContainer);
+
+               me.updateMessage = function(message) {
+                       me.$progressMessage.text(message);
+               };
+
+               me.removeProgress = function() {
+                       if (me.$progress) {
+                               me.$progress.remove();
                        }
+               };
+
+               me.uploadStart = function() {
+                       me.$progressPercentage.text('(0%)');
+                       me.$progressBar.width('1%');
+               };
+
+               me.uploadError = function(response) {
+                       me.updateMessage(TYPO3.l10n.localize('file_upload.uploadFailed').replace(/\{0\}/g, me.file.name));
+                       var error = $(response.responseText);
+                       if (error.is('t3err')) {
+                               me.$progressPercentage.text(error.text());
+                       } else {
+                               me.$progressPercentage.text('(' + response.statusText + ')');
+                       }
+                       me.$row.addClass('error');
+               };
+
+               me.updateProgress = function(event) {
+                       var percentage = Math.round((event.loaded / event.total) * 100) + '%'
+                       me.$progressBar.width(percentage);
+                       me.$progressPercentage.text(percentage);
+               };
+
+               me.uploadComplete = function(data) {
+                       if (data.result.upload) {
+                               me.$row.removeClass('uploading');
+                               me.$fileName.text(data.result.upload[0].name);
+                               me.$progressPercentage.text('');
+                               me.$progressMessage.text('100%');
+                               me.$progressBar.width('100%');
+
+                               // replace file icon
+                               if (data.result.upload[0].iconClasses) {
+                                       me.$iconCol.html('<span class="' + data.result.upload[0].iconClasses + '">&nbsp;</span>');
+                               }
+                               setTimeout(function() {me.showFileInfo(data.result.upload[0])}, 3000);
+                       }
+               };
+
+               me.showFileInfo = function(fileInfo) {
+                       me.removeProgress();
+                       // add spacing cells when clibboard and/or extended view is enabled
+                       for (i = 7; i < me.dragUploader.fileListColumnCount; i++) {
+                               $('<td />').text('').appendTo(me.$row);
+                       }
+                       $('<td />').text(fileInfo.extension.toUpperCase()).appendTo(me.$row);
+                       $('<td />').text(fileInfo.date).appendTo(me.$row);
+                       $('<td />').text(me.fileSizeAsString(fileInfo.size)).appendTo(me.$row);
+                       var permissions = '';
+                       if (fileInfo.permissions.read) {
+                               permissions += '<span class="typo3-red"><strong>R</strong></span>';
+                       }
+                       if (fileInfo.permissions.write) {
+                               permissions += '<span class="typo3-red"><strong>W</strong></span>';
+                       }
+                       $('<td />').html(permissions).appendTo(me.$row);
+                       $('<td />').text('-').appendTo(me.$row);
+               };
+
+               me.fileSizeAsString = function(size) {
+                       var string = "";
+                       var sizeKB = size / 1024;
+                       if (parseInt(sizeKB) > 1024) {
+                               var sizeMB = sizeKB / 1024;
+                               string = sizeMB.toFixed(1) + " MB";
+                       } else {
+                               string = sizeKB.toFixed(1) + " KB";
+                       }
+                       return string;
+               };
+
+               // position queue item in file list
+               if ($('tbody tr.t3-upload-queue-item', me.dragUploader.$fileList).length === 0) {
+                       me.$row.prependTo($('tbody', me.dragUploader.$fileList));
+                       me.$row.addClass('last');
+               } else {
+                       me.$row.insertBefore($('tbody tr.t3-upload-queue-item:first', me.dragUploader.$fileList));
                }
 
+               // set dummy file icon
+               me.$iconCol.html('<span class="t3-icon t3-icon-mimetypes t3-icon-other-other">&nbsp;</span>')
+
+               // check file size
+               if (me.file.size > me.dragUploader.maxFileSize) {
+                       me.updateMessage(TYPO3.l10n.localize('file_upload.maxFileSizeExceeded')
+                         .replace(/\{0\}/g, me.file.name)
+                         .replace(/\{1\}/g, me.fileSizeAsString(me.dragUploader.maxFileSize)));
+                       me.$row.addClass('error');
+
+               // check filename/extension
+               } else if (me.file.name.match(me.dragUploader.fileDenyPattern)) {
+                       me.updateMessage(TYPO3.l10n.localize('file_upload.fileNotAllowed').replace(/\{0\}/g, me.file.name));
+                       me.$row.addClass('error');
+
+               } else {
+                       me.updateMessage('- ' + me.fileSizeAsString(me.file.size));
+
+                       var formData = new FormData();
+                       formData.append('file[upload][1][target]', me.dragUploader.target);
+                       formData.append('file[upload][1][data]', '1');
+                       if(me.override) {
+                               formData.append('overwriteExistingFiles', '1');
+                       }
+                       formData.append('ajaxID', 'TYPO3_tcefile::process');
+                       formData.append('redirect', '');
+                       formData.append('upload_1', me.file);
+
+                       var s = $.extend(true, {}, $.ajaxSettings, {
+                               url: 'ajax.php',
+                               contentType: false,
+                               processData: false,
+                               data: formData,
+                               cache: false,
+                               type: 'POST',
+                               success: me.uploadComplete,
+                               error: me.uploadError
+                       });
 
-       };
+                       s.xhr = function() {
+                               var xhr = $.ajaxSettings.xhr();
+                               xhr.upload.addEventListener('progress', me.updateProgress);
+                               return xhr;
+                       };
+
+                       // start upload
+                       me.upload = $.ajax(s);
+               }
+
+       }
 
        /**
         * part 2: The main module of this file
@@ -247,4 +344,5 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery'], function($) {
 
        // call the main initialize function and execute the hooks
        return initialize();
+
 });
\ No newline at end of file
index bcd2592..5df385b 100644 (file)
@@ -346,12 +346,6 @@ class FileList extends \TYPO3\CMS\Backend\RecordList\AbstractRecordList {
 
                        // Directories are added
                        $iOut = $this->formatDirList($folderObjects);
-                       if ($iOut) {
-                               // Half line is drawn
-                               $theData = array(
-                                       $titleCol => ''
-                               );
-                       }
                        // Files are added
                        $iOut .= $this->formatFileList($files, $titleCol);
                        // Header line is drawn
@@ -378,19 +372,18 @@ class FileList extends \TYPO3\CMS\Backend\RecordList\AbstractRecordList {
                                }
                        }
 
-                       if (!empty($iOut)) {
-                               $out .= '<thead>' . $this->addelement(1, '&nbsp;', $theData, ' class="t3-row-header"', '') . '</thead>';
-                               $out .= '<tbody>' . $iOut . '</tbody>';
-                               // half line is drawn
-                               // finish
-                               $out = '
+                       $out .= '<thead>' . $this->addelement(1, '&nbsp;', $theData, ' class="t3-row-header"', '') . '</thead>';
+                       $out .= '<tbody>' . $iOut . '</tbody>';
+                       // half line is drawn
+                       // finish
+                       $out = '
                <!--
                        File list table:
                -->
                        <table cellpadding="0" cellspacing="0" id="typo3-filelist">
                                ' . $out . '
                        </table>';
-                       }
+
                } else {
                        /** @var $flashMessage \TYPO3\CMS\Core\Messaging\FlashMessage */
                        $flashMessage = GeneralUtility::makeInstance('TYPO3\\CMS\\Core\\Messaging\\FlashMessage', $GLOBALS['LANG']->getLL('storageNotBrowsableMessage'), $GLOBALS['LANG']->getLL('storageNotBrowsableTitle'), \TYPO3\CMS\Core\Messaging\FlashMessage::INFO);
index 1e688ed..9f8fca1 100644 (file)
@@ -439,19 +439,16 @@ Do you want to continue WITHOUT saving?</source>
                        <trans-unit id="file_upload.php.files" xml:space="preserve">
                                <source>files</source>
                        </trans-unit>
-                       <trans-unit id="file_upload.draginformation.message" xml:space="preserve">
-                               <source>You simply can drag your files into the filelist. Click again for classic mode.</source>
+                       <trans-unit id="file_upload.dropzonehint.title" xml:space="preserve">
+                               <source>Drop &amp; Drop to upload files</source>
                        </trans-unit>
-                       <trans-unit id="file_upload.draginformation.title" xml:space="preserve">
-                               <source>Drag &amp; Drop available</source>
+                       <trans-unit id="file_upload.dropzonehint.message" xml:space="preserve">
+                               <source>Drop your files here, or &lt;u&gt;click, browse &amp; choose files&lt;/u&gt;</source>
                        </trans-unit>
-                       <trans-unit id="file_upload.dropzonehint" xml:space="preserve">
-                               <source>Drop your files here!</source>
+                       <trans-unit id="file_upload.maxFileSizeExceeded" xml:space="preserve">
+                               <source>File &quot;{0}&quot; exceeds maximum file size of {1}!</source>
                        </trans-unit>
-                       <trans-unit id="file_upload.maxFilesizeExceeded" xml:space="preserve">
-                               <source>File &quot;{0}&quot; exceeds maximum filesize of {1} bytes!</source>
-                       </trans-unit>
-                       <trans-unit id="file_upload.fileNotAllowwed" xml:space="preserve">
+                       <trans-unit id="file_upload.fileNotAllowed" xml:space="preserve">
                                <source>Filename &quot;{0}&quot; is not allowed!</source>
                        </trans-unit>
                        <trans-unit id="file_upload.uploadFailed" xml:space="preserve">
index d0410a9..e1d329e 100644 (file)
@@ -49,41 +49,93 @@ table#typo3-filelist tr td div.typo3-editCtrl {
        -o-transition:border 0.2s ease;
        transition:border 0.2s ease;
 }
-.dropInProgess #typo3-inner-docbody {
-       border:10px solid #73ab61;
-       padding:-10px !important!;
-       margin-bottom:20px !important;
-       -webkit-transition:border 0.2s ease;
-       -moz-transition:border 0.2s ease;
-       -ms-transition:border 0.2s ease;
-       -o-transition:border 0.2s ease;
-       transition:border 0.2s ease;
+.t3-dropzone {
+       border:1px dashed #666666;
+       background:#DEDEDE;
+       text-align: center;
+       color: #616161;
+       margin-bottom: 1px;
+       position: relative;
+       cursor: pointer;
 }
-
-.DragUpload-DropZone.t3-dropzone {
+.t3-dropzone .t3-dropzone-close {
        position: absolute;
-       width:0;
-       display:none;
-       height:0;
-       z-index:9999;
+       top: 2px;
+       right: 2px;
+       cursor: pointer;
+       font-size: 20px;
 }
-
-.dropInProgess .DragUpload-DropZone.t3-dropzone,
-.uploadInProgress .DragUpload-DropZone.t3-dropzone,
-.DragUpload-ProgressInformation {
-       width:40%;
-       height:auto;
-       top:50px;
-       left:30%;
-       border:1px solid #73ab61;
-       background:#c8d9c3;
-       padding:8px;
-       display:block;
-       box-shadow:0px 0px 10px 0px #888888;
-}
-.DragUpload-ProgressInformation {
+.t3-drop-in-progress .t3-dropzone {
+       box-shadow: 0px 0px 10px 0px #888;
+       color: #000;
+}
+.t3-drop-in-progress .t3-dropzone .t3-dropzone-mask {
        position: absolute;
-       top:30px;
-       background-color: #dedede;
-       border: 1px solid #a2aab8;
+       left: 0;
+       right: 0;
+       bottom: 0;
+       top: 0;
+}
+.t3-dropzone.t3-dropzone-drop-ok {
+       background: #EBEBEB;
+}
+.t3-upload-file-picker {
+       position: absolute;
+       bottom: 0;
+       right: 0;
+       height: 1px;
+       width: 1px;
+       visibility: hidden;
+}
+table#typo3-filelist tr.file_list_normal.t3-upload-queue-item.last td {
+       border-bottom: 1px solid #666666;
+}
+table#typo3-filelist tr.file_list_normal.t3-upload-queue-item.uploading td {
+       color: #9D9D9D;
+}
+table#typo3-filelist tr.file_list_normal.t3-upload-queue-item.error td {
+       color: #BF383F;
+}
+table#typo3-filelist tr.file_list_normal.t3-upload-queue-item td.t3-upload-queue-progress {
+       color: #FFF;
+       padding: 0;
+}
+table#typo3-filelist tr.file_list_normal.t3-upload-queue-item.uploading td.t3-upload-queue-progress {
+       background-color: #F2CEB0;
+       color: #000;
+}
+table#typo3-filelist tr.file_list_normal.t3-upload-queue-item.error td.t3-upload-queue-progress {
+       background-color: #E5B6B9;
+       color: #F7F7F7;
+}
+div.t3-upload-queue-progress {
+       position: relative;
+       text-align: right;
+       padding: 5px 3px;
+       border:1px solid #C6C6C6;
+}
+.t3-upload-queue-progress-percentage,
+.t3-upload-queue-progress-message {
+       display: inline;
+       position: relative;
+       z-index: 2;
+       margin-right: 4px;
+}
+.t3-upload-queue-progress-message {
+       font-weight: bold;
+}
+.t3-upload-queue-progress-bar {
+       position: absolute;
+       z-index: 1;
+       top: 0;
+       left: -2px;
+       bottom:0;
+       background-color: #6EA757;
+       border: 1px solid #FFF;
+}
+.uploading .t3-upload-queue-progress-bar {
+       background-color: #F38B36;
 }
+.error .t3-upload-queue-progress-bar {
+       background-color: #BF383F;
+}
\ No newline at end of file