funicular-image-uploader 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: e5e62d685ad7904d5736f83bf4f93236ae58519b662485de30c647ecddd160eb
+  data.tar.gz: caba1f7953324ccfe25086cc6914cea9761b2258e2450286e8ba9538f7ca00e0
+SHA512:
+  metadata.gz: c64a67e635875da3e42dfef5bb1a796e4da7695627031d866d1513d52ec68245d5025ef57aa8371498fa860e755d5fa9449990af1259b94a83c087254eed529b
+  data.tar.gz: a98ea6fcb2f047f42b2c200d43915e2c9cce7a7aa5172ccc53c0abff83af9e849208ad588b26dc98f52cea1ec989e53fd8c3bdfaca9500ecb0466d7e8d5e0f67

data/README.md

@@ -0,0 +1,83 @@
+# Funicular Image Uploader
+
+Image upload component for Funicular.
+
+The plugin only owns the browser-side interaction: file selection, object URL
+preview, optional FormData upload, and display of the current image URL. The
+Rails app owns persistence. The same component works with a controller that
+stores bytes in SQLite or one that attaches the upload to Active Storage.
+
+## Install
+
+```ruby
+group :funicular do
+  gem "funicular-image-uploader"
+end
+```
+
+Render plugin assets from the Rails layout:
+
+```erb
+<%= funicular_plugin_include_tags %>
+```
+
+## Deferred upload with a profile form
+
+Use `on_select` when an image should be submitted together with other form
+fields:
+
+```ruby
+component(
+  Funicular::Plugins::ImageUploader::Component,
+  src: current_user.has_avatar ? "/users/#{current_user.id}/avatar" : nil,
+  input_id: "avatar-input",
+  file_field: "avatar",
+  image_class: "w-24 h-24 rounded-full object-cover",
+  input_class: "w-full border rounded",
+  on_select: ->(file, preview_url) { @selected_avatar_file = file }
+)
+```
+
+The parent component can then send its form data with
+`Funicular::FileUpload.upload_with_formdata`.
+
+## Standalone upload
+
+Use `auto_upload: true` when the image has its own endpoint:
+
+```ruby
+component(
+  Funicular::Plugins::ImageUploader::Component,
+  src: "/users/#{current_user.id}/avatar",
+  upload_url: "/users/#{current_user.id}/avatar",
+  file_field: "avatar",
+  auto_upload: true,
+  on_upload: ->(result) { puts "uploaded" },
+  on_error: ->(message, result) { puts message }
+)
+```
+
+The endpoint should return JSON. If it includes `image_url`, the component uses
+that URL after upload. Override the key with `response_url_key: "url"`.
+
+## Active Storage endpoint example
+
+```ruby
+class Users::AvatarsController < ApplicationController
+  before_action :require_login
+
+  def update
+    current_user.avatar.attach(params[:avatar])
+    render json: {
+      image_url: rails_blob_path(current_user.avatar, only_path: true)
+    }
+  end
+end
+```
+
+```ruby
+resource :avatar, only: [:update], controller: "users/avatars"
+```
+
+For direct SQLite storage, read `params[:avatar]` in the controller and return
+the URL that serves the stored bytes.

data/assets/image_uploader.css

