Tips for successfully transferring a blob within a .run method

I've searched through the Google Apps Script Reference but couldn't find an answer to my question. Can a blob be passed through a .run() function in a Google script? Below is the code I am working with:

Within my HTML file's script, there is only a canvas object and a paragraph element for "print" statements.

<script>
  var canvas = document.getElementById('myCanvas');
  var can = canvas.getContext("2d");
  can.fillRect(20,20,150,100);
  var canvasData = canvas.toDataURL('image/png', 1);
  var blob = toBlob(canvasData);

  document.getElementById('ins').innerHTML = "Got the Blob  " + blob.type;
  google.script.run.printCanvas(blob);


  function toBlob(dataURI) {

    // converting base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs - refer to SO answer #6850276 for suitable code
    document.getElementById('ins').innerHTML = ("Data URI:" + dataURI);

    var byteString = atob(dataURI.split(',')[1]);

    // separating out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // writing the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // writing the ArrayBuffer to a blob 
    var blob = new Blob([ab], {type: 'image/png'});

    return blob;
  }

</script>

The output of blob.type reveals "Got the Blob image/png."

However, when trying to execute .run(blob), an error occurs:

"Uncaught TypeError: Failed due to illegal value in property: 0"

I understand that GAS does not allow passing DIVs, hence I'm uncertain if it's feasible to pass a blob to the .gs file. I'm struggling to determine why the application refuses to run. If possible, please provide guidance on how to achieve this.

It seems like the issue may not lie within the .gs file since the initial line contains a DocumentApp.alert which does not trigger. Thus, it appears that the application isn't reaching the .gs file.

Answer №1

I would like to express my gratitude towards Sandy Good for their contribution. The answer to the query is indeed a resounding NO. It has been confirmed that sending a blob to the .gs page as described is not feasible.

However, an alternative approach would be to encode the blob into a base-64 encoded string,

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

Subsequently, you can decode it within the .gs file using Utilities.base64Decode(base64encodedstring);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue in Jasmine test: 'Spy should have been invoked'

I've encountered an issue while writing a Jasmine test case for the following Angular function. The test case failed with the message "Expected spy [object Object] to have been called". $scope.displayTagModelPopup = function() { var dial ...

Comparing #id_gender against assigning $('#id_gender') to the variable gender

Users are required to specify their gender. HTML <form ...> <select id="id_gender" name="gender" onchange="hideMaidenName(this.value)"> <option value="M">Male</option> <option value="F">Female</option> <option value ...

Tips for resolving the issue of encountering the error message "Cannot POST /" while transitioning between different websites

Forgive my lack of knowledge, I'm still in the learning process :) I am attempting to navigate from an HTML website to a React-built website by clicking a button. The first website is a simple HTML page, while the destination website is more complex a ...

A guide to submitting forms within Stepper components in Angular 4 Material

Struggling to figure out how to submit form data within the Angular Material stepper? I've been referencing the example on the angular material website here, but haven't found a solution through my own research. <mat-horizontal-stepper [linea ...

How can I bind the ID property of a child component from a parent component in Angular 2 using @Input?

I have a unique requirement in my parent component where I need to generate a child component with a distinct ID, and then pass this ID into the child component. The purpose of passing the unique ID is for the child component to use it within its template. ...

AngularJS and Karma: Revoking ng-dirty status using setPristine

I'm currently facing an issue in one of my unit tests where I am testing the removal of ng-dirty when using setPristine on an input element. Even after calling setPristine, the ng-dirty is not being removed. My suspicion is that I may be incorrectly ...

Content obscuring dropdown menu

I am currently working on a screen design that resembles the following: return ( <SafeAreaView> <View style={styles.container}> <View style={styles.topContainer}> <View style={styles.searchFieldContainer}> ...

How to Use AJAX, jQuery, and JSON to Send an Array to PHP

I'm attempting to send an associative array through AJAX $.post to a PHP script. Below is the code I am using: var request = { action: "add", requestor: req_id, ... } var reqDetails = $("#request_details").val(); ...

Utilize the $scope variable as a JSON object for interacting with the $http service

Is there a way to extract all the data from Angular's scope service without creating an additional object? I am trying to send everything on the scope to a server using $http.post, but it seems that $scope is a circular structure, resulting in "Conver ...

How to pass parameters while updating parent values in VueJS using emit?

Explaining my dilemma with uploading images: In my form, users can upload images using the following code snippet: <input id="visualisation_upload" @change="onThumbnailChanged" name="visualisation_upload" accept="imag ...

Steps to invoke a function to add an element into a list

Every time a user clicks on a button, I want to generate a new tab. In this tab, when the user clicks again, I want a function to be called like: onclick('+reportname+','+report type+') onclick("'+reportname+'","'+repor ...

Activate the Vue checkbox option

Starting out with Vue and web development. I am currently building my app using Laravel and Vue. This is the code snippet I am working on: created: function () { let self = this; self.setActive('tab1'); axios.get(this.$apiAdress + '/api/tas ...

Unable to instantiate a class using a module in React

I am on a mission to combine Monaco editor and Convergence in order to create a collaborative editor. To achieve this goal, I am referencing the following repositories and examples: https://github.com/convergencelabs/monaco-collab-ext https://github.com/c ...

Learn how to implement autofocus for an ng-select element within a bootstrap modal

When working with ng-select inside a modal, I am facing an issue with setting autofocus. While I am able to add focus for the input field within the modal, the same approach doesn't work for ng-select. Can anyone provide guidance on how to set focus f ...

Discover a corresponding object within an array

I am currently dealing with an array of objects in Javascript where I need to verify if a certain value exists within any object and return the corresponding id. The issue arises when using the some() function as it only seems to match the first object. T ...

Use Material UI Grid to create a horizontal line design instead of focusing on making the

Is there a way to turn off responsiveness for the material UI grid similar to how it can be done with a basic HTML table? While an HTML table scales down and adds a horizontal scroll bar, the material UI grid remains responsive as shown in the example belo ...

How can I utilize jQuery to save a simple text string in a mySQL database?

Seeking guidance on this jQuery code snippet: $('.bggallery_images').click(function () { var newBG = "url('" + $(this).attr('src'); var fullpath = $(this).attr('src'); var filename = fullpath.replace('im ...

Inconsistent behavior of transform scale() between Chrome and Safari upon page refresh

My goal was to design a code that would adjust all content according to the browser size, ensuring that everything remains visible even when the window is resized. var docHeight = $(document).height(); var winHeight; var zoomRatio; function z(number) { ...

Building custom components in Vue.js/NuxtJS can be a breeze when using a default design that can be easily customized through a JSON configuration

Currently, I am in the process of developing a NuxtJS website where the pages and components can either have a generic design by default or be customizable based on client specifications provided in the URL. The URL structure is as follows: http://localh ...

Uncovering the Secrets of Accessing Tag Attributes in ReactJS

I have developed a small app using reactjs. I have set an attribute on the button tag and passed a value to it. Now, when I click on the button, I want to retrieve the attribute value. How can I achieve this with react js? Here is a sample code snippet: ...