Is It Possible To Use Client-side Generated Blob Url To Save To Google Drive

I'm generating a CSV client-side and putting it into a Blob and then creating an object URL. What I'm attempting to accomplish is generate this blob URL and then save the file to

Solution 1:

var data = [["one", "info 1", "additional 1"], ["two", "info 2", "additional 2"]],
    csvContent = [], output, objectURL;

data.forEach(function(infoArray, index) {
    var dataString = infoArray.join(",");
    csvContent += index < infoArray.length ? dataString+ "\n" : dataString;
});

output = new Blob([csvContent], { type: 'text/csv' });
objectURL = URL.createObjectURL(output);

gapi.savetodrive.render('savetodrive-div', {
  src: objectURL,
  filename: 'save-to-drive.csv',
  sitename: 'Example'
});

Is this what you need? Credit: http://qaru.site/questions/4397835/is-it-possible-to-use-client-side-generated-blob-url-to-save-to-google-drive

Solution 2:

Data URIs are not supported. See here: https://developers.google.com/drive/web/savetodrive#customizing_savetodrive_tag_attributes

Solution 3:

It does not work with 'blob:' URI, see details below.

This URL about data URIs doesn't say anything in particular about blob:, nor does this reference about the save to google drive button. Therefore I had to try it out myself with a blobl: URI to be sure.

See this fiddle.

The snippet below is the same, except it causes an error saying something with "The document is sandboxed and lacks the 'allow-same-origin' flag." when I tried it. (Hence I included the fiddle URL.)

$(document).ready(function() {
	var blob = new Blob(["test"], { type: "text/plain" })
  var url = window.URL.createObjectURL(blob);
	const attributeName = "data-src";
  $("#but").attr(attributeName, url);
  console.log(attributeName + ": " + $("#but").attr(attributeName));
  $.getScript("https://apis.google.com/js/platform.js");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="but" class="g-savetodrive" data-src="/test.pdf" data-filename="test.txt" data-sitename="TryItOut.Inc">
</div>