Forum Academy Marketplace Showcase Pricing Features

Need help with context.uploadContent()

I am developing a plugin works at frontend and creates image file. and would like to upload the file using context.uploadContent().
Can anyone confirm if this is a bug or is there anything that I miss regarding this.
The proglem is that when I upload image file, upload succeeds but the file uploaded is broken somehow. (I checked the file is proper base64 file so input should be fine)
My code is here.

          // Prepare canvas using PDF page dimensions
          var canvas = document.createElement("canvas");
          var context = canvas.getContext('2d');
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          
          // Render PDF page into canvas context
          var renderContext = {
            canvasContext: context,
            viewport: viewport
          };
          var renderTask = page.render(renderContext);
          await renderTask.promise.then(function () {
            console.log('Page rendered');

            // convert canvas into png image file as bse64 format
            const base64 = canvas.toDataURL('image/png')
           // upload the base64 file
            contextObject.uploadContent('image-' + pageNumber + '.png' ,base64, uploadContentCallback);

...

function uploadContentCallback(err, url) {
        if (url) {
          console.log('callback url: ' + url);
          resultImages.push(url);
         }
          else {
           console.log('callback error: ' + err)
        }
 }


I can see files uploaded via plugin in testing app but the file is broken and I have no clue why this happens…

I really appreciate your help!

Save doesn’t save image file properly.

const base64 = canvas.toDataURL('image/png')
const tmp = base64.split(',')
const data = tmp[1]

I could solve my problem by my self!
I don’t know if this would help others but I thought for plugin development beginners, the document is not too kind so I would like to share what I did.

converting canvas to base64 was not enough.
I needed to pass ONLY the string in the base64.
therefore, I split the base64 with “,” and passed the string to context.uploadContent() so bubble could read.

1 Like

Thanks for this thread @sunup

context.uploadcontent() in fact takes only the base64 value of the file as opposed to the entire data URI.

I spent a couple of days on this issue and decided to build a plugin to make this easier for anyone else needing the same functionality.

1 Like

@blurapps This post has already been expanded upon here

On another note,

Better Uploader has been around for a white and lets you convert your file(s) into Base64 Data before or after uploading the files to the server, along with several other features (such as multi file uploading, renaming of files before upload, etc).

Check it out here