Getting the file directly in the handler

[gigi199596]

Hey,

I successfully implemented a conversion from base64 to a file and uploaded that to PHP with this code:

/**
 * Do something to our dropped or pasted image
 * @param.imageDataUrl - image's base64 url
 * @param.type - image's mime type
 */
function imageDropAndPasteHandler(imageDataUrl, type) {
  // give a default mime type if the type was null
  if (!type) type = 'image/png';

  var imageData = imageDataUrl.replace(/^data:image\/\w+;base64,/, '');
  var byteCharacters = b64_to_utf8(imageData);
  const byteNumbers = new Array(byteCharacters.length);
  // Each character's code point (charCode) will be the value of the byte.
  for (var i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  var imageBlob = new Blob([byteArray], {type: `${type}`});
  var imageFile = new File([imageBlob], "image.png", {type: `${type}`});

  // generate a form data
  var formData = new FormData()
  formData.append('image', imageFile)

  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'upload/supportEditorImage', true);
  xhr.onload = () => {
    if (xhr.status === 200) {
      // this is callback data: url
      console.log(xhr.response);
      const url = JSON.parse(xhr.responseText).fileUrl;
      insertToEditor(url);
    }
  };
  xhr.send(formData);
}

But my question is: Would it be possible to avoid this base64->File conversion by gettting directly the copied file? If no, I'll stick with my solution.

Cheers, Gilles

[chenjuneking]

Hey,

I successfully implemented a conversion from base64 to a file and uploaded that to PHP with this code:

/**
 * Do something to our dropped or pasted image
 * @param.imageDataUrl - image's base64 url
 * @param.type - image's mime type
 */
function imageDropAndPasteHandler(imageDataUrl, type) {
  // give a default mime type if the type was null
  if (!type) type = 'image/png';

  var imageData = imageDataUrl.replace(/^data:image\/\w+;base64,/, '');
  var byteCharacters = b64_to_utf8(imageData);
  const byteNumbers = new Array(byteCharacters.length);
  // Each character's code point (charCode) will be the value of the byte.
  for (var i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  var imageBlob = new Blob([byteArray], {type: `${type}`});
  var imageFile = new File([imageBlob], "image.png", {type: `${type}`});

  // generate a form data
  var formData = new FormData()
  formData.append('image', imageFile)

  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'upload/supportEditorImage', true);
  xhr.onload = () => {
    if (xhr.status === 200) {
      // this is callback data: url
      console.log(xhr.response);
      const url = JSON.parse(xhr.responseText).fileUrl;
      insertToEditor(url);
    }
  };
  xhr.send(formData);
}

But my question is: Would it be possible to avoid this base64->File conversion by gettting directly the copied file? If no, I'll stick with my solution.

Cheers, Gilles

Hi, @gigi199596 . This function has been supported from v1.0.0, try this:

function imageDropAndPasteHandler(dataUrl, type, imageData) {
  var filename = 'my_cool_image.png'
  var file = imageData.toFile(filename)
  // Do something else...
}

Feel free to let me know if you have any troubles.