能否无需浏览器文件输入框，在Rails应用中使用ActiveStorage上传文件？

Absolutely feasible— I’ve tackled this exact scenario a few times for Rails applications, so let’s break down how to make it work, whether you’re using drag-and-drop or a custom file picker. The key here is working with browser security rules instead of trying to bypass them (which is why the hidden input trick gets blocked— browsers block programmatic file assignment to prevent malicious behavior).

Core Approach: Use the Browser’s File API + ActiveStorage Direct Uploads #

ActiveStorage’s direct upload functionality is built to handle this use case. Instead of relying on the native <input type="file"> to trigger the upload flow, you’ll:

• Capture file objects via your custom UI (drag-and-drop, styled custom picker, etc.) using the browser’s File API
• Pass those file objects to ActiveStorage’s direct upload handler to send them to your storage service (S3, local disk, etc.)
• Attach the resulting blob to your Rails model once the upload completes successfully

Drag-and-Drop Implementation Example #

Here’s a practical, working example using Stimulus (Rails’ default JS framework), but you can adapt this to vanilla JS or any other framework too:

Frontend Setup #

First, add a drop zone and hidden field to your view to store the uploaded blob ID:

<div data-controller="file-upload" data-file-upload-url-value="<%= rails_direct_uploads_url %>">
  <div data-file-upload-target="dropzone" class="border-2 border-dashed p-8 text-center cursor-pointer">
    Drop files here or click to select
  </div>
  <%= hidden_field_tag 'attachment_blob_id', nil, id: 'attachment-blob-id' %>
</div>

Then create the Stimulus controller to handle drag events and uploads:

import { Controller } from "@hotwired/stimulus"
import { DirectUpload } from "@rails/activestorage"

export default class extends Controller {
  static targets = ["dropzone"]
  static values = { url: String }

  connect() {
    this.dropzoneTarget.addEventListener("dragover", this.handleDragOver.bind(this))
    this.dropzoneTarget.addEventListener("drop", this.handleDrop.bind(this))
    this.dropzoneTarget.addEventListener("click", this.triggerFilePicker.bind(this))
  }

  handleDragOver(event) {
    event.preventDefault()
    this.dropzoneTarget.classList.add("bg-gray-100")
  }

  handleDrop(event) {
    event.preventDefault()
    this.dropzoneTarget.classList.remove("bg-gray-100")
    const files = Array.from(event.dataTransfer.files)
    files.forEach(file => this.startUpload(file))
  }

  triggerFilePicker() {
    // Create a temporary file input (this is allowed because the user initiated the click)
    const tempInput = document.createElement('input')
    tempInput.type = 'file'
    tempInput.multiple = false // Adjust for multiple files if needed

    tempInput.addEventListener('change', (e) => {
      if (e.target.files.length > 0) {
        this.startUpload(e.target.files[0])
      }
      // Clean up the temporary input after use
      tempInput.remove()
    })

    tempInput.click()
  }

  startUpload(file) {
    const upload = new DirectUpload(file, this.urlValue)

    upload.create((error, blob) => {
      if (error) {
        // Handle upload errors (e.g., show a warning to the user)
        console.error(`Failed to upload ${file.name}:`, error)
        this.dropzoneTarget.innerHTML += `<p class="text-red-500 mt-2">Failed to upload ${file.name}</p>`
      } else {
        // Store the blob ID so Rails can attach it to the model
        document.getElementById('attachment-blob-id').value = blob.id
        this.dropzoneTarget.innerHTML += `<p class="text-green-500 mt-2">Successfully uploaded ${file.name}</p>`
      }
    })
  }
}

Backend Controller Handling #

When submitting the form, attach the uploaded blob to your model like this:

def create
  @post = Post.new(post_params)

  if params[:attachment_blob_id].present?
    blob = ActiveStorage::Blob.find(params[:attachment_blob_id])
    @post.attach(blob)
  end

  if @post.save
    redirect_to @post, notice: "Post created successfully."
  else
    render :new
  end
end

private

def post_params
  params.require(:post).permit(:title, :content)
end

Why the "Hidden Input + Set File" Trick Is Blocked #

You’re correct— browsers block programmatic assignment of files to a hidden <input type="file"> (e.g., input.files = someFileObject) as a security measure. This prevents malicious scripts from accessing and exfiltrating files from a user’s device without their explicit consent. The workaround we use above (creating a temporary input on user click) is allowed because the user initiates the file selection directly, which counts as explicit consent.

Custom File Pickers (Non-Drag-and-Drop) #

If you’re using a styled custom button instead of drag-and-drop, the same logic applies:

• When the user clicks your custom button, create a temporary file input element programmatically
• Trigger its click event to open the system file dialog
• Listen for the change event on the input, grab the selected file(s), and pass them to ActiveStorage’s direct upload handler

Key Tips for Success #

• Ensure ActiveStorage is properly set up in your Rails app (run rails active_storage:install and migrate your database)
• Include ActiveStorage’s JS in your asset pipeline or importmap: import "@rails/activestorage"
• Add validation for file types/sizes both on the frontend (before upload) and backend (in your model)
• For multiple files, collect multiple blob IDs and attach them all to your model using @post.attach(blob_ids: [id1, id2])

This approach is fully compliant with browser security standards and integrates seamlessly with all of ActiveStorage’s features, including previews, variant generation, and cloud storage integration.

内容的提问来源于stack exchange，提问作者Matt