عصر جديد لتحميل الملفات في Discourse

martin · 30 نوفمبر 2021، 3:41ص

ربما لاحظت خلال الأشهر العديدة الماضية العديد من الالتزامات المتعلقة بالتحميلات في Discourse core. كان هذا جزءًا من جهد شامل داخل core لاستبدال استخدامات jQuery file upload من قاعدة التعليمات البرمجية الخاصة بنا، كجزء من جهد أوسع نطاقًا لاستبدال استخدامات jQuery نفسها من قاعدة التعليمات البرمجية الخاصة بنا. jQuery file uploader هو مشروع قديم جدًا، وكان جزءًا من Discourse core منذ البداية تقريبًا. أعتقد أنني استخدمته طوال حياتي المهنية في مشاريع أخرى أيضًا. لكن حان الوقت لإنهاء استخدام Ol’ Reliable:

لقد استبدلنا jQuery file upload (وسنستبدل قريبًا أيضًا مكتبة أخرى، resumable.js) بمكتبة تسمى Uppy. هذه مكتبة تحميل أحدث بكثير، ويمكن توسيعها بسهولة باستخدام الإضافات وهي قادرة على التعامل مع جميع مسارات العمل المختلفة التي نواجهها. والأهم من ذلك، يتيح لنا ذلك إجراء تحميلات متعددة الأجزاء مباشرة إلى S3 من عميل Discourse، بدلاً من الاضطرار إلى إرسال ملفات كبيرة عبر واجهة برمجة التطبيقات الخاصة بنا.

يستخدم المنشئ الآن Uppy لجميع التحميلات، والعديد من الأماكن الأخرى في التطبيق تستخدمه (تحميلات الصور الرمزية، تحميلات خلفية الملف الشخصي، إلخ). سيتم التخلص من آخر العناصر المعلقة خلال الأسابيع القليلة القادمة. يجب أن يكون هذا تغييرًا غير مرئي إلى حد كبير لمعظم المستخدمين، ولكن مؤلفي المكونات الإضافية ومكونات السمات سيحتاجون إلى إجراء بعض التغييرات.

واجهة برمجة تطبيقات المكونات الإضافية

المعالجات المسبقة

تحتاج جميع المعالجات المسبقة للتحميل الآن إلى كتابتها كـ مكون إضافي لـ Uppy. هذه المكونات الإضافية سهلة الكتابة، وتستخدم سير عمل بسيط قائم على الوعود. يمكن للمعالج المسبق للتحميل تعديل ملف أو إضافة بيانات وصفية إليه قبل أن يقوم Uppy بتحميله إلى S3 أو إلى نقطة النهاية /uploads.json. لدينا بالفعل العديد من المعالجات المسبقة في core يمكنك استخدامها كمرجع عند كتابة المعالجات الخاصة بك:

يتم تسجيل المعالجات المسبقة للتحميل للمنشئ عبر 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؛ لا تزال تعمل كما كانت دائمًا مع تغيير طفيف. الآن عندما يطابق ملف امتدادًا مسجلاً لمعالج تحميل، سيتم إرسال جميع الملفات المطابقة معًا. في السابق، كان يتم إرسال ملف واحد فقط في كل مرة إلى معالج التحميل، ويتم الآن إرسال مصفوفة بدلاً من ذلك:

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 يتيح لنا أيضًا إجراء تحميلات متعددة الأجزاء مباشرة إلى S3 من واجهة المستخدم. لتمكين هذه الميزة، تحتاج إلى تعيين إعداد الموقع enable_direct_s3_uploads إلى true.

إذا كنت تستضيف معنا، فقد تم بالفعل تطبيق أذونات S3 ذات الصلة على الحاوية الخاصة بك. ومع ذلك، إذا كنت تستضيف ذاتيًا، فهناك العديد من الأذونات وقواعد CORS التي يجب إعدادها على الحاوية الخاصة بك لكي تعمل هذه الميزة.

بالنسبة لقواعد CORS، تحتاج فقط إلى تشغيل مهمة s3:ensure_cors_rules باستخدام rake s3:ensure_cors_rules. ستضيف القواعد التالية إلى الحاوية الخاصة بك طالما لديك أذونات S3:GetBucketCors و S3:PutBucketCors ممكّنة لأي مفتاح وصول وسري قمت بإعداده لبيانات اعتماد S3 الخاصة بك على مثيل Discourse الخاص بك.

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

