closes #3652

public/src/admin/manage/category.js

@@ -100,26 +100,31 @@ define('admin/manage/category', [
 		});
 
 		$('.upload-button').on('click', function() {
-			var inputEl = $(this),
-				cid = inputEl.attr('data-cid');
+			var inputEl = $(this);
+			var cid = inputEl.attr('data-cid');
 
 			uploader.show({
 				title: 'Upload category image',
 				route: config.relative_path + '/api/admin/category/uploadpicture',
 				params: {cid: cid}
 			}, function(imageUrlOnServer) {
-				inputEl.val(imageUrlOnServer);
+				$('#category-image').val(imageUrlOnServer);
 				var previewBox = inputEl.parent().parent().siblings('.category-preview');
 				previewBox.css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')');
-				modified(inputEl[0]);
+
+				modified($('#category-image'));
 			});
 		});
 
+		$('#category-image').on('change', function() {
+			$('.category-preview').css('background-image', $(this).val() ? ('url("' + $(this).val() + '")') : '');
+		});
+
 		$('.delete-image').on('click', function(e) {
 			e.preventDefault();
 
-			var inputEl = $('.upload-button'),
-				previewBox = inputEl.parent().parent().siblings('.category-preview');
+			var inputEl = $('#category-image');
+			var previewBox = $('.category-preview');
 
 			inputEl.val('');
 			previewBox.css('background-image', '');

src/views/admin/manage/category.tpl

@@ -78,7 +78,7 @@
 							</div>
 							<div class="btn-group btn-group-justified">
 								<div class="btn-group">
-									<button type="button" data-cid="{category.cid}" data-name="image" data-value="{category.image}" class="btn btn-default upload-button"><i class="fa fa-upload"></i> Upload Image</button>
+									<button type="button" data-cid="{category.cid}" class="btn btn-default upload-button"><i class="fa fa-upload"></i> Upload Image</button>
 								</div>
 								<!-- IF category.image -->
 								<div class="btn-group">
@@ -87,6 +87,14 @@
 								<!-- ENDIF category.image -->
 							</div><br />
 
+							<fieldset>
+								<div class="form-group text-center">
+									<label for="category-image">Category Image</label>
+									<br/>
+									<input id="category-image" type="text" class="form-control" placeholder="Category Image" data-name="image" value="{category.image}" />
+								</div>
+							</fieldset>
+
 							<fieldset>
 								<div class="form-group text-center">
 									<label for="cid-{category.cid}-parentCid">Parent Category</label>