Discourseにおけるファイルアップロードの新時代

martin · 2021 年 11 月 30 日午前 3:41

過去数ヶ月にわたり、Discourseコアのアップロードに関連する多くのコミットに気づいたかもしれません。これは、コードベースからのjQuery file uploadの使用を置き換えるためのコア内の全体的な取り組みの一環であり、さらに広範な、コードベースからのjQuery自体の使用を置き換えるための全体的な取り組みの一部です。jQuery file uploaderは非常に古いプロジェクトであり、ほぼ最初からDiscourseコアの一部でした。私も他のプロジェクトでキャリア全体でそれを使用してきたと思います。しかし、Ol’ Reliableを引退する時が来ました。

jQuery file upload（そしてまもなく別のライブラリであるresumable.jsも置き換えます）をUppyというライブラリに置き換えました。これは、プラグインで簡単に拡張でき、私たちが投げるさまざまなワークフローをすべて処理できる、はるかにモダンなアップロードライブラリです。重要なのは、これにより、大きなファイルをAPI経由で送信するのではなく、DiscourseクライアントからS3に直接マルチパートアップロードできるようになることです。

コンポーザーは現在すべてのアップロードにUppyを使用しており、アプリ内の他の多くの場所（アバターアップロード、プロファイル背景アップロードなど）でも使用されています。最後の数週間で、残りの部分も削除される予定です。これはほとんどのユーザーにとってはほとんど目に見えない変更になるはずですが、プラグインおよびテーマコンポーネントの作成者はいくつかの変更を行う必要があります。

プラグインAPI

事前処理プログラム

すべてのアップロード事前処理プログラムは、Uppyプラグインとして記述する必要があります。これらのプラグインは非常に簡単に記述でき、単純なPromiseベースのワークフローを使用します。アップロード事前処理プログラムは、UppyがファイルをS3または/uploads.jsonエンドポイントにアップロードする前に、ファイルを変更したり、メタデータを追加したりできます。すでにコアにいくつかの事前処理プログラムがあり、独自のものを記述する際の参考として使用できます。

コンポーザーのアップロード事前処理プログラムは、プラグインAPIを使用してapi.addComposerUploadPreProcessorを介して登録されます。

github.com/discourse/discourse

app/assets/javascripts/discourse/app/lib/plugin-api.js

666210120


      
          /**
           * Registers a pre-processor for file uploads in the form
           * of an Uppy preprocessor plugin.
           *
           * See https://uppy.io/docs/writing-plugins/ for the Uppy
           * documentation, but other examples of preprocessors in core
           * can be found in UppyMediaOptimization and UppyChecksum.
           *
           * Useful for transforming to-be uploaded files client-side.
           *
           * Example:
           *
           * api.addComposerUploadPreProcessor(UppyMediaOptimization, ({ composerModel, composerElement, capabilities, isMobileDevice }) => {
           *   return {
           *     composerModel,
           *     composerElement,
           *     capabilities,
           *     isMobileDevice,
           *     someOption: true,
           *     someFn: () => {},

This file has been truncated. show original

アップロードハンドラー

アップロードハンドラーはUppyプラグインとして記述されていません。それらは、マイナーな変更を加えて、これまでどおり機能します。ファイルがアップロードハンドラーに登録された拡張子に一致すると、一致するすべてのファイルが一度に送信されます。以前は一度に1つのファイルのみがアップロードハンドラーに送信されていましたが、現在は配列が送信されます。

github.com/discourse/discourse

app/assets/javascripts/discourse/app/lib/plugin-api.js

666210120


      
          /**
           * Registers a function to handle uploads for specified file types.
           * The normal uploading functionality will be bypassed if function returns
           * a falsy value.
           *
           * Example:
           *
           * api.addComposerUploadHandler(["mp4", "mov"], (files, editor) => {
           *   files.forEach((file) => {
           *     console.log("Handling upload for", file.name);
           *   });
           * })
           */
          addComposerUploadHandler(extensions, method) {
            addComposerUploadHandler(extensions, method);
          }

アップロードハンドラーによって処理されたファイルは、Uppyのアップロードパイプラインでさらに処理されません。事前処理プログラムは、アップロードハンドラーが呼び出される前に実行されます。

S3マルチパート直接アップロード

