Tinymce get image _description with file_picker_callback and image uploader

Question

TL:DR I am trying to get the value of image_description field using javascript to past it my post xhr request

Original question below

I am using file_picker_callback type image https://www.tinymce.com/docs/configure/file-image-upload/#file_picker_callback

I enabled image_description input field in my

tinymce.init({
     ....,
     image_description: true,
     ...

Everything is uploading fine but I want to pass the image_description field as well to store in the DB. But i can't grab the data

Here are my two functions, taking directly from the tinymce website

  file_picker_callback: function(cb, value, meta) {

    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');

    input.onchange = function() {
      console.log(this.files);
      var file = this.files[0];

      console.log( meta ); //I thought it might be here in the meta bt it isn't

     console.log( $('#mceu_62').val() ); //I tried to get it from its id but it returns undefined i think that field is created after this function is created.



      var id = file.name;
      var blobCache = tinymce.activeEditor.editorUpload.blobCache;
      var blobInfo = blobCache.create(id, file);
      blobCache.add(blobInfo);


      // call the callback and populate the Title field with the file name
      cb(blobInfo.blobUri(), { title: file.name });
    };

    input.click();
  },
  images_upload_handler: function (blobInfo, success, failure) {
      var xhr, formData;

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

      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(), blobInfo.filename());
      formData.append('description', /*but i can't get the value*/);

      xhr.send(formData);
    }

@Karl Morrisons

Nutscracker · Accepted Answer · 2017-04-05T09:41:49.300

3

Try this to get value:

images_upload_handler: function (blobInfo, success, failure) {
      var xhr, formData;

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

      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);
      };


      var description = '';

      jQuery(tinymce.activeEditor.dom.getRoot()).find('img').not('.loaded-before').each(
    function() {
        description = $(this).attr("alt");
        $(this).addClass('loaded-before');
    });

      formData = new FormData();
      formData.append('file', blobInfo.blob(), blobInfo.filename());
      formData.append('description', description); //found now))

      xhr.send(formData);
    }

edited Apr 05 '17 at 09:41

answered Apr 04 '17 at 01:29

Nutscracker

702
3
9

That returns the data from the body/textarea I am looking for the data of the pop up field of image description – artSir Apr 04 '17 at 20:07
Man what sorcery is this, you got it. I didn't realized that the description window field was the alt tag. And where is this 'loaded-before' dont know where that is. I thought you were trolling me, bounty well earn. Thank you so much. – artSir Apr 05 '17 at 01:46
I get an error thrown though "GET data:image/jpeg;base64,undefined net::ERR_INVALID_URL" when the temporary url gets added any idea what to do about that? – artSir Apr 05 '17 at 01:58
@artSir answer was upadated again). Try new code wersion – Nutscracker Apr 05 '17 at 09:42
@artSir ''loaded-before' - my custom class. After we process picture, we should add this class. If there is no class in the picture, then this is the last downloaded picture. This feature for situations, when we want to load more then one image to article – Nutscracker Apr 05 '17 at 12:24

score -1 · Answer 2 · answered Apr 04 '17 at 07:33

-1

The following may be will help you https://www.tinymce.com

<!DOCTYPE html>
<html>
<head>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
<textarea>Next, get a free TinyMCE Cloud API key!</textarea>
</body>
</html>

answered Apr 04 '17 at 07:33

Tijo John

686
1
9
20

1

Trolling? This just inits tinyMCE – artSir Apr 04 '17 at 20:08

Tinymce get image _description with file_picker_callback and image uploader

2 Answers2

Linked