translate mime types to icons, update some icons, move file preview (upload progress) below table header

1 files changed, 52 insertions, 5 deletions

diff --git a/view/js/mod_cloud.js b/view/js/mod_cloud.js
index 4ef87ec4b..e29efd664 100644
--- a/view/js/mod_cloud.js
+++ b/view/js/mod_cloud.js
@@ -83,11 +83,13 @@ function UploadFileSelectHandler(e) {
 }
 
 function prepareHtml(f, i) {
-	$("#cloud-index").prepend(
-		"<tr class='new-upload'>" + "<td id='upload-progress-" + i + "'></td><td>" + f.name +
-		"</td><td>" + f.type +
-		"</td><td></td><td></td><td></td><td></td><td>" + formatSizeUnits(f.size) +
-		"</td><td></td></tr>"
+	$("#cloud-index tr:nth-child(2)").after(
+		"<tr class='new-upload'>" +
+		"<td><i class='fa " + getIconFromType(f.type) + "' title='" + f.type + "'></i></td>" +
+		"<td>" + f.name + "</td>" +
+		"<td id='upload-progress-" + i + "'></td><td></td><td></td><td></td><td></td>" +
+		"<td class='hiiden-xs'>" + formatSizeUnits(f.size) + "</td><td class='hiiden-xs'></td>" +
+		"</tr>"
 	);
 }
 
@@ -101,6 +103,51 @@ function formatSizeUnits(bytes){
         return bytes;
 }
 
+// this is basically a js port of include/text.php getIconFromType() function
+function getIconFromType(type) {
+	var map = {
+		//Common file
+		'application/octet-stream': 'fa-file-o',
+		//Text
+		'text/plain': 'fa-file-text-o',
+		'application/msword': 'fa-file-word-o',
+		'application/pdf': 'fa-file-pdf-o',
+		'application/vnd.oasis.opendocument.text': 'fa-file-word-o',
+		'application/epub+zip': 'fa-book',
+		//Spreadsheet
+		'application/vnd.oasis.opendocument.spreadsheet': 'fa-file-excel-o',
+		'application/vnd.ms-excel': 'fa-file-excel-o',
+		//Image
+		'image/jpeg': 'fa-picture-o',
+		'image/png': 'fa-picture-o',
+		'image/gif': 'fa-picture-o',
+		'image/svg+xml': 'fa-picture-o',
+		//Archive
+		'application/zip': 'fa-file-archive-o',
+		'application/x-rar-compressed': 'fa-file-archive-o',
+		//Audio
+		'audio/mpeg': 'fa-file-audio-o',
+		'audio/wav': 'fa-file-audio-o',
+		'application/ogg': 'fa-file-audio-o',
+		'audio/ogg': 'fa-file-audio-o',
+		'audio/webm': 'fa-file-audio-o',
+		'audio/mp4': 'fa-file-audio-o',
+		//Video
+		'video/quicktime': 'fa-file-video-o',
+		'video/webm': 'fa-file-video-o',
+		'video/mp4': 'fa-file-video-o',
+		'video/x-matroska': 'fa-file-video-o'
+	};
+
+	var iconFromType = 'fa-file-o';
+
+	if (type in map) {
+		iconFromType = map[type];
+	}
+
+	return iconFromType;
+}
+
 // upload  files
 function UploadFile(file, idx) {