0

I'm trying to run javascript code to ensure that the div content is uploaded as PNG to the user's Google Drive.

I've already managed to start uploading to Drive via input [type = "file"] - so I know the upload is working properly. Now, however, I would need to ensure that the user does not select a file from his local storage, but that the contents of the div element are stored on his Drive.

I tried it with the following code, but it gives me the following error in the console: Uncaught TypeError: canvas.toBlob is not a function.

var canvas = document.getElementById('preview');

canvas.toBlob(function(blob) {
var file = document.createElement('img'),
url = URL.createObjectURL(blob);

var upload = new Upload(file);
upload.doUpload();
URL.revokeObjectURL(url);

I believe that there is a better option than to deal with it through blob, but so far I have not been able to come up with anything like that.

Jan Stavic
  • 53
  • 4
  • I have to apologize for my poor English skill. Unfortunately, I cannot understand `Now, however, I would need to ensure that the user does not select a file from his local storage, but that the contents of the div element are stored on his Drive.`. Can I ask you about the detail of your current issue? – Tanaike Jan 07 '22 at 03:08
  • Okay, I'll try to simplify it.After clicking the "Save to Google Drive" button, the content of a particular div will be saved as a PNG to the user's Google Drive. What I've accomplished is that I can upload a user's file on his computer to his Google Drive. But I still can't figure out how to save div content in PNG format to his Google Drive. – Jan Stavic Jan 07 '22 at 11:32
  • @Tanaike Did I explain it correctly? – Jan Stavic Jan 10 '22 at 21:45
  • Thank you for replying. I have to apologize for my poor English skill, again. Unfortunately, I cannot still understand your question. But I would like to try to understand it. When I could correctly understand it, I would like to think of the solution. I would be grateful if you can forgive my poor English skill. – Tanaike Jan 11 '22 at 00:23
  • @Tanike Ok, so I will try to simplify it once more. Click "Save to Google Drive" button -> HTML div saved to user's Google Drive as a PNG file. doUpload() function is working, my problem is: DIV -> File object. I have used code from: https://codingshiksha.com/how-to-upload-files-to-google-drive-in-javascript-using-google-drive-rest-api-v3 , but it is working just with file from INPUT. – Jan Stavic Jan 11 '22 at 14:23
  • Thank you for replying. I would like to support you. But I really apologize for my poor English skill. Unfortunately, I cannot still understand your question. But I would like to try to understand it. When I could correctly understand it, I would like to think of the solution. I would be grateful if you can forgive my poor English skill. – Tanaike Jan 12 '22 at 00:22
  • @JanStavic It sounds to me like you're trying to render a
    into an image file. If that's the case, then [this answer](https://stackoverflow.com/questions/10721884/render-html-to-an-image) might be helpful for you. Once you have the html as an image, uploading to Google API will be reasonably straightforward using the APIs you've already discovered.
     – Benn Jan 14 '22 at 17:50

0 Answers0