56530

How to show uploading progress in CKEditor?

Question:

I'm adding a plugin that allow user to upload and display video to CKEditor. The file's size may be big so I'd like to display the upload progress.

Currently I'm using the default FileBrowser API to show the upload button, but the document doesn't mention about showing the progress.

How can I achieve this? Or do I need to write my own upload plugin?

Answer1:

You can trigger the event emitter to check if the upload is in progress

a sample code for s3 upload using 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}); }); }

And in the code block where you want to call this function you can use response.write() when the progress state is active and when the end state is achieved you can then pass res.end()

s3uploads(fileUrl, function (err, uploadResult) { if(err){ res.send("error"); } if(uploadResult.type === 'progress'){ var html = "

Please wait its uploading to server

" ; 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(); } });

Recommend

  • Getting NULL value parsing JSON string
  • Using the lock statement
  • using graphicspath in latex/sweave
  • paraview python script : Delete(renderView1) does not free memory
  • Trying to get a memory stream from a pdfstamper into a pdfreader but getting: “PDF startxref not fou
  • How to create a specific URL for a user during registration?
  • Django subprocess
  • oracle duplicate rows based on a single column
  • Implement ImageSearchDLL.dll in C#
  • ValueError while using Scikit learn. Number of features of model don't match that of input
  • Email Intent Email Chooser
  • How to delete the symlink along with the source directory
  • C#: Using FileSystemWatcher to watch for changes to files
  • Display Local HTML file from documents directory in a UIWebView on iPhone
  • I want to trace logs using a Macro multi parameter always null. problem c++ windows
  • how to get range in excel sheet using openxml and c#
  • Unable to add the file iOS application bundle
  • Reading file from C drive from Android Emulator
  • Python 2.7 on Windows — Too Many Open Files
  • Inno Setup Search for specifc file on a CD, retrieve exact filepath and return value to [Files]-Sect
  • Find the associated program to open a file using Java
  • K-means in OpenCV's Python interface
  • C++ slows over time reading 70,000 files
  • Weighted round robin dns between 2 Cloudfront distributions
  • Can I monitor the progress of an S3 download using the AWS SDK?
  • Google datalab : how to import pickle
  • The symbol you provided is not a function
  • Python: Split a String Field into 3 Separate Fields using Lambda
  • how can I compare dates in array to find the earliest one?
  • Wrap C++ function using Boost Reflect or another C++ reflection library
  • Divide a $1 by 3 and adjusting 1 cent
  • android Navigation Bar hiding and persantage of usable screen overlap
  • How do I shift the decimal place in Python?
  • Code in Job's Script Block after Start-Process Does not Execute
  • Rails Find when some params will be blank
  • retrieve vertices with no linked edge in arangodb
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Change div Background jquery
  • apache spark aggregate function using min value
  • Can't mass-assign protected attributes when import data from csv file