CODEWITHSUNDEEP
imageuploadsharepoint-2013image-uploadingckeditor4.x
Alex Filipovici
Alex Filipovici

Reputation: 32541

Insert image in editor after upload

I've managed to upload images through drag & drop to a SP 2013 library by intercepting the paste and fileUploadrequest events (+ added mandatory headers and used /_api/web/getfolderbyserverrelativeurl(\'/sites/theSite/theLibrary\')/files/add(overwrite=true,%20url=\'aDynamicFilename.jpg\') as the request's URL).

The problem with this approach is that even if the image is uploaded, the image is not inserted in the editor (no error). I'm not setting config.uploadUrl for this approach.

Q#1: Is there any step which I should go through after the image is uploaded? Like telling the CKEDITOR instance to insert the image?

Later on, I've noticed that if I'm setting the config.uploadUrl to the same URL as I'm using above, the editor inserts successfully the image. The problem is that, from my trials, the config.uploadUrl is initialized together with the CKEDITOR instance (therefore, can't be assigned dynamically for each image, in case that multiple images are dragged and dropped on the editor).

Q#2: Is there another way to configure the uploadUrl or maybe some other config property that would allow the custom upload to work and insert the image in the editor?

Upvotes: 0

Views: 1169

Answers (1)

Alex Filipovici
Alex Filipovici

Reputation: 32541

Eventually made it work by following a similar approach as the on in this repo:

RyanSiu1995/ckeditor-ImageUploader

  1. Use a FileReader and start loading the image when it's pasted to the CKEditor
  2. On the fileReader's onload event, create a img element in the editor's document object with some opacity and with the fileReader's Base64 string as the src
  3. On the fileLoader's uploaded event, remove the img and re-add it with the actual file's url (changing the src attribute on the img was not triggering the editor's change event, which I was hooking into,so I chose to replace the whole element)

Here's the relevant section from the ckeditor-ImageUploader plugin:

    fileDialog.on('change', function (e) {
        var fileTools = CKEDITOR.fileTools,
            uploadUrl = fileTools.getUploadUrl( editor.config, 'image' ),
            file = e.target.files[0],
            loader = editor.uploadRepository.create(file),
            reader = new FileReader(),
            notification,
            img;

    // verify
    if (!/image/i.test(file.type)) {
        notification = editor.showNotification( 'Please check the correct format.', 'warning' );

        setTimeout(function() {
            notification.hide()
        }, 2000);

        return false
    }

    loader.upload(uploadUrl);

    // preview image
    reader.readAsDataURL(e.target.files[0]);

    reader.onload = function (e) {
        img = editor.document.createElement('img');
        img.setAttribute('src', e.target.result);
        img.setStyle('opacity', 0.3);
        editor.insertElement(img);
    }

    loader.on('uploaded', function(evt) {
        editor.widgets.initOn(img, 'image', {
            src: evt.sender.url
        });
        img.setAttribute('src', evt.sender.url);
        img.setStyle('opacity', 1);
    });

    loader.on('error', function() {
        img.$ && img.$.remove();
    });

    fileTools.bindNotifications(editor, loader);

    // empty input
    fileDialog[0].value = "";

Upvotes: 2

Related Questions