add bootstrap file input and menu item img implemented

app/assets/javascripts/application.js

@@ -20,25 +20,47 @@
 //= require jquery-ui
 //= require bootstrap-datepicker
 
-$(document).on("focus", "[data-behaviour~='datepicker']", function(e){
+$(document).on('turbolinks:load', function() {
+  $('.datepicker').datepicker({
+     format : 'dd-mm-yyyy',
+     autoclose: true
+  });
+  $('.datepicker').attr('ReadOnly','true');
+  $('.datepicker').css('cursor','pointer'); 
+
+  // 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',
+    }
+  });
+});
+
+ $(document).on("focus", "[data-behaviour~='datepicker']", function(e){
     $(this).datepicker({"format": "yyyy-M-dd", "weekStart": 1, "autoclose": true});
-	$('.dropdown-toggle').dropdown();	
+  $('.dropdown-toggle').dropdown(); 
 });
 
 function export_to(path)
 {
-	var form_params = $("#frm_report").serialize();
-	window.location = path+"?"+ form_params;
+  var form_params = $("#frm_report").serialize();
+  window.location = path+"?"+ form_params;
 }
 
- $(function () {
-    $('.datepicker').datepicker({
-       format : 'dd-mm-yyyy',
-       autoclose: true
-    });
-    $('.datepicker').attr('ReadOnly','true');
-    $('.datepicker').css('cursor','pointer'); 
-});
 
 
 

app/assets/stylesheets/settings.scss

@@ -51,4 +51,9 @@ ul.dropdown-menu li a{
  	font-weight:bold;
  	font-style:italic;
  	margin-bottom:0px;
+ }
+
+ .menu-item-img {
+ 	margin: 10px;
+ 	text-align: center;
  }

app/controllers/settings/set_menu_items_controller.rb

@@ -11,9 +11,7 @@ class Settings::SetMenuItemsController < ApplicationController
   # GET /settings/menu_items/1.json
   def show
     @sub_menu = MenuItem.where("menu_item_id=?",params[:id]).page(params[:page]).per(10)
-
     @menu_item_instance = MenuItemInstance.where("menu_item_id=?",params[:id]).page(params[:page]).per(10)
-
   end
 
   # GET /settings/menu_items/new
@@ -62,6 +60,8 @@ class Settings::SetMenuItemsController < ApplicationController
   # DELETE /settings/menu_items/1
   # DELETE /settings/menu_items/1.json
   def destroy
+    path_to_file = @settings_menu_item.image_path.to_s        
+    File.delete(path_to_file) if File.exist?(path_to_file)
     abc = MenuItem.deleteRecursive(@settings_menu_item)
     respond_to do |format|
       format.html { redirect_to settings_menu_category_set_menu_items_path, notice: 'Menu item was successfully destroyed.' }
@@ -81,6 +81,6 @@ class Settings::SetMenuItemsController < ApplicationController
 
     # Never trust parameters from the scary internet, only allow the white list through.
     def settings_menu_item_params
-      params.require(:set_menu_item).permit(:item_code, :name, :alt_name, :type, :menu_category_id,:account_id , :menu_item_id, :min_qty, :min_selectable_item, :max_selectable_item, :created_by)
+      params.require(:set_menu_item).permit(:item_code, :name, :alt_name, :type, :image_path, :menu_category_id,:account_id , :menu_item_id, :min_qty, :min_selectable_item, :max_selectable_item, :created_by)
     end
 end

app/controllers/settings/simple_menu_items_controller.rb

@@ -27,11 +27,12 @@ class Settings::SimpleMenuItemsController < ApplicationController
   # POST /settings/menu_items.json
   def create
     @settings_menu_item = MenuItem.new(settings_menu_item_params)
-    # @settings_menu_item.image_path = params[:image_path]
+
     if params[:simple_menu_item][:menu_item_id] == ''
       @settings_menu_item.menu_category_id = params[:menu_category_id]
     end
     @settings_menu_item.created_by = current_login_employee.name
+
     respond_to do |format|
       if @settings_menu_item.save
         format.html { redirect_to settings_menu_category_simple_menu_items_path, notice: 'Menu item was successfully created.' }
@@ -60,6 +61,8 @@ class Settings::SimpleMenuItemsController < ApplicationController
   # DELETE /settings/menu_items/1
   # DELETE /settings/menu_items/1.json
   def destroy
