updateProduct

app/assets/javascripts/application.js

@@ -48,6 +48,26 @@ $(document).on('turbolinks:load', function() {
                 '</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/models/product.rb

@@ -1,3 +1,6 @@
 class Product < ApplicationRecord
   validates_presence_of :name
+  
+  # Product Image Uploader
+  mount_uploader :image_path, ProductImageUploader
 end

app/uploaders/product_image_uploader.rb

@@ -0,0 +1,58 @@
+class ProductImageUploader < CarrierWave::Uploader::Base
+
+  # Include RMagick or MiniMagick support:
+  # include CarrierWave::RMagick
+  # include CarrierWave::MiniMagick
+
+  # Choose what kind of storage to use for this uploader:
+  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
+    "image/product_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:
+  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
+  #
+  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
+  # end
+
+  # Process files as they are uploaded:
+  # process scale: [200, 300]
+  #
+  # def scale(width, height)
+  #   # do something
+  # end
+
+  # Create different versions of your uploaded files:
+  # version :thumb do
+  #   process resize_to_fit: [50, 50]
+  # end
+
+  # Add a white list of extensions which are allowed to be uploaded.
+  # For images you might use something like this:
+  def extension_whitelist
+    %w(jpg jpeg gif png)
+  end
+
+  # Override the filename of the uploaded files:
+  # Avoid using model.id or version_name here, see uploader/store.rb for details.
+  # def filename
+  #   "something.jpg" if original_filename
+  # end
+
+end

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

@@ -1,17 +1,33 @@
 <%= simple_form_for([:settings,@settings_product]) do |f| %>
   <%= f.error_notification %>
-
-  <div class="form-inputs">
+  <div class="col-md-8">
+  <div class="form-group">
     <%= f.input :item_code, :input_html => { :id => 'item_code' } %>
     <%= f.input :name %>
     <%= f.input :alt_name %>
     <%= f.input :unit_price %>
-    <%= f.input :image_path %>
-    
     <%= f.input :description %>
     <%= f.input :information %>
     <label><%= f.check_box :taxable %>Taxable</label>
   </div>
+  </div>
+
+  <label>Product Image</label>
+  <div class="col-md-4">
+    <div class="panel padding-10">
+      <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>Sample Image</p>
+            <%= image_tag "/image/menu_images/default.png", :class => "img-thumbnail" %>
+          <% end %>          
+        </div>
+        <%= f.file_field :image_path, :class => "img-thumbnail" %>
+      </div>
+    </div>
 
   <div class="form-actions">
     <%= f.button :submit %>