4

I'm using Trix, and for uploading attachments our backend developer tells me that I should convert the attachment to base64 and save the base64 data to the database instead of uploading the binary file.

I wrote this code for implementing it, and the output of the input field(HTML) is working as expected, but the image preview doesn't show in the editor. 

$(function() {

  $(document).on('trix-attachment-add', function(event) {
    var attachment = event.originalEvent.attachment;
    // Convert data URLs to File objects.
    if(attachment.file) {
      return uploadAttachment(attachment);
    } else {
      console.error('Could not upload attachment.');
      console.error(attachment);
      attachment.remove();
    }
  });

});

function uploadAttachment(attachment) {
  var reader = new FileReader();
  console.log(attachment)

      // Set the reader to insert images when they are loaded.
      reader.onload = function (e) {
        var result = e.target.result;
        var attrs = {
          src : result,
          url: result,
          href : ''
        };
        attachment.setAttributes(attrs)
        attachment.setUploadProgress(100);
      }
      // Read image as base64.
      reader.readAsDataURL(attachment.file);
    }

I don't know what causes this problem.

Gene Z. Ragan
  • 2,643
  • 2
  • 31
  • 41
A Noob Developer
  • 41
  • 2

3 Answers3

0

Try replacing

$(document).on('trix-attachment-add', function(event) {

with

document.addEventListener("trix-attachment-add", function(event) {

This could be event listeners being cached thus firing multiple times. The first load of image works, it could be the next loads that make this look busted.

Could also be Turbolinks issue so wrap your code with this instead:

$(document).on('turbolinks:load', function() {
Ricardo Green
  • 1,058
  • 1
  • 11
  • 27
0

I've managed to solve the issue by setting the fileObjectURL property as shown below

attachment.attachment.fileObjectURL = result;

Abdelkarim EL AMEL
  • 1,515
  • 1
  • 10
  • 10
0

Complete code for latest version (works with Symfony 6 easy admin bundle):

(function() {
function asBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });
}
document.addEventListener("trix-file-accept",  function(event) {
    event.preventDefault();
    if (event.file) {
        asBase64(event.file).then(function(data) {
            let image = document.createElement('img');
            image.src = data;
            let tmp = document.createElement('div');
            tmp.appendChild(image);
            let editor = document.querySelector('trix-editor');
            editor.editor.insertHTML(tmp.innerHTML);
        }).catch(e => console.log(e));
    }
}); })();
Sative
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 17 '22 at 20:59