GetmeUK / ContentTools

A JS library for building WYSIWYG editors for HTML content.
http://getcontenttools.com
MIT License
3.95k stars 395 forks source link

Images Upload Dont Working #434

Closed zoinho3d closed 7 years ago

zoinho3d commented 7 years ago

Hello. First of all, congratulations on the excellent work.

I'm trying to enable image upload and I've already followed the tutorial steps (http://getcontenttools.com/tutorials/handling-image-uploads) but I was not successful.

I researched and got to this code, which sends the image to the folder specified in PHP, but the dialog box freezes 100% and does not return the INSERT button, leaving only the CANCEL button as an option.

Could someone please help me see where I'm going wrong? This is my code.

window.addEventListener('load', function() { var editor; });

editor = ContentTools.EditorApp.get(); editor.init('*[data-editable]', 'data-name');

editor.addEventListener('saved', function (ev) { var name, payload, regions, xhr;

// Check that something changed
regions = ev.detail().regions;
if (Object.keys(regions).length == 0) {
    return;
}

// Set the editor as busy while we save our changes
this.busy(true);

// Collect the contents of each region into a FormData instance
payload = new FormData();
for (name in regions) {
    if (regions.hasOwnProperty(name)) {
        payload.append(name, regions[name]);
    }
}

// Send the update content to the server to be saved
function onStateChange(ev) {
    // Check if the request is finished
    if (ev.target.readyState == 4) {
        editor.busy(false);
        if (ev.target.status == '200') {
            // Save was successful, notify the user with a flash
            new ContentTools.FlashUI('ok');
        } else {
            // Save failed, notify the user with a flash
            new ContentTools.FlashUI('no');
        }
    }
};

xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', onStateChange);
xhr.open('POST', 'atualiza_pag_vitalline');
xhr.send(payload);

});

editor.addEventListener('start', function (ev) { var _this = this;

// Call save every 30 seconds
function autoSave() {
    _this.save(true);
};
this.autoSaveTimer = setInterval(autoSave, 30 * 1000);

});

editor.addEventListener('stop', function (ev) { // Stop the autosave clearInterval(this.autoSaveTimer); });

function imageUploader(dialog) { var image, xhr, xhrComplete, xhrProgress;

dialog.addEventListener('imageuploader.cancelupload', function () {
    // Cancel the current upload

    // Stop the upload
    if (xhr) {
        xhr.upload.removeEventListener('progress', xhrProgress);
        xhr.removeEventListener('readystatechange', xhrComplete);
        xhr.abort();
    }

    // Set the dialog to empty
    dialog.state('empty');
});

dialog.addEventListener('imageuploader.clear', function () {
    // Clear the current image
    dialog.clear();
    image = null;
});

dialog.addEventListener('imageuploader.fileready', function (ev) {

    // Upload a file to the server
    var formData;
    var file = ev.detail().file;

    // Define functions to handle upload progress and completion
    xhrProgress = function (ev) {
        // Set the progress for the upload
        dialog.progress((ev.loaded / ev.total) * 100);
    };

    xhrComplete = function (ev) {
        var response;

        // Check the request is complete
        if (ev.target.readyState != 4) {
            return;
        };

        // Clear the request
        xhr = null;
        xhrProgress = null;
        xhrComplete = null;

        // Handle the result of the upload
        if (parseInt(ev.target.status) == 200) {
            // Unpack the response (from JSON)
            response = JSON.parse(ev.target.responseText);

            // Store the image details
            image = {
                size: response.size,
                url: response.url
                };

            // Populate the dialog
            dialog.populate(image.url, image.size);

        } else {
            // The request failed, notify the user
            new ContentTools.FlashUI('no');
        }
    };

    // Set the dialog state to uploading and reset the progress bar to 0
    dialog.state('uploading');
    dialog.progress(0);

    // Build the form data to post to the server
    formData = new FormData();
    formData.append('image', file);

    // Make the request
    xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', xhrProgress);
    xhr.addEventListener('readystatechange', xhrComplete);
    xhr.open('POST', 'upload_imagens', true);
    xhr.send(formData);
});

} ContentTools.IMAGE_UPLOADER = imageUploader;

wintermute-84 commented 7 years ago

Hi, I was doing a prototyping of a tool, and I actually used part of your code mixed with demo to make the uploader.

I will post the whole file, may be it will help you somehow. Just remember that it's just that - a quick prototype to test the backend api. editor.js.txt