Search code examples
javascriptgoogle-apigoogle-drive-apigoogle-drive-realtime-api

Unable to use "save button (by google drive)" with data or blob source


I would save a document to google drive, this document is created in realtime on the client side of my web app, using google drive save button, but doesn't work at all.

this is an example saving static file I've taken from there: https://developers.google.com/drive/v3/web/savetodrive and works

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-savetodrive"
   data-src="//example.com/path/to/myfile.pdf"
   data-filename="My Statement.pdf"
   data-sitename="My Company Name">
</div>

and yes simply it works,

but if I try to set data-src with data or blob field, it fail to save or get an error

<div class="g-savetodrive"
   data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAABmBXS+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAjSURBVChTY/y/7uR/BgKACUrjBSNc0f8AU/yKQAp+/vzJAABYKgl8odPr0gAAAABJRU5ErkJggg=="
   data-filename="My Statement.pdf"
   data-sitename="My Company Name">
</div>

try here for "live" version: https://jsbin.com/horopel/edit?html,js,console,output

blob is the same thing, not works, any solution? Better if Reactjs solution, but any ideas are welcome.


Solution

  • Answer: save button does not support blob source.

    Directly from the documentation you have linked

    Requests for files on different servers are subject to Cross Origin Resource Sharing (CORS) restrictions.

    1.The data-src URL can be served from the same domain, subdomain, and protocol as the domain where the button is hosted.

    Be sure to use matching protocols between the page and the data source.

    To serve the file when the same page is served by both http and https, specify the resource without a protocol such as data-src="//example.com/files/file.pdf", which uses the appropriate protocol based on how the hosting page was accessed.

    As you can see it must be a file. You cant just send it a string value of the file itself. Have you considered going though the Google drive API directly doing a file upload of as stream?