[CKEditor] Image upload using drag and drop

Forge Component
(29)
Published on 25 Aug by Prasad Rao
29 votes
Published on 25 Aug by Prasad Rao

Hi guys

I want to upload images by drag in drop, as in the image and likeis the one used here. Can you tell me if it's some widget or what it is. I already looked in the forge and tried to use the ckeditor but did not find it and did not get the result.

Thanks!

Hi Ana ,

If it is just drag and drop of files\images you can use this component (Multiple File Upload).


Regards

-PJ-

Hi,

Check the attachment for the plugins resources that I used to use drag & drop image upload  and copy&paste image from clipboard. Import all files as resources and change the config.js.

The plugin named uploadimage needs to json response. So, you need a different upload url that returns a json response and you should set the config like this:

You can copy the Upload Screen from CKEditor and just change the response.


This is the how json response should be:


Be sure to clear all cached files from the browser after you are done to test it.


Also you can check the uploadimage plugin link to understand what I did:

https://ckeditor.com/cke4/addon/uploadimage


Regards



Hi, was wandering if you could share your .oml outsystems file? 

cheers 

Necmettin Sahinbay wrote:

Hi,

Check the attachment for the plugins resources that I used to use drag & drop image upload  and copy&paste image from clipboard. Import all files as resources and change the config.js.

The plugin named uploadimage needs to json response. So, you need a different upload url that returns a json response and you should set the config like this:

You can copy the Upload Screen from CKEditor and just change the response.


This is the how json response should be:


Be sure to clear all cached files from the browser after you are done to test it.


Also you can check the uploadimage plugin link to understand what I did:

https://ckeditor.com/cke4/addon/uploadimage


Regards





Necmettin Sahinbay wrote:

Hi,

Check the attachment for the plugins resources that I used to use drag & drop image upload  and copy&paste image from clipboard. Import all files as resources and change the config.js.

The plugin named uploadimage needs to json response. So, you need a different upload url that returns a json response and you should set the config like this:

You can copy the Upload Screen from CKEditor and just change the response.


This is the how json response should be:


Be sure to clear all cached files from the browser after you are done to test it.


Also you can check the uploadimage plugin link to understand what I did:

https://ckeditor.com/cke4/addon/uploadimage


Regards




Hi Necmettin,

Do you mind provide your .oml for this solution or share to me how to use the output after getting the json string, and return it to editor?

We are using javascript below to return url now, but it is complaining should return json instead. 

SyntaxEditor Code Snippet

<script>window.parent.CKEDITOR.tools.callFunction(



Thanks in advance.

Hi Necmettin,

Can you provide your oml file please? Or share more details. Thank you!

Necmettin Sahinbay wrote:

Hi,

Check the attachment for the plugins resources that I used to use drag & drop image upload  and copy&paste image from clipboard. Import all files as resources and change the config.js.

The plugin named uploadimage needs to json response. So, you need a different upload url that returns a json response and you should set the config like this:

You can copy the Upload Screen from CKEditor and just change the response.


This is the how json response should be:


Be sure to clear all cached files from the browser after you are done to test it.


Also you can check the uploadimage plugin link to understand what I did:

https://ckeditor.com/cke4/addon/uploadimage


Regards






Hi Wei,

Were you able to solve the issue? Can you share more details or share your oml file please?

Thanks! 


WEI LUN WONG wrote:

Necmettin Sahinbay wrote:

Hi,

Check the attachment for the plugins resources that I used to use drag & drop image upload  and copy&paste image from clipboard. Import all files as resources and change the config.js.

The plugin named uploadimage needs to json response. So, you need a different upload url that returns a json response and you should set the config like this:

You can copy the Upload Screen from CKEditor and just change the response.


This is the how json response should be:


Be sure to clear all cached files from the browser after you are done to test it.


Also you can check the uploadimage plugin link to understand what I did:

https://ckeditor.com/cke4/addon/uploadimage


Regards




Hi Necmettin,

Do you mind provide your .oml for this solution or share to me how to use the output after getting the json string, and return it to editor?

We are using javascript below to return url now, but it is complaining should return json instead. 

SyntaxEditor Code Snippet

<script>window.parent.CKEDITOR.tools.callFunction(



Thanks in advance.



Hi Amir Siahpolo,
I didn't solve the problem, i remember the problem was due to the upgrade of ckeditor library, it was using newer version which using json instead javascript function. I am not expert of client script, so at the end give up. To solve it, you have to study the source code and find a way to pass the parameter to it by using outsystems.