Update TinyMCE Editor to support multiple files and progress #19

New Issue

2023-03-29T11:44:00Z

nomadjimbob commented

2023-03-29 11:44:00 +00:00

(Migrated from github.com)

Example code:

onChange: function (dialogApi, details) {
    if (details.name == "dropzone") {
        const files = dialogApi.getData().dropzone || [];
        if (files && files.length > 0) {
            let formData = new FormData();
            for (let i = 0; i < files.length; i++) {
                formData.append("file", files[i]);
            }

            const xhr = new XMLHttpRequest();
            xhr.open("POST", "/media");

            xhr.upload.addEventListener("progress", function(event) {
                const percent = (event.loaded / event.total) * 100;
                // Update the progress bar
                // You can use a library like ProgressBar.js to create a progress bar
            });

            xhr.onreadystatechange = function() {
                if (this.readyState === XMLHttpRequest.DONE) {
                    if (this.status === 200) {
                        input.value = "";
                        const response = JSON.parse(this.responseText);
                        const data = response.data;

                        if (data.length > 0) {
                            const urls = data.map((medium) => medium.url);
                            if (gallery == false) {
                                callback(urls);
                                dialog.close();
                            } else {
                                selected.push(...urls);
                                dialogApi.showTab("gallery");
                            }
                        } else {
                            alert("The server responded with an unknown error");
                        }
                    } else {
                        input.value = "";
                        alert("An unexpected error occurred uploading the file to the server.");
                    }
                }
            };

            xhr.send(formData);
        }
    }
}

Example code: ```js onChange: function (dialogApi, details) { if (details.name == "dropzone") { const files = dialogApi.getData().dropzone || []; if (files && files.length > 0) { let formData = new FormData(); for (let i = 0; i < files.length; i++) { formData.append("file", files[i]); } const xhr = new XMLHttpRequest(); xhr.open("POST", "/media"); xhr.upload.addEventListener("progress", function(event) { const percent = (event.loaded / event.total) * 100; // Update the progress bar // You can use a library like ProgressBar.js to create a progress bar }); xhr.onreadystatechange = function() { if (this.readyState === XMLHttpRequest.DONE) { if (this.status === 200) { input.value = ""; const response = JSON.parse(this.responseText); const data = response.data; if (data.length > 0) { const urls = data.map((medium) => medium.url); if (gallery == false) { callback(urls); dialog.close(); } else { selected.push(...urls); dialogApi.showTab("gallery"); } } else { alert("The server responded with an unknown error"); } } else { input.value = ""; alert("An unexpected error occurred uploading the file to the server."); } } }; xhr.send(formData); } } } ```

nomadjimbob commented

2023-07-12 03:34:16 +00:00

(Migrated from github.com)

completed under the new tiptap package

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: STEMMechanics/Website#19