Friday 24 February 2017

Click edit image icon upload image using javascript

 <img src="<%= asset_path( current_user.image ) %>" id="imgprvw" class="circle_img  img-circle" alt="Cinque Terre" width="150" height="136" style="border: 4px solid gray;margin-left:5% !important;">


    <img src="<%= asset_path('edit.png')%>" class="edit_pin" alt="Image" onclick = "$('#user-image').click();" width="40px"  >
   

<%= form_tag '/users/edit_profile_image', id: 'image_upload', :multipart => true do %>
<%= file_field_tag :avatar,name: "avatar",:id => "user-image" ,:onchange => "showimagepreview(this)" ,:class=>"img_file hide" %></td>
<% end %>


<script>
    function showimagepreview(input) {
      if (input.files && input.files[0]) {
      var filerdr = new FileReader();
      filerdr.onload = function(e) {
 
      $('#imgprvw').attr('src', e.target.result);
      }
      filerdr.readAsDataURL(input.files[0]);
      }
      $('#image_upload').submit();
    }
</script>

controller code

@user = current_user
     @user.image = params[:avatar] if params[:avatar].present?
     @user.save
     flash[:notice] = "Profile image has been updated."
     redirect_to :back

No comments:

Post a Comment

Revert last commit or second last and more....

 Git revert commit_id -m 1 this command willl revert last commit  Git revert commit_id -m 2 this command will revert second commit with same...