Dcat Admin Editor富文字 新增視訊本地上傳

效果：

新增程式碼後會出現紅圈裡面的按鈕：

程式碼實現選擇檔案功能：

選擇視訊檔案後自動上傳並回填地址：

點選確定儲存到富文字框：

程式碼實現：

app\Admin\bootstrap.php 加入以下內容：

use Dcat\Admin\Form;
Form\Field\Editor::resolving(function (Form\Field\Editor $editor) {
    $editor->options([
        'file_picker_types' => 'media',
        'file_picker_callback' => \Dcat\Admin\Support\JavaScript::make(<<<JS
            function file_picker_callback (callback, value, meta) {
                // 設定上傳地址為原富文字框圖片檔案上傳地址
                var upurl = opts.images_upload_url;
                var filetype = '';
                // 處理媒體型別檔案能選擇的檔案型別
                if (meta.filetype == 'media') {
                    filetype = '.mp4,.webm,.ogg'
                }
                //模擬出一個input用於新增本地檔案
                var input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', filetype);
                // 模擬點選file input
                input.click();
                input.onchange = function() {
                    // 檔案選擇後進行上傳
                    var file = this.files[0];
                    var xhr, formData;
                    console.log(file.name);
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open('POST', upurl);
                    xhr.onload = function() {
                        var json;
                        if (xhr.status != 200) {
                            failure('HTTP Error: ' + xhr.status);
                            return;
                        }
                        json = JSON.parse(xhr.responseText);
                        if (!json || typeof json.location != 'string') {
                            failure('Invalid JSON: ' + xhr.responseText);
                            return;
                        }
                        callback(json.location);
                    };
                    formData = new FormData();
                    formData.append('file', file, file.name );
                    xhr.send(formData);
                }
            }
        JS)
    ]);
});

本作品採用《CC 協議》，轉載必須註明作者和本文連結