+    path_to_file = @settings_menu_item.image_path.to_s        
+    File.delete(path_to_file) if File.exist?(path_to_file)
     abc = MenuItem.deleteRecursive(@settings_menu_item)
     respond_to do |format|
       format.html { redirect_to settings_menu_category_simple_menu_items_path, notice: 'Menu item was successfully destroyed.' }

app/uploaders/menu_item_image_uploader.rb

@@ -8,13 +8,21 @@ class MenuItemImageUploader < CarrierWave::Uploader::Base
   storage :file
   # storage :fog
 
+  def root
+    Rails.root.join 'public/'
+  end
+
   # Override the directory where uploaded files will be stored.
   # This is a sensible default for uploaders that are meant to be mounted:
   def store_dir
-    "public/image/menu_images"
+    "image/menu_images"
     # "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
   end
 
+  # def cache_dir
+  #   '/tmp/images'
+  # end
+
   # Provide a default URL as a default if there hasn't been a file uploaded:
   # def default_url(*args)
   #   # For Rails 3.1+ asset pipeline compatibility:

app/views/layouts/application.html.erb

@@ -11,7 +11,10 @@
 
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= stylesheet_link_tag    'settings', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_link_tag    'fileinput.min', media: 'all', 'data-turbolinks-track': 'reload' %>
+    
+    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
+    <%= javascript_include_tag 'fileinput.min', 'data-turbolinks-track': 'reload' %>      
   </head>
 
   <body>
@@ -32,8 +35,7 @@
 						    <%= message %>
 						  </div>
 			<% end %>
-      <%= yield %>
-
+      <%= yield %>      
     </div>
   </body>
 </html>

app/views/settings/set_menu_items/_form.html.erb

@@ -1,7 +1,16 @@
 <%= simple_form_for([:settings,@category, @settings_menu_item]) do |f| %>
   <%= f.error_notification %>
   <div class="col-md-4">
-    <div class="menu-item-img">
+    <div class="form-group">
+      <div class="menu-item-img">
+        <% if f.object.image_path? %>
+          <p><%= f.object.name %></p>
+          <%= image_tag f.object.image_path.url, :class => "img-thumbnail" %>
+        <% else %>
+          <p>Menu Item Image</p>
+          <%= image_tag "/image/menu_images/default.png", :class => "img-thumbnail" %>
+        <% end %>          
+      </div>
       <%= f.file_field :image_path, :class => "img-thumbnail" %>
     </div>
   </div>

app/views/settings/simple_menu_items/_form.html.erb

@@ -1,7 +1,16 @@
 <%= simple_form_for([:settings,@category, @settings_menu_item]) do |f| %>
   <%= f.error_notification %>
   <div class="col-md-4">
-    <div class="menu-item-img">
+    <div class="form-group">
+      <div class="menu-item-img">
+        <% if f.object.image_path? %>
+          <p><%= f.object.name %></p>
+          <%= image_tag f.object.image_path.url, :class => "img-thumbnail" %>
+        <% else %>
+          <p>Menu Item Image</p>
+          <%= image_tag "/image/menu_images/default.png", :class => "img-thumbnail" %>
+        <% end %>          
+      </div>
       <%= f.file_field :image_path, :class => "img-thumbnail" %>
     </div>
   </div>

config/initializers/assets.rb

@@ -19,6 +19,9 @@ Rails.application.config.assets.precompile += %w( OQS.js )
 
 Rails.application.config.assets.precompile += %w( settings.css )
 
+# --- Image Uploader ----
+Rails.application.config.assets.precompile += %w( fileinput.min.css )
+
 # --- Customer/ Customer - Crm ----
 Rails.application.config.assets.precompile += %w( CRM.css )
 Rails.application.config.assets.precompile += %w( CRM.js )
@@ -26,3 +29,6 @@ Rails.application.config.assets.precompile += %w( CRM.js )
 # --- Customer/ Customer - Crm ----
 Rails.application.config.assets.precompile += %w( jquery-confirm.css )
 Rails.application.config.assets.precompile += %w( jquery-confirm.js )
+
+# --- Image Uploader ----
+Rails.application.config.assets.precompile += %w( fileinput.min.js )

config/initializers/carrier_wave.rb

@@ -0,0 +1 @@
+require 'carrierwave/orm/activerecord'