CODEWITHSUNDEEP
javascriptbase64blobimage-uploadingtinymce-4
Mikey
Mikey

Reputation: 6766

Using data URI instead of blob in TinyMCE 4 image upload

Using TinyMCE 4, I am trying to do a basic local file picker such as the one used in their example.

After running their example, I noticed that the generated image source is a blob opposed to a base64.

So my question: is it possible to use base64 instead of a blob?

I thought the first argument of the file_picker_callback callback would be used as the source of the image, so I tweaked the code using this answer where I pass the data URI as the first argument. 

file_picker_types: 'image', 
// and here's our custom image picker
file_picker_callback: function (cb, value, meta) {
    var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');

    // Note: In modern browsers input[type="file"] is functional without 
    // even adding it to the DOM, but that might not be the case in some older
    // or quirky browsers like IE, so you might want to add it to the DOM
    // just in case, and visually hide it. And do not forget do remove it
    // once you do not need it anymore.

    input.onchange = function() {
        var file = this.files[0];
        var reader = new FileReader();

        reader.onload = function () {

            // Note: Now we need to register the blob in TinyMCEs image blob
            // registry. In the next release this part hopefully won't be
            // necessary, as we are looking to handle it internally.
            //var id = 'blobid' + (new Date()).getTime();
            //var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
            //var base64 = reader.result.split(',')[1];
            //var blobInfo = blobCache.create(id, file, base64);

            //blobCache.add( blobInfo );

            // call the callback and populate the Title field with the file name

            cb(reader.result, { title: 'hola' });
        };
        reader.readAsDataURL( file );
    };

    input.click();
}

However it did not work and instead converted the source into a blob e.g. 

<img src="blob:null/c8e90adb-4074-45b8-89f4-3f28c66591bb" alt="" />

If I pass a normal string e.g. test.jpg, it will generate 

<img src="test.jpg" alt="" />

Upvotes: 2

Views: 8224

Answers (2)

Michael Fromin
Michael Fromin

Reputation: 13744

The blob: format you see is actually a Base64 encoded binary image. If you were to post the content of TinyMCE to the server you would indeed get the Base64 data.

You can force TinyMCE to immediately send that image to your server to get converted to a "regular" image by following these steps:

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

Upvotes: 3

Bhaskara Arani
Bhaskara Arani

Reputation: 1677

Add the below code inside the tinymce\plugins\quickbars\plugin.js at the position as shown in the image

$.ajax({
            url: 'saveupload', // Upload Script
            enctype : 'multipart/form-data',
            type: 'post',
            data: {"imageString":base64,"imageType":blob.type,"imageName": blob.name},
            success: function(responseText) {
                var myJSON = JSON.parse(responseText);
                editor.insertContent(editor.dom.createHTML('img', { src: myJSON }));
            },
            error : function(xhr, ajaxOptions, thrownError) {
            }
          });

enter image description here

Note: If you ur using minified version convert the same into minified version using any minified tools (e.g: yuicompressor) I am upload images to the apache

servlet code is below

public void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, java.io.IOException {
    tbaService = new TBAServiceImpl();
    File f = new File("path");
    response.setContentType("text/html");
    PrintWriter out = response.getWriter();
    Map<String, String[]> parameterNames = request.getParameterMap();
    Gson gson = new Gson();
    HttpSession session = request.getSession(true);

    long timeinMill = new Date().getTime();
    String uniqueFileName = "local_"+timeinMill+"_"+parameterNames.get("imageName")[0].replace(" ", "_");
    String fileType = parameterNames.get("imageType")[0].split("/")[1];
    try {

        BufferedImage image = null;
        byte[] imageByte;

        BASE64Decoder decoder = new BASE64Decoder();
        imageByte = decoder.decodeBuffer(parameterNames.get("imageString")[0]);
        ByteArrayInputStream bis = new ByteArrayInputStream(imageByte);
        image = ImageIO.read(bis);
        bis.close();

        // write the image to a file
        File outputfile = new File(filePath+uniqueFileName); //filePath = C:/Apache/htdocs/tba/images/
        ImageIO.write(image, fileType, outputfile);

        out.print(gson.toJson(uploadUrl+uniqueFileName)); //uploadUrl=http://localhost/test/images/
        out.flush();
        out.close();

    } catch (Exception ex) {
        ex.printStackTrace();
    }
}

Upvotes: 0

Related Questions