Photo not saved in form: using Carrierwave and preview photo with JS
1
Not solved Solved
11 months ago

I'm trying to update a profile picture from a user through a (edit)-form. I want to show the user which photo it is trying to upload, so I've used JS to preview the selected photo. The problem is that the preview is showing, but the new photo isn't saved through the form.

Any ideas on what I might have missed?

edit.html.erb

        <%= f.inputs do %>
    <% if @user.photo? %>
    <div id="photo_edit">
      <img id="img_prev" class="profile_photo_edit" src="<%= current_user.photo %>">
      <label id="photo-edit-button">
        <input type='file' onchange="readURL(this);" />
        <%= f.file_field :photo %>
        <%= f.hidden_field :photo_cache %>
        <span>Wijzig foto</span>
      </label>
    </div>
    <% else %>
    <div id="photo_edit">
      <%= image_tag "PICA.jpg", :id => "img_prev", :class => "profile_photo_edit"%>
      <label id="photo-edit-button">
        <input type='file' onchange="readURL(this);" />
        <%= f.file_field :photo %>
        <%= f.hidden_field :photo_cache %>
        <span>Wijzig foto</span>
      </label>
    </div>
    <% end %>

photo-preview.js

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $('#img_prev')
      .attr('src', e.target.result)
      .width(100)
      .height(100);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

users_controller

  def user_params
params.require(:user).permit(:first_name, :last_name, :current_position, :position_description, :email, :phonenumber, :linkedin, :skype, :location_id, :location_specs, :photo, :photo_cache)

end

11 months ago

Could you print here the entire form? It is hard to guess without the declaration and submit !

