1

I'm trying to show a User's home town from a drop down menu. The list of city names are in my seeds.rb file and work great. But, I would like to have a picture right next to City Name (A photo of Statue of Liberty for NYC, Golden Gate Bridge for San Fran, etc.) I'm using paperclip and have never done something like this on my seed file before.

What I'm hoping to do enter image description here

What I have right now enter image description here

Error When adding avatar using paperclip and restarting server i get this error -> I believe its due to my views and seeds.rb --> undefined method `avatar' for #

User.rb

class User < ApplicationRecord
belongs_to :homecity, optional: true    
belongs_to :university, optional: true
has_attached_file :avatar, styles: { medium: "300x300>", thumb: "100x100>" }, default_url: "/images/:style/missing.png"
validates_attachment_content_type :avatar, content_type: /\Aimage\/.*\z/
end

Homecity.rb

class Homecity < ApplicationRecord
has_many :users
has_attached_file :avatar, styles: { medium: "300x300>", thumb: "100x100>" }, default_url: "/images/:style/liberty.png"
validates_attachment_content_type :avatar, content_type: /\Aimage\/.*\z/
end

homecities_controller.rb

class HomecitiesController < ApplicationController
before_action :authenticate_user!, only: [:new, :create]
def create
@homecity = Homecity.new(homecity_params)
if @homecity.save
  render json: @homecity
else
  render json: {errors: @homecity.errors.full_messages}
end
end
private
def homecity_params
params.require(:homecity).permit(:Hometown, :avatar)
end
end

Seeds.rb

Homecity.destroy_all
bigapple = Homecity.create!(Hometown:"New York City", avatar)
techhub = Homecity.create!(Hometown:"San Francisco", avatar)
longhorns = Homecity.create!(Hometown:"Austin", avatar)
angels = Homecity.create!(Hometown:"Los Angeles", avatar)

Edit.html.erb

<div class="field">
<%= f.label :homecity, "Home Town" %><br>
<%= f.select :homecity_id, Homecity.all.pluck(:Hometown, :id), Homecity.avatar, {}, { class: "selectize1" } %>
</div>

edit.js

$(document).on("turbolinks:load", function() {
var selectizeCallback = null;
$(".homecity-modal").on("hide.bs.modal", function(e) {
if (selectizeCallback != null) {
  selectizeCallback();
  selecitzeCallback = null;
}

$("#new_homecity").trigger("reset");
$.rails.enableFormElements($("#new_homecity"));
});
$("#new_homecity").on("submit", function(e) {
e.preventDefault();
$.ajax({
  method: "POST",
  url: $(this).attr("action"),
  data: $(this).serialize(),
  success: function(response) {
    selectizeCallback({value: response.id, text: response.Hometown});
    selectizeCallback = null;

    $(".homecity-modal").modal('toggle');
  }
});
});
$(".selectize1").selectize({
 maxOptions: 3,
create: function(input, callback) {
  selectizeCallback = callback;


  $(".homecity-modal").modal();
  $("#homecity_Hometown").val(input);
}
});
});
Omar
  • 383
  • 3
  • 17
  • 2
    What exactly is your issue? – max May 09 '17 at 16:50
  • @max i've never done something like this before is there anything that i should do to upload pictures into my seed file so that they can appear right next to the name of the city. Like can I do `Homecity.create!(Hometown:"Austin", Cityavatar: "/images/:style/Austin.png")` – Omar May 09 '17 at 17:00
  • @Iceman i think that's a great starting point, i'm going to try to plug away at an idea that just hit me that I think might work without relying on urls. – Omar May 09 '17 at 17:14
  • Ok, I've used this method myself, works well. – Eyeslandic May 09 '17 at 17:15
  • @Iceman tried it and gave it my best shot, but for somereason my liberty statue photo does not appear next to my New York City even though I thought I followed all the right steps in paperclip. – Omar May 09 '17 at 18:40
  • Well, whether the image appears there has nothing to do with paperclip per se. Displaying an image in a dropdown is not my specialty, but you will need some html, css or js magic I presume. – Eyeslandic May 09 '17 at 20:30
  • got it i'll keep on cracking on it and share what I find. Thanks @Iceman – Omar May 09 '17 at 20:47

0 Answers0