بالنسبة للأذونات، ستحتاج إلى تمكين الأذونات التالية لأي مفتاح وصول وسري قمت بإعداده لبيانات اعتماد S3 الخاصة بك على مثيل Discourse الخاص بك.

{
    "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 core. أخبرني إذا كانت لديك أي أسئلة حول ما نشرته هنا!

sam · 30 نوفمبر 2021، 10:36م

تم تقسيم 5 مشاركات إلى موضوع جديد: Uppy not working on Firefox 68

martin · 21 ديسمبر 2021، 11:03م

itsgoneitsdone

مع هذين الالتزامين، لم يعد jQuery file uploader و resumable.js جزءًا من Discourse core:

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 · 23 ديسمبر 2021، 12:24ص

على صعيد آخر، تم تحديث وثائق واجهة برمجة التطبيقات (API) الآن بنقاط النهاية الجديدة للتحميل. انتقل إلى Discourse API Docs للاطلاع عليها.

(مُرسل بالنسخة إلى @mattdm، قد تكون مهتمًا بهذا)

mentalstring · 17 فبراير 2022، 11:11ص

بعد تمكين التحميل المباشر لـ S3، نتلقى تقارير من مستخدمين في الصين غير قادرين على تحميل الصور - يتوقف التحميل عند 0% وينتهي وقته.\n\nقد يكون الاعتقاد الأول هو أن S3 محظور في الصين، لكننا نعلم على وجه اليقين أن هذا ليس هو الحال - على الأقل ليس بالكامل: يمكن لمستخدمينا من الصين رؤية الصور المخزنة في S3 بشكل جيد (المخزن في منطقة eu-central-1 في حالتنا). ولكن، بطريقة ما، يبدو أن التحميل فقط هو الذي لا يعمل.\n\nمن الصعب تصحيح هذا الخطأ أثناء عدم التواجد خلف جدار الحماية العظيم (GFW)، ولكن بعض مستخدمينا في الصين ذكروا أن فرقًا واحدًا ربما يكون ذا صلة هو أن الصور يتم تحميلها باستخدام نقطة النهاية المزدوجة، ولكن التحميل يستخدم نقطة النهاية العادية (IPv4 فقط) (bucket-name.s3.dualstack.eu-central-1.amazonaws.com مقابل bucket-name.s3.eu-central-1.amazonaws.com). من بعض الاختبارات، نرى أن هذا هو الحال بالفعل ولكنني لست متأكدًا مما إذا كان هذا مقصودًا أو مطلوبًا لغرض التحميل.\n\nربما يكون الأكثر دلالة هو أن البعض أبلغ عن أن إضافة عنوان IP تم حله من اسم المضيف المزدوج إلى ملف المضيفين الخاص بهم (لاسم المضيف غير المزدوج) يتغلب تمامًا على المشكلة وتمكنوا من التحميل بهذا التغيير فقط.\n\nلست متأكدًا مما إذا كان فريق Discourse لديه شخص مقيم في الصين يمكنه المساعدة في تصحيح هذا الخطأ بشكل أفضل؟

RGJ · 19 يونيو 2025، 5:53م

تم تقسيم منشور إلى موضوع جديد: خطأ أثناء تهيئة S3: الإجراءات غير موجودة

الموضوع		الردود	مرات العرض
Uppy uploader breaking with multiple files drop onto composer Bug	14	2530	2 ديسمبر 2021
Faster (and smaller) uploads in Discourse with Rust, WebAssembly and MozJPEG \| Blog Blog	36	4886	13 مايو 2025
Broken Images and Their S3 URLs Support	33	4488	30 سبتمبر 2020
Secure Uploads Announcements secure-uploads	46	16703	24 يوليو 2025
User cannot use custom avatar with Amazon S3 Bug	42	6537	4 مايو 2015

عصر جديد لتحميل الملفات في Discourse

واجهة برمجة تطبيقات المكونات الإضافية

المعالجات المسبقة

معالجات التحميل

تحميلات S3 متعددة الأجزاء المباشرة

الموضوعات ذات الصلة