11 months ago
 <%= render 'shared/header' %>
 <%= render 'shared/navbar' %>
 <%= semantic_form_for [:profile, @user], :html=> { class: 'form-horizontal create_comp' } do |f| %>

 <div id="profile-page2" class="container profile-wrap-2">

   <div class="row">
     <div class="col-xs-12 col-sm-12 padding-top">
     </div>
   </div>

   <div class="row">
     <div class="col-xs-12 col-sm-4">
       <div class="card-padding-round">
         <%= f.inputs do %>
         <% if @user.photo? %>
         <div id="photo_edit">
           <img id="img_prev" class="profile_photo_edit" src="<%= current_user.photo %>">
           <label id="photo-edit-button">
             <input type='file' onchange="readURL(this);" />
             <%= f.file_field :photo %>
             <%= f.hidden_field :photo_cache %>
             <span>Wijzig foto</span>
           </label>
         </div>
         <% else %>
         <div id="photo_edit">
           <%= image_tag "PICA.jpg", :id => "img_prev", :class => "profile_photo_edit"%>
           <label id="photo-edit-button">
             <input type='file' onchange="readURL(this);" />
             <%= f.file_field :photo %>
             <%= f.hidden_field :photo_cache %>
             <span>Wijzig foto</span>
           </label>
         </div>
         <% end %>

         <div class="form-group">
           <div class="col-xs-2"></div>
           <div class="col-xs-10">
             <%= f.input :current_position, :as => :select , :collection => Position.pluck(:name), :label => false,      :include_blank => "Selecteer functie(groep)", :input_html => { :value => params[:name], :class => 'form-control' } %>
             <!--        <%= f.text_field :current_position, class: "form-control profile-form"%> -->
           </div>
           <label class="control-label col-xs-2" for="function">
             <i class="fa fa-briefcase" aria-hidden="true" title="functie" style="font-size: 30px; color: #e17000"></i>
           </label>
           <div class="col-xs-10">
             <%= f.text_field :position_description, placeholder: "omschrijving huidige functie/ rol (max. 100)",      maxlength: 100,  class: "form-control profile-form"%>
           </div>
         </div>

         <div class="form-group">
           <label class="control-label col-xs-2" for="phone">
             <i class="fa fa-phone" aria-hidden="true" title="telefoonnummer" style="font-size: 30px; color: #e17000">     </i>
           </label>
           <div class="col-xs-10">
             <%= f.text_field :phonenumber, placeholder: "+31612345678", class: "form-control profile-form" %>
           </div>
         </div>
         <div class="form-group">
           <label class="control-label col-xs-2" for="email">
             <i class="fa fa-envelope" aria-hidden="true" title="emailadres" style="font-size: 30px; color: #e17000">     </i>
           </label>
           <div class="col-xs-10">
             <%= f.text_field :email, class: "form-control profile-form" %>
           </div>
         </div>
         <div class="form-group">
           <label class="control-label col-xs-2" for="skype">
             <i class="fa fa-skype" aria-hidden="true" title="skype gebruikersnaam" style="font-size: 30px; color: #e17000"></i>
           </label>
           <div class="col-xs-10">
             <%= f.text_field :skype, placeholder: "vul skype username in", class: "form-control profile-form" %>
           </div>
         </div>
         <div class="form-group">
           <label class="control-label col-xs-2" for="linkedin">
             <i class="fa fa-linkedin" aria-hidden="true" title="link naar LinkedIn-profiel" style="font-size: 30px; color: #e17000"></i>
           </label>
           <div class="col-xs-10">
             <%= f.text_field :linkedin, placeholder: "kopieer link LinkedIn-profiel", class: "form-control profile-form" %>
           </div>
         </div>
         <div class="form-group">
           <div class="col-xs-2"></div>
           <div class="col-xs-10">
             <%= f.input :location, :as => :select , :collection => Location.pluck(:name, :id), :label => false, :include_blank => "Selecteer locatie", :input_html => { :value => params[:id], :class => 'form-control' } %>
           </div>
         </div>
         <div class="form-group">
           <label class="control-label col-xs-2" for="marker">
             <i class="fa fa-map-marker" aria-hidden="true" title="locatie" style="font-size: 30px; color: #e17000"></i>
           </label>
           <div class="col-xs-10">
             <%= f.text_field :location_specs, placeholder: "Specifieer locatie (indien gewenst)", class: "form-control profile-form" %>
           </div>
         </div>
       </div>
     </div>


     <div class="col-xs-12 col-sm-4">
       <div class="card">
         <div id="blue-half">
           <h1 class="title">Expertise toevoegen</h1>
           <div class="explain-edit">
             Klik en zoek in de lijst of vul in.
             <br />
             <br />
             Selecteer gewenste expertise of competenties.
             <br />
             <br />
             Voeg toe!
           </div>
         </div>
         <div id="blue-photo-half-2">
         </div>
       </div>
     </div>

     <div class="col-xs-12 col-sm-4">
       <div class="card-orange-edit">

       <%= f.input :competences, :as => :select , :collection => @competences.where(category: "expertise").pluck(:name, :id), :label => "Expertise" , :input_html => {:class => 'form-control expertises-select2', :name => "expertises[]", :id => "comp_input", :multiple => "multiple"} %>
         <script type="text/javascript">
           $(document).ready(function(){
             $(".expertises-select2").select2({
               tags: true
             });
           });
         </script>

         <%= f.input :competences, :as => :select , :collection => @competences.where(category: "competentie").pluck(:name, :id), :label => "Competenties" , :input_html => {:class => 'form-control competences-select2', :name => "competenties[]", :id => "comp_input", :multiple => "multiple"} %>
         <script type="text/javascript">
           $(document).ready(function(){
             $(".competences-select2").select2({
               tags: true
             });
           });
         </script>
       </div>
       <% end %>
     </div>

   </div>
 </div>

 <%= f.action :submit , :label => "Opslaan", :button_html => {:class => 'btn btn-default line-button'}%>
 <% end %>
11 months ago

Uh never tried Formtastic, seems nice according to their github! Are you sure uploader fonctionality is in it? I have found this: https://gist.github.com/sj26/2026284 on the subject

11 months ago

every else in the form is saved, except the photo.. it was working before, when i hadn't add the preview (js) part

11 months ago

thanks for the link, i'll look into it!

Cancel
Submit your answer