Is it possible to use client-side generated blob url to save to Google Drive

Question

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 Google Drive. I'm using the Save to Drive button in this example but it doesn't seem to even load the save button unless I strip off "blob:http:" in which case it will look to load the button correctly but this isn't a valid file anymore.

Is this even possible to save a blob file to Google Drive?

Here's what my code looks like:

    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'
    });

Thanks!

Infant

I'd like to be able to do this to. I can do it with Dropbox. – Dorsy

Answer 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

Goldfarb

Answer 2

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

Toolis

When I look at 'developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/…' it says that data URIs start with data:, that page, nor the one you provided, say anything about blob:. Have you tried it yourself? OP is asking about blob: URIs I guess. – Penthea

Answer 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>

Penthea