Clyro

Here is one of many ways to create drag and drop functionallity into your application.

Create a new .js file (or add into application.js) in your assets and add the following code:

var $fileInput = $('.file_input');
var $droparea = $('.file_droparea');

$fileInput.on('dragenter focus click', function () {
  $droparea.addClass('is-active');
});

$fileInput.on('dragleave blur drop', function () {
  $droparea.removeClass('is-active');
});

$fileInput.on('change', function () {
  var filesCount = $(this)[0].files.length;
  var $textContainer = $(this).prev('.js-set-number');
  if (filesCount === 1) {
    $textContainer.text($(this).val().split('\\').pop());
  } else {
    $textContainer.text(filesCount + ' uploaded files');
  }
});

The code above will track the hover effects on the field (.file_droparea in my case, feel free to change it however you like).

Next, we need to create our form (HAML):

= form_for Something.new, method: 'post', :html => { :multipart => true }, class: "form-block" do |f|
  .form-block_container
    .form-block_input
      .form-block_avatar_file
        .file_droparea
          %p.file_msg.js-set-number Choose your files or drag them here
          = f.file_field :photo, multiport: false, class: "file_input", type: :file, multiple: false, required: true

Note: if you want to drag more then 1 file, simply change multiple: false to multiple: true in f.filed_field :photo.

The last thing to do is to style your form, here is my sample (SCSS):

.file_droparea {
  border: 1px dashed black;
  border-radius: 4px;
  background-color: gray;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 26px 20px 30px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  text-align: center;
  cursor: pointer;
  &.is-active,
  &:focus,
  &:hover {
    border-color: $blue;
  }
}

.file_msg {
  color: #777;
  font-size: small;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: calc(100% - 130px);
  vertical-align: middle;
}

.file_input {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
  &:focus {
    outline: none;
  }
}

Hi, I am trying to develop similiar functionallity to Shopify where the owner of the store can add new managers to the seller account and allow them to manage orders. However, in my case its just users and groups.

Currently, I have a working form for users where they can create a new group.

# User model
class User < ApplicationRecord
    ...
  has_one :group, dependent: :delete, foreign_key: :owner_id
    ...
end

# Group model
class Group < ApplicationRecord
  belongs_to :owner, class_name: "User"
end

After submit, the user's id moves to the owner_id column in groups table. Please note, the user can have only one group. If the user is the owner, he won't be able to become a moderator, the same approach applies to the moderators.

I tried to google and found couple answers:

1. YouTube video - Rails API: Multiple Accounts and Friendly ID
2. Stackoverflow - Adding an “Account” that has many “Users”
3. Stackoverflow - Adding multiple users into a single record Rails 5

Not sure if I am doing everything right, but I came up with the idea to create join table group_moderators with user_id and group_id:

# Group Moderator Model
class GroupModerator < ApplicationRecord
  belongs_to :user
  belongs_to :group
end

Updated version of group model:

class Group < ApplicationRecord
  belongs_to :owner, class_name: "User"

  has_many :group_moderators
  has_many :users, through: :group_moderators
end

What am I doing wrong? How do I allow the owner of the group invite moderators? At the beginning I simply wanted to update group_id column for the invited user but in this case my group controller doesn't know about the invited user since it doesn't have any information in the groups table.

Thank you very much for your help and time.

PS: Not sure if it matters but in the future, the owner will be able to give the rights to each moderator.

In your movie.rb change your country_name to:

 def country_name
    country_name = ISO3166::Country[country]
    country_name.translations[I18n.locale.to_s] || country_name.name
  end

Now you can do this movie.country_name which will convert your country code to the full name like this RU:Russia or CA:Canada, and etc:

# your code
json.name movie.title.titleize + " " + "in" + " " + movie.country_name
# your code