Documentation

Upload files

Developer must write custom uploading handler to upload files.

Syntax:

Or

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:

var uploadhandlerpath = "/imageupload.ashx";


function rte_file_upload_handler(file, callback, optionalIndex, optionalFiles) {

    function append(parent, tagname, csstext) {
        var tag = parent.ownerDocument.createElement(tagname);
        if (csstext) tag.style.cssText = csstext;
        parent.appendChild(tag);
        return tag;
    }

    var uploadcancelled = false;

    var dialogouter = append(document.body, "div", "display:flex;align-items:center;justify-content:center;z-index:2147483646;position:fixed;inset:0;padding:16px;background-color:rgba(15,23,42,0.28)");
    dialogouter.setAttribute("role", "dialog");
    dialogouter.setAttribute("aria-modal", "true");
    var dialoginner = append(dialogouter, "div", "box-sizing:border-box;min-width:260px;max-width:calc(100vw - 32px);padding:16px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;box-shadow:0 16px 40px rgba(15,23,42,.2)");

    var line1 = append(dialoginner, "div", "margin:0 0 10px;color:#172033;font:700 15px/1.3 Aptos,Segoe UI,sans-serif;");
    line1.id = "rte-upload-progress-title-" + Date.now();
    dialogouter.setAttribute("aria-labelledby", line1.id);
    line1.innerText = "Uploading...";

    var totalsize = file.size;
    var sentsize = 0;

    if (optionalFiles && optionalFiles.length > 1) {
        totalsize = 0;
        for (var i = 0; i < optionalFiles.length; i++) {
            totalsize += optionalFiles[i].size;
            if (i < optionalIndex) sentsize = totalsize;
        }
        console.log(totalsize, optionalIndex, optionalFiles)
        line1.innerText = "Uploading..." + (optionalIndex + 1) + "/" + optionalFiles.length;
    }


    var line2 = append(dialoginner, "div", "margin:0 0 8px;color:#52657e;font:600 12px/1.3 Aptos,Segoe UI,sans-serif;");
    line2.innerText = "0%";

    var progressbar = append(dialoginner, "div", "height:8px;overflow:hidden;border-radius:4px;background:#e7eef7;");
    var progressbg = append(progressbar, "div", "width:0;height:100%;border-radius:inherit;background:#2487e8;transition:width 120ms ease;");

    var line3 = append(dialoginner, "div", "display:flex;justify-content:flex-end;margin-top:14px;");
    var btn = append(line3, "button");
    btn.style.cssText = "min-height:32px;padding:7px 11px;border:1px solid #bdd0e6;border-radius:7px;background:#fff;color:#315277;font:700 12px/1 Aptos,Segoe UI,sans-serif;cursor:pointer;";
    btn.innerText = "Cancel";
    btn.onclick = function () {
        uploadcancelled = true;
        xh.abort();
    }

    var xh = new XMLHttpRequest();
    xh.open("POST", uploadhandlerpath + "?name=" + encodeURIComponent(file.name) + "&type=" + encodeURIComponent(file.type) + "&size=" + file.size, true);
    xh.onload = xh.onabort = xh.onerror = function (pe) {
        console.log(pe);
        console.log(xh);
        dialogouter.remove();
        if (pe.type == "load") {
            if (xh.status != 200) {
                console.log("uploaderror", pe);
                if (xh.responseText.startsWith("ERROR:")) {
                    callback(null, "http-error-" + xh.responseText.substring(6));
                }
                else {
                    callback(null, "http-error-" + xh.status);
                }
            }
            else if (xh.responseText.startsWith("READY:")) {
                console.log("File uploaded to " + xh.responseText.substring(6));
                callback(xh.responseText.substring(6));
            }
            else {
                callback(null, "http-error-" + xh.responseText);
            }
        }
        else if (uploadcancelled) {
            console.log("uploadcancelled", pe);
            callback(null, "cancelled");
        }
        else {
            console.log("uploaderror", pe);
            callback(null, pe.type);
        }
    }
    xh.upload.onprogress = function (pe) {
        console.log(pe);
        //pe.total
        var percent = totalsize ? Math.floor(100 * (sentsize + pe.loaded) / totalsize) : 0;
        line2.innerText = percent + "%";

        progressbg.style.cssText = "width:" + percent + "%";
    }
    xh.send(file);
}