先ほど、Uppyの使用により、UIからS3への直接マルチパートアップロードも可能になると述べました。この機能を有効にするには、enable_direct_s3_uploadsサイト設定をtrueに設定する必要があります。

当社でホストされている場合、関連するS3権限はすでにバケットに適用されています。ただし、セルフホストしている場合は、これが機能するためにバケットに設定する必要があるいくつかの権限とCORSルールがあります。

CORSルールについては、s3:ensure_cors_rules rakeタスクをrake s3:ensure_cors_rulesで実行するだけで済みます。これにより、Discourseインスタンスに設定されているS3認証情報に使用するアクセスキーとシークレットキーにS3:GetBucketCorsおよびS3:PutBucketCors権限が有効になっている限り、バケットに次のルールが追加されます。

{
  "AllowedHeaders": [
    "Authorization",
    "Content-Disposition",
    "Content-Type"
  ],
  "AllowedMethods": [
    "GET",
    "HEAD",
    "PUT"
  ],
  "AllowedOrigins": [
    "*"
  ],
  "ExposeHeaders": [
    "ETag"
  ],
  "MaxAgeSeconds": 3000
}

権限については、Discourseインスタンスに設定されているS3認証情報に使用するアクセスキーとシークレットキーに、次の権限が有効になっている必要があります。

{
    "Sid": "YourSid",
    "Effect": "Allow",
    "Action": [
        "s3:PutObjectVersionAcl",
        "s3:PutObjectAcl",
        "s3:PutObject",
        "s3:GetObjectAcl",
        "s3:GetObject",
        "s3:DeleteObject",
        "s3:CreateMultipartUpload",
        "s3:CompleteMultipartUpload",
        "s3:AbortMultipartUpload"
    ],
    "Resource": [
        "YOUR_RESOURCE"
    ]
}

これは数ヶ月にわたるプロセスであり、まだ完了していません！jQuery file uploaderとresumable.jsをDiscourseコアから完全に削除する準備ができたときに、このトピックで投稿します。ここに投稿した内容について質問があればお知らせください！

sam · 2021 年 11 月 30 日午後 10:36

5件の投稿が新しいトピックに分割されました: Uppy not working on Firefox 68

martin · 2021 年 12 月 21 日午後 11:03

itsgoneitsdone

これらの2つのコミットにより、jQuery file uploaderとresumable.jsはDiscourseコアから削除されました。

github.com/discourse/discourse

DEV: Remove old backup uploader and resumable.js

main ← dev/remove-old-backup-uploader-and-resumable-js

opened 04:55AM - 20 Dec 21 UTC

martin-brennan

+2 -1297

Now that d5e380e5c14ac1d24f1f5f32d082fdbfbd1a15db has been committed there is n…othing in the codebase that uses either resumable.js or the old backup-uploader component. R.I.P resumable.js :skull: **Note: Not sure if we should merge this until the referenced commit has been floating around in the wild for a little bit, otherwise there will need to be 2 reverts instead of 1 if anything goes wrong.**

github.com/discourse/discourse

DEV: Drop jQuery file upload and old upload components

main ← dev/drop-jquery-file-uploader

opened 06:01AM - 21 Dec 21 UTC

martin-brennan

+0 -2194

This commit removes jQuery file uploader from Discourse, completing the transit…ion to Uppy. The image-uploader and UploadMixin components are also removed in this commit as they have already been replaced and are the only things using jQuery file upload. ``` .-'~~~`-. .' `. | R I P | | jquery | | file | | upload | | | \\| 2013-2021 |// ----------------- ```

既知のすべてのプラグインから、これらおよび古いUploadMixinへの参照をすべて削除するように最善を尽くしましたが、見落としたものや認識していないものがあるかもしれません。心配はいりません、移行プロセスは簡単です。ユースケースの99%は、非常に最小限の変更で、新しいUppyUploadMixinをそのまま置き換えることができます。例はこちらをご覧ください。

github.com/discourse/discourse

app/assets/javascripts/discourse/app/components/emoji-uploader.js

dc619d8c3

import Component from "@ember/component";
import UppyUploadMixin from "discourse/mixins/uppy-upload";
import { action } from "@ember/object";
import discourseComputed from "discourse-common/utils/decorators";
import { notEmpty } from "@ember/object/computed";