@@ -0,0 +1,37 @@
+.funicular-image-uploader {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.funicular-image-uploader__preview {
+  display: block;
+}
+
+.funicular-image-uploader__image {
+  width: 6rem;
+  height: 6rem;
+  border-radius: 9999px;
+  object-fit: cover;
+}
+
+.funicular-image-uploader__controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.funicular-image-uploader__placeholder {
+  width: 6rem;
+  height: 6rem;
+  border-radius: 9999px;
+  display: grid;
+  place-items: center;
+  background: #e5e7eb;
+  color: #4b5563;
+  font-weight: 600;
+}
+
+.funicular-image-uploader__error {
+  color: #b91c1c;
+  font-size: 0.875rem;
+}

data/lib/components/image_uploader_component.rb

@@ -0,0 +1,233 @@
+class ImageUploaderComponent < Funicular::Component
+  attr_reader :selected_file
+
+  def initialize_state
+    {
+      preview_url: nil,
+      uploaded_url: nil,
+      uploading: false,
+      error: nil,
+      cache_buster: Time.now.to_i
+    }
+  end
+
+  def handle_file_change(event = nil)
+    Funicular::FileUpload.select_file_with_preview(input_id) do |file, preview_url|
+      if file && preview_url
+        @selected_file = file
+        patch(preview_url: preview_url, error: nil)
+        emit_select(file, preview_url)
+        upload if props[:auto_upload]
+      else
+        @selected_file = nil
+        patch(preview_url: nil)
+        emit_select(nil, nil)
+      end
+    end
+  end
+
+  def clear
+    @selected_file = nil
+    patch(preview_url: nil, uploaded_url: nil, error: nil)
+    emit_select(nil, nil)
+  end
+
+  def upload(fields: nil, url: nil)
+    endpoint = url || props[:upload_url]
+    unless endpoint
+      patch(error: "upload_url is required")
+      emit_error("upload_url is required")
+      return
+    end
+
+    unless @selected_file
+      patch(error: "No file selected")
+      emit_error("No file selected")
+      return
+    end
+
+    patch(uploading: true, error: nil)
+
+    Funicular::FileUpload.upload_with_formdata(
+      endpoint,
+      fields: fields || upload_fields,
+      file_field: file_field,
+      file: @selected_file
+    ) do |result|
+      handle_upload_result(result)
+    end
+  end
+
+  def handle_upload_result(result)
+    if result.nil?
+      patch(uploading: false, error: "Failed to parse response")
+      emit_error("Failed to parse response")
+      return
+    end
+
+    if result["error"] || result["errors"]
+      message = result["error"] || result["errors"].join(", ")
+      patch(uploading: false, error: message)
+      emit_error(message, result)
+      return
+    end
+
+    @selected_file = nil
+    uploaded_url = result[response_url_key] || props[:src]
+    patch(
+      preview_url: nil,
+      uploaded_url: uploaded_url,
+      uploading: false,
+      error: nil,
+      cache_buster: Time.now.to_i
+    )
+    emit_upload(result)
+  end
+
+  def render
+    div(class: container_class) do
+      render_image
+      render_error
+      div(class: controls_class) do
+        input(
+          type: "file",
+          id: input_id,
+          accept: props[:accept] || "image/*",
+          onchange: :handle_file_change,
+          class: input_class
+        )
+        if clearable?
+          button(type: "button", class: clear_button_class, onclick: -> { clear }) do
+            props[:clear_label] || "Clear"
+          end
+        end
+        if props[:show_upload_button]
+          button(
+            type: "button",
+            class: upload_button_class,
+            disabled: state.uploading || @selected_file.nil?,
+            onclick: -> { upload }
+          ) do
+            state.uploading ? uploading_label : upload_label
+          end
+        end
+      end
+    end
+  end
+
+  private
+
+  def render_image
+    source = image_src
+    if source
+      div(class: preview_container_class) do
+        img(src: source, alt: alt_text, class: image_class)
+      end
+    elsif props[:placeholder]
+      div(class: placeholder_class) do
+        props[:placeholder]
+      end
+    end
+  end
+
+  def render_error
+    return unless state.error && props[:show_error] != false
+
+    div(class: error_class) { state.error }
+  end
+
+  def image_src
+    source = state.preview_url || state.uploaded_url || props[:src]
+    return nil if source.nil? || source.to_s == ""
+    return source if source.to_s.start_with?("blob:", "data:")
+    return source unless props[:cache_bust]
+
+    separator = source.to_s.include?("?") ? "&" : "?"
+    "#{source}#{separator}t=#{state.cache_buster}"
+  end
+
+  def input_id
+    props[:input_id] || "funicular-image-uploader-input"
+  end
+
+  def file_field
+    props[:file_field] || "image"
+  end
+
+  def upload_fields
+    fields = props[:fields]
+    return fields.call if fields.respond_to?(:call)
+    fields || {}
+  end
+
+  def response_url_key
+    props[:response_url_key] || "image_url"
+  end
+
+  def clearable?
+    props[:clearable] && (state.preview_url || state.uploaded_url || props[:src])
+  end
+
+  def emit_select(file, preview_url)
+    callback = props[:on_select]
+    callback.call(file, preview_url) if callback
+  end
+
+  def emit_upload(result)
+    callback = props[:on_upload]
+    callback.call(result) if callback
+  end
+
+  def emit_error(message, result = nil)
+    callback = props[:on_error]
+    callback.call(message, result) if callback
+  end
+
+  def container_class
+    props[:container_class] || "funicular-image-uploader"
+  end
+
+  def preview_container_class
+    props[:preview_container_class] || "funicular-image-uploader__preview"
+  end
+
+  def image_class
+    props[:image_class] || "funicular-image-uploader__image"
+  end
+
+  def input_class
+    props[:input_class] || "funicular-image-uploader__input"
+  end
+
+  def controls_class
+    props[:controls_class] || "funicular-image-uploader__controls"
+  end
+
+  def clear_button_class
+    props[:clear_button_class] || "funicular-image-uploader__clear"
+  end
+
+  def upload_button_class
+    props[:upload_button_class] || "funicular-image-uploader__upload"
+  end
+
+  def placeholder_class
+    props[:placeholder_class] || "funicular-image-uploader__placeholder"
+  end
+
+  def error_class
+    props[:error_class] || "funicular-image-uploader__error"
+  end
+
+  def upload_label
+    props[:upload_label] || "Upload"
+  end
+
+  def uploading_label
+    props[:uploading_label] || "Uploading..."
+  end
+
+  def alt_text
+    props[:alt] || "Selected image"
+  end
+end

data/lib/image_uploader.rb

@@ -0,0 +1,7 @@
+module Funicular
+  module Plugins
+    module ImageUploader
+      Component = ImageUploaderComponent
+    end
+  end
+end

metadata

@@ -0,0 +1,41 @@
+--- !ruby/object:Gem::Specification
+name: funicular-image-uploader
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- HASUMI Hitoshi
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies: []
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- assets/image_uploader.css
+- lib/components/image_uploader_component.rb
+- lib/image_uploader.rb
+homepage: https://github.com/hasumikin/funicular-image-uploader
+licenses:
+- MIT
+metadata: {}
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '3.2'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 4.0.10
+specification_version: 4
+summary: Image upload component for Funicular
+test_files: []