Image Upload Handler Servlet/JSP for TinyMCE

Question

I have recently learned about TinyMCE and has applied its version 4.3 into my project that help to save description.

It also requires images to be uploaded and displayed in the editor for the same purpose.

After searching I found it would have been easy for me to create a PHP or ASP.NET project which has a lot of help and plugins regarding TinyMCE but there are none or very less for J2EE or Servlet/JSP.

Currently my code stands here:

TinyMCE Script:

tinymce.init({
            selector: '#description',
            plugins: "image link imagetools codesample emoticons paste autoresize textcolor table preview",
            menubar:false,
            statusbar: false,
            toolbar1: 'insertfile undo redo | styleselect | table | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
            toolbar2: 'preview | forecolor backcolor | codesample emoticons',
            automatic_uploads: true,
            paste_data_images: true,
            images_upload_base_path: '/uploaded/images',
            file_picker_handler: function (blobInfo, success, failure) {
                                var xhr, formData;

                                xhr = new XMLHttpRequest();
                                xhr.withCredentials = false;
                                xhr.open('POST', '/uploadFile');

                                xhr.onload = function() {
                                  var json;

                                  if (xhr.status != 200) {
                                    failure('HTTP Error: ' + xhr.status);
                                    return;
                                  }

                                  json = JSON.parse(xhr.responseText);

                                  if (!json || typeof json.location != 'string') {
                                    failure('Invalid JSON: ' + xhr.responseText);
                                    return;
                                  }

                                  success(json.location);
                                };

                                formData = new FormData();
                                formData.append('file', blobInfo.blob(), fileName(blobInfo));

                                xhr.send(formData);
                              }
        });

Servlet: Created and tested FileUploader servlet with path defined as /uploadFile.

The servlet is working properly and returning JSON object { location : '/uploaded/images/filename.jpg' }

But the two codes here are not talking to each other.

Problem is TinyMCE is not having inbuilt File Explorer that can upload the separately before passing it to text-area, it is taking URL of image and passing it directly into <image> tag without uploading the actual file.

Anyone can help me grab the TinyMCE Async Image Upload functionality? I tried going through links given like this and this but it did not seems to work.

Also I do not know how it has been marked duplicate as How to upload files to server using JSP/Servlet? that's a very easy part, main question is How to call *FileUpload* servlet to upload images with TinyMCE in a Java Web App?

Let me know if any more explanation is required regarding this.

Asif

See duplicate for those examples. The upload servlet example is absolutely not dependent on the way how the HTTP request is triggered (e.g. plain HTML form, or Ajax request, or even programmatic URLConnection client, etc). You may only need to figure out the request parameters used by TinyMCE but those can easily be found by inspecting the HTTP request payload. — BalusC, Dec 19 '15 at 15:16

score 0 · Answer 1 · answered Dec 18 '15 at 15:13

0

The TinyMCE web site has (as you state) a PHP example. The basic process is that TinyMCE will create a separate HTTP POST for each image. It will send that HTTP POST to the URL that you provide in images_upload_url.

The image handler has to do whatever needs to be done to "store" the image in your application. That could mean something like:

Store the item in a folder on your web server
Store the item in a database
Store the item in an asset management system

...regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:

{ location : '/uploaded/image/path/image.png' }

TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location. The TinyMCE page has more details on all of this:

https://www.tinymce.com/docs/advanced/handle-async-image-uploads/

answered Dec 18 '15 at 15:13

Michael Fromin

13,131
2
20
31

Many of these things I had noted already, if you see I already have these in my code too, I have three questions remaining, *First*, will TinyMCE automatically uploads the image as soon as we insert it into the editor so I do not have to worry about checking them when submitting the form. *Second*, is there any examples of `someServletForImageUpload` used for tiny anywhere for reference? *Third*, not necessary but how can we make tiny upload images from local machine, right now by default it works for URL only. – Asif Dec 18 '15 at 16:38
@Asif - I know of no sample Java code for this but its a standard Form POST so I would expect that you can find examples of how to process a POST on StackOverflow or elsewhere on the web. – Michael Fromin Dec 18 '15 at 17:21
@Asif - To answer your third question ... this will depend. The local image upload capability will work on any Base64 encoded image that makes its way into TinyMCE. This can happen in several ways including drag/drop & the image tools manipulating the images. JavaScript cannot directly access your hard drive so you can't grab files off your local hard drive directly. There is a commercial plugin (PowerPaste) that would allow images to make it into TinyMCE when pasting from documents that provide HTML to the clipboard but that is not part of the open source / community edition of TinyMCE. – Michael Fromin Dec 18 '15 at 17:25
@Asif - to answer your first question .... you can configure it either way. See the automatic_uploads section here: https://www.tinymce.com/docs/configure/file-image-upload/ – Michael Fromin Dec 18 '15 at 19:53
please go through updated OP – Asif Dec 21 '15 at 20:54

Image Upload Handler Servlet/JSP for TinyMCE

1 Answers1