I've tried calling the image a number of different ways and get the same error on the .insertImage each time (Service Error: Spreadsheets). I'm wondering if it has to do with the format of the image since it is gathered from a file upload of a mobile camera picture. The blob is saved in the specified folder and the image looks great, but it won't load into the spreadsheet like I need it to. Can someone please help me understand what I am doing wrong?
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.25, maximum-scale=1.0, user-scalable:no"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
img {
height: auto;
width: 50%;
text-align: center;
}
</style>
</head>
<body>
<h1>test</h1>
<br>
Control Number:<br>
<input type="number" id="control">
Take Picture:<br>
<input type="file" id="takePic" onchange="previewFile();" accept="image/*" capture="camera"><br>
<img src="" class="preview" alt="Image preview..." style="display:none;">
<input type="button" id="submit" value="Submit" style="display:none;">
</body>
<script>
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
$('.preview').show();
$('#submit').show();
}
else {
$('.preview').hide();
$('#submit').hide();
}
}
$('#submit').click(function(){
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
var control = $('#control').val();
var data;
if(file){
reader.readAsDataURL(file);
}
reader.addEventListener("load", function () {
google.script.run.withSuccessHandler(success).withFailureHandler(failure).saveImage(reader.result, control)
}, false);
});
function failure(x){
alert(x);
}
function success(x){
alert("Successfully added");
}
</script>
</html>
.gs
function saveImage(data,name){
var ss = SpreadsheetApp.getActive();
var sheet = ss.getSheetByName('Sheet1');
var folder = DriveApp.getFolderById('1nJBIq-EvzxIk9FP40diojuLKob46q4-w');
var bytes = data.split(",");
var base = Utilities.base64Decode(bytes[1]);
var blob = Utilities.newBlob(base, 'image/jpeg', name);
var url = folder.createFile(blob).getUrl();
var response = UrlFetchApp.fetch(url);
var data = response.getContent();
var img = Utilities.newBlob(data, 'image/jpeg', name);
sheet.copyTo(ss).setName('Test');
var test = ss.getSheetByName('Test');
test.insertImage(img, 1, 1).setWidth(200).setHeight(100); //error on this line
}
