ActionText/Trix无法上传嵌入文件，进度条无进展问题排查

针对你遇到的ActionText/Trix无法处理嵌入文件上传（进度条无进展，但图片显示正常、ActiveStorage常规附件可正常上传）的问题，可尝试以下排查和解决步骤：

1. 确认Importmaps配置与JS引入顺序 #

检查 config/importmap.rb 是否包含正确的依赖声明：

pin "trix"
pin "@rails/actiontext", to: "actiontext.js"
pin "@rails/activestorage", to: "activestorage.js"

同时确保 app/javascript/application.js 中的引入顺序正确：

import "@rails/activestorage"
import "trix"
import "@rails/actiontext"

2. 验证ActionText路由挂载 #

升级到Rails 7后，需确保 config/routes.rb 手动挂载ActionText引擎：

Rails.application.routes.draw do
  # 其他路由...
  mount ActionText::Engine => "/rails/action_text"
end

3. 自定义Trix文件上传逻辑 #

尝试覆盖默认的Trix上传处理，确保ActiveStorage Direct Upload正确触发：

import { DirectUpload } from "@rails/activestorage"

document.addEventListener("trix-file-accept", function(event) {
  const attachment = event.attachment
  if (attachment.file) {
    event.preventDefault()
    uploadFile(attachment)
  }
})

function uploadFile(attachment) {
  const upload = new DirectUpload(attachment.file, "/rails/active_storage/direct_uploads", window)
  upload.create((error, blob) => {
    if (error) {
      console.error("文件上传失败:", error)
    } else {
      attachment.setAttributes({
        url: blob.url,
        href: blob.url
      })
    }
  })
}

将这段代码添加到 app/javascript/application.js 或单独的Trix配置文件中。

4. 检查S3桶CORS配置 #

确保S3桶的CORS规则允许你的应用域名发起POST/PUT请求，示例配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>https://your-app-domain.com</AllowedOrigin>
    <AllowedOrigin>http://localhost:3000</AllowedOrigin> <!-- 本地开发环境 -->
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

5. 清理应用缓存 #

执行以下命令清理缓存，避免旧配置干扰：

rails tmp:clear

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