Home   Pricing

Upload files

Developer must write custom uploading handler to upload files.

Syntax:

window.rte_file_upload_handler=function(file, callback, optionalIndex, optionalFiles) {...}
Or:
rteconfig.file_upload_handler=function(file, callback, optionalIndex, optionalFiles) {...}
file

Type: String

a dom File object which contains name/size/type , works with XHR/Blob API

callback

Type: Function callback(url,errormsg)

Developer shall invoke callback when file being uploaded or error occursed.


Developer shall use XMLHttpRequest to upload files to server , and return the path of the file.

Please check our intergration demos from downloaded packages.

Template Javascript Code:

  1. var uploadhandlerpath = "/imageupload.ashx";  
  2.   
  3.   
  4. function rte_file_upload_handler(file, callback, optionalIndex, optionalFiles) {  
  5.   
  6.     function append(parent, tagname, csstext) {  
  7.         var tag = parent.ownerDocument.createElement(tagname);  
  8.         if (csstext) tag.style.cssText = csstext;  
  9.         parent.appendChild(tag);  
  10.         return tag;  
  11.     }  
  12.   
  13.     var uploadcancelled = false;  
  14.   
  15.     var dialogouter = append(document.body, "div", "display:flex;align-items:center;justify-content:center;z-index:999999;position:fixed;left:0px;top:0px;width:100%;height:100%;background-color:rgba(128,128,128,0.5)");  
  16.     var dialoginner = append(dialogouter, "div", "background-color:white;border:solid 1px gray;border-radius:15px;padding:15px;min-width:200px;box-shadow:2px 2px 6px #7777");  
  17.   
  18.     var line1 = append(dialoginner, "div", "text-align:center;font-size:1.2em;margin:0.5em;");  
  19.     line1.innerText = "Uploading...";  
  20.   
  21.     var totalsize = file.size;  
  22.     var sentsize = 0;  
  23.   
  24.     if (optionalFiles && optionalFiles.length > 1) {  
  25.         totalsize = 0;  
  26.         for (var i = 0; i < optionalFiles.length; i++) {  
  27.             totalsize += optionalFiles[i].size;  
  28.             if (i < optionalIndex) sentsize = totalsize;  
  29.         }  
  30.         console.log(totalsize, optionalIndex, optionalFiles)  
  31.         line1.innerText = "Uploading..." + (optionalIndex + 1) + "/" + optionalFiles.length;  
  32.     }  
  33.   
  34.   
  35.     var line2 = append(dialoginner, "div", "text-align:center;font-size:1.0em;margin:0.5em;");  
  36.     line2.innerText = "0%";  
  37.   
  38.     var progressbar = append(dialoginner, "div", "border:solid 1px gray;margin:0.5em;");  
  39.     var progressbg = append(progressbar, "div", "height:12px");  
  40.   
  41.     var line3 = append(dialoginner, "div", "text-align:center;font-size:1.0em;margin:0.5em;");  
  42.     var btn = append(line3, "button");  
  43.     btn.className = "btn btn-primary";  
  44.     btn.innerText = "cancel";  
  45.     btn.onclick = function () {  
  46.         uploadcancelled = true;  
  47.         xh.abort();  
  48.     }  
  49.   
  50.     var xh = new XMLHttpRequest();  
  51.     xh.open("POST", uploadhandlerpath + "?name=" + encodeURIComponent(file.name) + "&type=" + encodeURIComponent(file.type) + "&size=" + file.size, true);  
  52.     xh.onload = xh.onabort = xh.onerror = function (pe) {  
  53.         console.log(pe);  
  54.         console.log(xh);  
  55.         dialogouter.parentNode.removeChild(dialogouter);  
  56.         if (pe.type == "load") {  
  57.             if (xh.status != 200) {  
  58.                 console.log("uploaderror", pe);  
  59.                 if (xh.responseText.startsWith("ERROR:")) {  
  60.                     callback(null, "http-error-" + xh.responseText.substring(6));  
  61.                 }  
  62.                 else {  
  63.                     callback(null, "http-error-" + xh.status);  
  64.                 }  
  65.             }  
  66.             else if (xh.responseText.startsWith("READY:")) {  
  67.                 console.log("File uploaded to " + xh.responseText.substring(6));  
  68.                 callback(xh.responseText.substring(6));  
  69.             }  
  70.             else {  
  71.                 callback(null, "http-error-" + xh.responseText);  
  72.             }  
  73.         }  
  74.         else if (uploadcancelled) {  
  75.             console.log("uploadcancelled", pe);  
  76.             callback(null, "cancelled");  
  77.         }  
  78.         else {  
  79.             console.log("uploaderror", pe);  
  80.             callback(null, pe.type);  
  81.         }  
  82.     }  
  83.     xh.upload.onprogress = function (pe) {  
  84.         console.log(pe);  
  85.         //pe.total  
  86.         var percent = Math.floor(100 * (sentsize + pe.loaded) / totalsize);  
  87.         line2.innerText = percent + "%";  
  88.   
  89.         progressbg.style.cssText = "background-color:green;width:" + (percent * progressbar.offsetWidth / 100) + "px;height:12px;";  
  90.     }  
  91.     xh.send(file);  
  92. }