add file input min

app/assets/javascripts/application.js

@@ -28,6 +28,7 @@
 //= require jquery-countto/jquery.countTo.js
 //= require raphael/raphael.min
 //= require chartjs/Chart.bundle.js
+//= require fileinput.min
 //= require BSBMaterial/admin.js
 //= require BSBMaterial/pages/index.js
 //= require BSBMaterial/demo.js
@@ -60,8 +61,9 @@ $(document).on('turbolinks:load', function() {
 });
 
 
- $(function(){
+$(function(){
-   var height = ($(window).height() - ($('.legal').outerHeight() + $('.user-info').outerHeight() + $('.navbar').innerHeight()));
+  var height = ($(window).height() - ($('.legal').outerHeight() + $('.user-info').outerHeight() + $('.navbar').innerHeight()));
+
   $('#custom-slimscroll').slimScroll({
     height: height,
     size: '5px',
@@ -70,7 +72,7 @@ $(document).on('turbolinks:load', function() {
     borderRadius: '0',
     railBorderRadius: '0'
   });
-  
+
   $('#order-detail-slimscroll').slimScroll({
     height: height-180,
     size: '5px',
@@ -79,6 +81,47 @@ $(document).on('turbolinks:load', function() {
     borderRadius: '0',
     railBorderRadius: '0'
   });
+
+  // Image Upload
+  $("#simple_menu_item_image_path").fileinput({
+      previewFileType: "image",
+      allowedFileExtensions: ["jpg", "gif", "png"],
+      browseClass: "btn btn-success",
+      browseLabel: "Pick Image",
+      browseIcon: "<i class=\"fa fa-image\"></i> ",
+      removeClass: "btn btn-danger",
+      removeLabel: "Delete",
+      removeIcon: "<i class=\"fa fa-trash\"></i> ",
+      showUpload: false,
+      // uploadClass: "btn btn-info",
+      // uploadLabel: "Upload",
+      // uploadIcon: "<i class=\"fa fa-upload\"></i> ",
+      previewTemplates: {
+        image: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}">\n' +
+                '   <img src="{data}" class="file-preview-image" title="{caption}" alt="{caption}" style="width: 200px;height: 200px;">\n' +
+                '</div>\n',
+    }
+  });
+
+  $("#product_image_path").fileinput({
+      previewFileType: "image",
+      allowedFileExtensions: ["jpg", "gif", "png"],
+      browseClass: "btn btn-success",
+      browseLabel: "Pick Image",
+      browseIcon: "<i class=\"fa fa-image\"></i> ",
+      removeClass: "btn btn-danger",
+      removeLabel: "Delete",
+      removeIcon: "<i class=\"fa fa-trash\"></i> ",
+      showUpload: false,
+      // uploadClass: "btn btn-info",
+      // uploadLabel: "Upload",
+      // uploadIcon: "<i class=\"fa fa-upload\"></i> ",
+      previewTemplates: {
+        image: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}">\n' +
+                '   <img src="{data}" class="file-preview-image" title="{caption}" alt="{caption}" style="width: 200px;height: 200px;">\n' +
+                '</div>\n',
+    }
+  });
 });
 
  $(document).on("focus", "[data-behaviour~='datepicker']", function(e){

app/assets/stylesheets/application.scss

@@ -6,6 +6,7 @@
 @import "bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker";
 @import "bootstrap-select/css/bootstrap-select";
 @import "morrisjs/morris";
+@import "fileinput.min";
 @import "BSBMaterial/style";
 @import "BSBMaterial/themes/all-themes";