Image Upload

[blueiconingenieria]

Hi Ken!, how you do it, when upload the profile image, the view is automatically updated without having to click on the submit button ?, you have a tutorial that explains this ?, you could help me with the js code?

Thank!

[AjayBarot]

@blueiconingenieria : Open this view views/users/edit.html.erb
see this code.

<label class="change-avatar" id="change-avatar" style="background-image: url('<%= @user.avatar.url %>')">
  <%= f.file_field :avatar %>
  <%= icon('camera') %>
</label>

This will generate html for file upload
Note: Don't forget to add html: { multipart: true } in form.

Now see this code at edit_profile.js

$("#user_avatar").change(function(){
   ProfileEdit.readURL(this);
});

after selection of image by user from the image selection window this change event of jquery will execute.
and manipulate $('#change-avatar') style via help of jquery.

After the form submit rails controller will receive this kind of parameter of file.

"user"=>{"description"=>"", "location"=>"", "avatar"=>#<ActionDispatch::Http::UploadedFile:0x007fa419a1cda8 @tempfile=#<Tempfile:/var/folders/y_/32g4l1rs20g9tnm8pllbysf00000gn/T/RackMultipart20170323-2144-1xz74o4.svg>, @original_filename="stories-logo.svg", @content_type="image/svg+xml", @headers="Content-Disposition: form-data; name=\"user[avatar]\"; filename=\"stories-logo.svg\"\r\nContent-Type: image/svg+xml\r\n">}

and thus user profile image will saved in database. and user's profile pic will not saved automatically unless you clicked save change button.

Let me know If you still have a question or doubt into this functionality.