Fallback for browsers that disables javascript

Conflicts:
	stylesheets/style.css
	templates/post_form.html

js/file-selector.js

@@ -140,7 +140,8 @@ var dropHandlers = {
 	}
 };
 
-$('.dropzone').css('user-select', 'none')  // let jquery add browser specific prefix
+$('#upload input[type=file]').hide();  // hide the original file selector
+$('.dropzone-wrap').css('user-select', 'none').show();  // let jquery add browser specific prefix
 
 // attach handlers
 $(document).on(dropHandlers, '.dropzone');

stylesheets/style.css

@@ -959,3 +959,84 @@ span.pln {
 	cursor: pointer;
 }
 
+#youtube-size input {
+	width: 50px;
+}
+
+/* File selector */
+.dropzone {
+  color: #000;
+  cursor: default;
+  margin: auto;
+  padding: 0px 4px;
+  text-align: center;
+  min-height: 50px;
+  max-height: 140px;
+  transition: 0.2s;
+  background-color: rgba(200, 200, 200, 0.5);
+  overflow-y: auto;
+}
+.dropzone-wrap {
+  width: 100%;
+}
+.dropzone .file-hint {
+  color: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+  position: relative;
+  margin-bottom: 5px;
+  padding: 10px 0px;
+  top: 5px;
+  transition: 0.2s;
+  border: 2px dashed rgba(125, 125, 125, 0.4);
+}
+.file-hint:hover, .dropzone.dragover .file-hint {
+  color: rgba(0, 0, 0, 1);
+  border-color: rgba(125, 125, 125, 0.8);
+}
+.dropzone.dragover {
+  background-color: rgba(200, 200, 200, 1);
+}
+.dropzone .file-thumbs {
+  text-align: left;
+  width: 100%;
+}
+.dropzone .tmb-container {
+  padding: 3px;
+  overflow-x: hidden;
+  white-space: nowrap;
+}
+.dropzone .file-tmb {
+  height: 40px;
+  width: 70px;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  background-color: rgba(187, 187, 187, 0.5);
+  background-size: cover;
+  background-position: center;
+}
+.dropzone .file-tmb span {
+  font-weight: 600;
+  position: relative;
+  top: 13px;
+}
+.dropzone .tmb-filename {
+  display: inline-block;
+  vertical-align: bottom;
+  bottom: 12px;
+  position: relative;
+  margin-left: 5px;
+}
+.dropzone .remove-btn {
+  cursor: pointer;
+  color: rgba(125, 125, 125, 0.5);
+  display: inline-block;
+  vertical-align: bottom;
+  bottom: 10px;
+  position: relative;
+  margin-right: 5px;
+  font-size: 20px
+}
+.dropzone .remove-btn:hover {
+  color: rgba(125, 125, 125, 1);
+}

templates/post_form.html

@@ -98,6 +98,14 @@
 			</th>
 			<td>
 				<input type="file" name="file" id="upload_file">
+
+				<div class="dropzone-wrap" style="display: none;">
+					<div class="dropzone">
+						<div class="file-hint">Select/drop/paste files here</div>
+						<div class="file-thumbs"></div>
+					</div>
+				</div>
+
 				{% if config.allow_upload_by_url %}
 					<div style="float:none;text-align:left" id="upload_url">
 						<label for="file_url">{% trans %}Or URL{% endtrans %}</label>: