CKEditorでアップロードの進行状況を表示するにはどうすればよいですか？

Question

私は、ユーザーがビデオをアップロードしてCKEditorに表示できるようにするプラグインを追加しています。ファイルのサイズが大きいので、アップロードの進行状況を表示したいことがあります。

現在のところ、デフォルトのFileBrowser APIを使用してアップロードボタンを表示していますが、このドキュメントでは進行状況の表示については触れていません。

どうすればこの問題を解決できますか？または自分のアップロードプラグインを作成する必要がありますか？

Answer 1

あなたは、アップロードが進行

にnodejs

function s3uploads(filePath, callback){ 

var localFile = filePath; 

    var onlyFileName = localFile.split("/"); 
    var fname = (onlyFileName[onlyFileName.length - 1]); 

    var params = { 
     localFile: localFile, 

     s3Params: { 
      Bucket: "ss3bucket", 
      Key: "folder-name/" + fname, 
      ACL: 'public-read', 
      CacheControl: 'max-age=31536000', 
      Expires: new Date || 'Wed Dec 31 2099 16:00:00 GMT-0800 (PST)' 
      || 123456789 
     } 
    }; 

    var uploader = client.uploadFile(params); 
      uploader.on('error', function (err) { 
       console.error("unable to upload:", err.stack); 
       return callback(err,null) 
      }); 
      uploader.on('progress', function() { 
       console.log("progress", uploader.progressMd5Amount, 
        uploader.progressAmount, uploader.progressTotal); 
       var percentCal = ((parseInt(uploader.progressAmount) * 100)/parseInt(uploader.progressTotal)).toFixed(2); 
       var percent = percentCal.toString(); 
       return callback(null,{type : 'progress', percent: percent, url : null}); 
      }); 
      uploader.on('end', function() { 
       console.log("done uploading"); 

       return callback(null,{type : 'end', percent: '100', url : 'https://s3.us-east-2.amazonaws.com/s3bucket/folder-name/' + fname}); 

      }); 
} 

そして、あなたはこの機能 を呼び出したいコードブロック内を使用してS3のアップロードのためのサンプル・コードであるかどうかを確認するためにイベント・エミッターをトリガすることができます進行状況がアクティブで、終了状態になったらresponse.write（）を使用してres.end（）を渡すことができます。

s3uploads(fileUrl, function (err, uploadResult) { 
       if(err){ 
        res.send("error"); 
       } 

       if(uploadResult.type === 'progress'){ 
        var html = "<p>Please wait its uploading to server </p> <p></p>" ; 

        res.write(html); 

       } else { 
        fileUrl = uploadResult.url; 

        res.write("<script type='text/javascript'>\ 
(function(){var d=document.domain;while (true){try{var A=window.parent.document.domain;break;}catch(e) {};d=d.replace(/.*?(?:\.|$)/,'');if (d.length==0) break;try{document.domain=d;}catch (e){break;}}})();\ 
window.parent.CKEDITOR.tools.callFunction('" + CKEcallback + "','" + fileUrl + "', '" + msg + "');\ 
</script>"); 
        res.end(); 
       } 

      });