ここにあるs3を使用したアクティブストレージの例の作業バージョンがあります：
https://edgeguides.rubyonrails.org/active_storage_overview.html
フォームへの入力が終了したときではなく、ユーザーがアップロードするファイルを選択した直後にファイルのアップロードを実行できるようにしたいと思います。実際、私の場合、起動するオンドロップイベントを持つwysiwygエディターがあります
var myCodeMirror = CodeMirror.fromTextArea(post_body, {
lineNumbers: true,
dragDrop: true
});
myCodeMirror.on('drop', function(data, e) {
var file;
var files;
// Check if files were dropped
files = e.dataTransfer.files;
if (files.length > 0) {
e.preventDefault();
e.stopPropagation();
file = files[0];
console.log('File: ' + file.name);
console.log('File: ' + file.type);
return false;
}
});
ファイルドロップがこのイベントをトリガーするので、これを何らかの方法でアクティブストレージに送信して、ファイルをS3にすぐにアップロードし始めることができますか？
Active Storageは、DirectUploadクライアント側から直接ファイルのアップロードをトリガーするために使用できるJavaScriptクラスを公開します。
これを利用して、サードパーティのプラグイン（Uppy、Dropzoneなど）または独自のカスタムJSコードと統合できます。
DirectUpload最初に行う必要があるのは、AWSS3が直接アップロードを処理するように設定されていることを確認することです。これには、CORS構成が適切に設定されていることを確認する必要があります。
次に、DirectUploadクラスのインスタンスをインスタンス化し、アップロードするファイルとアップロードURLを渡します。
import { DirectUpload } from "activestorage"
// your form needs the file_field direct_upload: true, which
// provides data-direct-upload-url
const input = document.querySelector('input[type=file]')
const url = input.dataset.directUploadUrl
const upload = new DirectUpload(file, url)
upload.create((error, blob) => {
// handle errors OR persist to the model using 'blob.signed_id'
})
ここで完全なドキュメントを参照してください：https：//edgeguides.rubyonrails.org/active_storage_overview.html#integrating-with-libraries-or-frameworks
このDirectUpload#createメソッドはS3へのアップロードを開始し、エラーまたはアップロードされたファイルBLOBを返します。
エラーがないと仮定すると、最後のステップは、アップロードされたファイルをモデルに永続化することです。これを行うblob.signed_idには、ページのどこかにある非表示フィールドに配置するか、AJAXリクエストを使用してモデルを更新します。
上記の場合、ドロップで直接アップロードを開始するには、上記のコードをdropハンドラーに配置するだけです。
このようなもの：
myCodeMirror.on('drop', function(data, e) {
// Get the file
var file = e.dataTransfer.files[0];
// You need a file input somewhere on the page...
const input = document.querySelector('input[type=file]')
const url = input.dataset.directUploadUrl
// Instantiate the DirectUploader object
const upload = new DirectUpload(file, url)
// Upload the file
upload.create((error, blob) => { ... })
});
アセットパイプラインを使用していて、JavaScriptバンドラーツールを使用していない場合は、次のDirectUploadようなクラスのインスタンスを作成します
const upload = new ActiveStorage.DirectUpload(file, url)
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加