RichTextEditor Demo
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";
4. function rte_file_upload_handler(file, callback, optionalIndex, optionalFiles) {
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. }
13. var uploadcancelled = false;
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");
18. var line1 = append(dialoginner, "div", "text-align:center;font-size:1.2em;margin:0.5em;");
19. line1.innerText = "Uploading...";
21. var totalsize = file.size;
22. var sentsize = 0;
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. }
35. var line2 = append(dialoginner, "div", "text-align:center;font-size:1.0em;margin:0.5em;");
36. line2.innerText = "0%";
38. var progressbar = append(dialoginner, "div", "border:solid 1px gray;margin:0.5em;");
39. var progressbg = append(progressbar, "div", "height:12px");
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. }
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 + "%";
89. progressbg.style.cssText = "background-color:green;width:" + (percent * progressbar.offsetWidth / 100) + "px;height:12px;";
90. }
91. xh.send(file);
92. }