Allow multiple file uploads

Gemfile

@@ -30,8 +30,6 @@ group :development do
 end
 
 group :development, :test do
-  gem "better_errors"
-  gem "binding_of_caller"
   gem "pry"
 end
 

Gemfile.lock

@@ -71,14 +71,8 @@ GEM
     archive-zip (0.12.0)
       io-like (~> 0.3.0)
     base64 (0.2.0)
-    better_errors (2.10.1)
-      erubi (>= 1.0.0)
-      rack (>= 0.9.0)
-      rouge (>= 1.0.0)
     bigdecimal (3.1.7)
     bindex (0.8.1)
-    binding_of_caller (1.0.1)
-      debug_inspector (>= 1.2.0)
     bootsnap (1.18.3)
       msgpack (~> 1.2)
     builder (3.2.4)
@@ -99,7 +93,6 @@ GEM
       rexml
     crass (1.0.6)
     date (3.3.4)
-    debug_inspector (1.2.0)
     delayed_job (4.1.11)
       activesupport (>= 3.0, < 8.0)
     delayed_job_active_record (4.1.8)
@@ -257,7 +250,6 @@ GEM
     rake (13.1.0)
     regexp_parser (2.9.0)
     rexml (3.2.6)
-    rouge (4.2.1)
     rspec-core (3.13.0)
       rspec-support (~> 3.13.0)
     rspec-expectations (3.13.0)
@@ -342,8 +334,6 @@ PLATFORMS
   arm64-darwin-22
 
 DEPENDENCIES
-  better_errors
-  binding_of_caller
   bootsnap
   capybara
   delayed_job_active_record

app/assets/stylesheets/images/index.scss

@@ -1,4 +1,4 @@
-ul.images {
+.images {
   display: grid;
   grid-gap: 0.75rem;
   grid-template-columns: repeat(2, 1fr);
@@ -19,6 +19,31 @@ ul.images {
     border-radius: 2px;
     padding: 0.25rem;
   }
+
+  &__upload {
+    aspect-ratio: 1 / 1;
+
+    &-form {
+      height: 100%;
+    }
+
+    &-label {
+      align-items: center;
+      border-radius: 2px;
+      outline: 1px dashed white;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      justify-content: center;
+      opacity: 0.4;
+      width: 100%;
+      cursor: pointer;
+    }
+
+    &-input {
+      display: none;
+    }
+  }
 }
 
 @media (min-width: 380px) {

app/assets/stylesheets/sessions.scss

@@ -19,6 +19,7 @@
   text-decoration: none;
   padding: 0.5rem 2rem;
   border-radius: 0.5rem;
+
   img {
     width: 1.2rem;
     vertical-align: middle;

app/controllers/images_controller.rb

@@ -8,19 +8,18 @@ class ImagesController < ApplicationController
 
   def show
     @image = @current_user.images.find(params[:id])
-
-    if turbo_frame_request?
-      render partial: "tags/tags", locals: {
-        image: @image,
-        tags: @image.tags
-      }
-    end
   end
 
   def create
-    @image = Image.create(permitted_params)
-    @current_user.images << @image
-    TagImageJob.perform_later(image_id: @image.id)
+    permitted_params[:images].select(&:present?).each do |image|
+      @image = Image.create(
+        user_id: permitted_params[:user_id],
+        album_id: permitted_params[:album_id],
+        image: image,
+      )
+      @current_user.images << @image
+      TagImageJob.perform_later(image_id: @image.id)
+    end
 
     redirect_for(@image)
   end
@@ -53,6 +52,6 @@ class ImagesController < ApplicationController
   end
 
   def permitted_params
-    params.require(:image).permit(:user_id, :album_id, :image)
+    params.require(:image).permit(:user_id, :album_id, images: [])
   end
 end

app/controllers/tags_controller.rb

@@ -5,7 +5,7 @@ class TagsController < ApplicationController
     image = @current_user.images.find(params[:image_id])
     tag = params[:tag]
 
-    if !image.tags.include?(tag)
+    if !image.tags.include?(tag) && tag.present?
       image.tags << tag
       image.save
       redirect_to image, turbo_frame: "tags"

app/javascript/application.js

@@ -3,5 +3,6 @@
 import "@hotwired/turbo-rails"
 import Rails from "@rails/ujs";
 import { Application } from "@hotwired/stimulus";
+import "controllers"
 
 Rails.start();

app/javascript/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = true
+window.Stimulus   = application
+
+export { application }

app/javascript/controllers/index.js

@@ -0,0 +1,3 @@
+import { application } from "controllers/application"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)

app/javascript/controllers/uploads_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["form", "fileField"];
+
+  connect() {
+    this.element.addEventListener("dragenter", (event) => {
+      console.log(event);
+    });
+
+    this.fileFieldTarget.addEventListener("change", (event) => {
+      this.formTarget.submit();
+    });
+  }
+}

app/views/images/index.html.erb

@@ -15,13 +15,28 @@
           method: :delete, data: { confirm: 'Are you sure?' } %>
     </li>
   <% end %>
+
+  <li class="images__upload" data-controller="uploads">
+    <%= form_for(
+      @images.new,
+      html: {
+        class: "images__upload-form",
+        data: {"uploads-target": "form"}
+      }
+    ) do |f| %>
+      <%= f.hidden_field :user_id %>
+      <%= f.hidden_field :album_id %>
+      <%= f.file_field(
+        :images,
+        class: "images__upload-input",
+        multiple: true,
+        accept: "image/*",
+        data: {"uploads-target": "fileField"}
+      ) %>
+      <label for="image_images" class="images__upload-label">
+        <span>↑</span>
+        Upload
+      </label>
+    <% end %>
+  </li>
 </ul>
-
-<h2>Upload New Image</h2>
-
-<%= simple_form_for @images.new do |f| %>
-  <%= f.input :user_id, as: :hidden %>
-  <%= f.input :album_id, as: :hidden %>
-  <%= f.input :image, as: :file %>
-  <%= f.submit %>
-<% end %>

app/views/images/show.html.erb

@@ -4,10 +4,10 @@
     →
     <%= link_to @image.album.title, album_images_path(@image.album) %>
   <% end %>
-  &rarr;
-  <%= @image.image.name %>
 <% end %>
 
+<h2><%= @image.image.name %></h2>
+
 <div class="show-image" data-image-id="<%= @image.id %>">
   <div class="image-container">
     <%= render "image", image: @image %>

app/views/sessions/new.html.erb

@@ -1,7 +1,12 @@
 <% content_for :title, "My Images" %>
 
 <div class="centre-stage">
-  <%= link_to '/auth/github', class: "github-button", method: :post do %>
+  <%= button_to(
+    '/auth/github',
+    class: "github-button",
+    method: :post,
+    data: {turbo: false}
+  ) do %>
     <%= image_tag "github.svg" %>
     Sign in with GitHub
   <% end %>

config/importmap.rb

@@ -2,7 +2,9 @@
 
 pin "application"
 pin "@rails/ujs", to: "@rails--ujs.js" # @7.1.3
-pin "@hotwired/stimulus", to: "@hotwired--stimulus.js" # @3.2.2
 pin "@hotwired/turbo-rails", to: "@hotwired--turbo-rails.js" # @8.0.4
 pin "@hotwired/turbo", to: "@hotwired--turbo.js" # @8.0.4
 pin "@rails/actioncable/src", to: "@rails--actioncable--src.js" # @7.1.3
+pin "@hotwired/stimulus", to: "stimulus.min.js"
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
+pin_all_from "app/javascript/controllers", under: "controllers"