Drag and drop images
# general
m
Is there any way - possibly with a pro license - to just drag and drop a bunch of images and create individual records from them? I have a client project where I need to create a fast and straightforward way for an admin user to just upload a couple of images. Best I could think was create a model
Image
with a
has_one_attached
, but of course then the user shouldn’t have to create each image individually
l
Hey @millions-exabyte-27721 There is no native way that supports it
m
Right. Maybe this is going to be my first Avo plugin then 😅
l
It could be!
Would it be ok to have an drag and drop area on the
Image
resource index view?
and each drop creates the record?
Imagine that users is the images resource =))
I guess you can generate a custom resource tool and render it on top of the page then implement the feature using a bit of stimulus
m
Yes something like that, exactly!
I think that could be beneficial also if you’d like to quickly scaffold a bunch of blog posts, or landing pages, for example. Drop some feature images and fill in the rest
l
Yup, it is indeed useful! Let me know if you find any obstacle on generating the resource tool and positioning it on top of the page
m
I could use some pointers, yes 😅 mostly because I'm not yet too familiar with the terminology
but I guess this is the correct section in the docs: https://docs.avohq.io/3.0/resource-tools.html#generate-a-resource-tool
l
Yes, that's it
m
awesome... but
tool Avo::ResourceTools::ImageDrop, show_on: :index
doesn't seem to work (the
index
part)
l
You're right
m
it does render on the show view though
l
my bad!
m
no worries!
I should practice reading 😅 > A custom tool is a partial added to your resource's Show and Edit views.
l
let's follow another approach, using the
components
option
1/2 minutes i'll wirte here a guide
m
ha! you're ahead of me again
I should be able to eject ResourceIndexComponent and customize it
l
Well, ejecting it is one way
but I would go with an approach with less extra maintanence
Copy code
erb
<%# app/components/avo/views/drag_and_drop_resource_index_component.html.erb %>

DnD area here!

<%= render Avo::Views::ResourceIndexComponent.new(**@args) %>
Copy code
ruby
# app/components/avo/views/drag_and_drop_resource_index_component.rb
# frozen_string_literal: true

class Avo::Views::DragAndDropResourceIndexComponent < Avo::Views::ResourceIndexComponent
  def initialize(**args)
    @args = args
  end
end
And on the resource:
Copy code
ruby
  self.components = -> do
    {
      resource_index_component: Avo::Views::DragAndDropResourceIndexComponent
    }
  end
This way if we push updates to
ResourceIndexComponent
you don't need to apply them yourself
m
Gotcha, of course
l
or use a tool or resource tool for it
open to suggestions if you hack things around it
we do have a gallery feature pinned in issues
that should be more full featured and support dropping things inside
m
resource tool didn't work because you apparently can't connect it to the
Index
view
Yep so a new index component will do. Just a final question - how would I add a custom action/route to a resource controller? It seems I need a file field with multiple: true and then attach everything in the controller. For this I‘ll need a bespoke action
l
This is one way of doing it:
Copy code
ruby
Rails.application.routes.draw do
 # ...
end

if defined? ::Avo
  Avo::Engine.routes.draw do
    scope :resources do
      get "courses/cities", to: "courses#cities"
      get "users/get_users", to: "users#get_users"
    end
  end
end
m
thanks!