const DEFAULT_GROUP = "default";

export default Component.extend(UppyUploadMixin, {
  type: "emoji",
  uploadUrl: "/admin/customize/emojis",
  hasName: notEmpty("name"),
  hasGroup: notEmpty("group"),
  group: "default",
  emojiGroups: null,
  newEmojiGroups: null,
  tagName: null,
  preventDirectS3Uploads: true,

  didReceiveAttrs() {

This file has been truncated. show original

残りの1%については、Uppyのインスタンスを作成し、イベントに直接フックすることができます。例はこちらをご覧ください。

github.com/discourse/discourse

app/assets/javascripts/wizard/components/wizard-field-image.js

dc619d8c3

import Component from "@ember/component";
import { warn } from "@ember/debug";
import I18n from "I18n";
import { dasherize } from "@ember/string";
import discourseComputed from "discourse-common/utils/decorators";
import { getOwner } from "discourse-common/lib/get-owner";
import { getToken } from "wizard/lib/ajax";
import getUrl from "discourse-common/lib/get-url";
import Uppy from "@uppy/core";
import DropTarget from "@uppy/drop-target";
import XHRUpload from "@uppy/xhr-upload";

export default Component.extend({
  classNames: ["wizard-image-row"],
  uploading: false,

  @discourseComputed("field.id")
  previewComponent(id) {
    const componentName = `image-preview-${dasherize(id)}`;
    const exists = getOwner(this).lookup(`component:${componentName}`);

This file has been truncated. show original

プラグインの変更についても、このトピックのOPで説明しました。次のリリースまでまだ数週間ありますので、問題が発生した場合はここにご報告ください。ワイルドな旅でした！

martin · 2021 年 12 月 23 日午前 12:24

ちなみに、APIドキュメントが新しいアップロードエンドポイントで更新されました。Discourse API Docs を参照してください。

(cc @mattdm、こちらにご興味があるかもしれません)

mentalstring · 2022 年 2 月 17 日午前 11:11

ダイレクトS3アップロードを有効にした後、中国のユーザーから画像がアップロードできないという報告を受けています。アップロードは0%でスタックし、タイムアウトします。

最初に考えられるのは、S3が中国でブロックされているのではないかということですが、少なくとも完全にブロックされているわけではないことは事実です。中国のユーザーはS3に保存されている画像（この場合、バケットはeu-central-1リージョンにあります）を問題なく見ることができます。しかし、なぜかアップロードだけが機能しないようです。

GFW（Great Firewall）の背後にいないとデバッグが難しいですが、中国の一部のユーザーは、おそらく関連する違いとして、画像はデュアルスタックエンドポイントを使用してロードされているのに対し、アップロードは通常の（IPv4のみの）エンドポイント（bucket-name.s3.dualstack.eu-central-1.amazonaws.com 対 bucket-name.s3.eu-central-1.amazonaws.com）を使用していると述べています。いくつかのテストから、確かにそのようになっているようですが、それが意図されたものか、アップロードに必要なものかはわかりません。

さらに示唆的なのは、デュアルスタックホスト名から解決されたIPアドレスをホストファイル（非デュアルスタック名ホスト名用）に追加することで問題が完全に解決し、その変更だけでアップロードできるようになったと報告した人もいることです。

Discourseチームには、この問題をより詳しくデバッグできる中国在住の担当者がいるでしょうか？

RGJ · 2025 年 6 月 19 日午後 5:53

投稿が新しいトピックに分割されました: S3設定中にエラーが発生しました: アクションが存在しません

トピック		返信	表示
Uppy uploader breaking with multiple files drop onto composer Bug	14	2515	2021 年 12 月 2 日
Faster (and smaller) uploads in Discourse with Rust, WebAssembly and MozJPEG \| Blog Blog	36	4883	2025 年 5 月 13 日
Broken Images and Their S3 URLs Support	33	4485	2020 年 9 月 30 日
Secure Uploads Announcements secure-uploads	46	16685	2025 年 7 月 24 日
User cannot use custom avatar with Amazon S3 Bug	42	6535	2015 年 5 月 4 日

Discourseにおけるファイルアップロードの新時代

プラグインAPI

事前処理プログラム

アップロードハンドラー

S3マルチパート直接アップロード

関連トピック