Menu
I am trying to pro grammatically insert an image into a document. I can get this to work fine with an image with a URL such as http://www.geeks-on-wheels.net/wp-content/uploads/apple.jpg.
The problem comes when trying to use an image located on my Google Drive.
The URL looks like this:
https://docs.google.com/a/finance-in-motion.com/file/d/0B5sPSMZ9pf-QMG9GOVROakxQYmM/edit
or
https://docs.google.com/a/finance-in-motion.com/file/d/0B5sPSMZ9pf-QMG9GOVROakxQYmM/edit?usp=sharing.
The script doesn't seem to know what to do with it and throws an error. Any help would be appreciated.
836
To insert files from Drive do not use the HTTP route unless the file has been made public via drive hosting
Insert use the built in apis to read the file's blog and insert the img.
Here is an example of inserting a jpg from my drive (or a file I have access to) to a document.
function insertImageFromDrive(){
var fileId = '0B_dyIOzoasdfasdfPVTMxdTVXWDg';
var img = DriveApp.getFileById(fileId).getBlob();
DocumentApp.getActiveDocument().getBody().insertImage(0, img);
}
This will insert an image at the top of the document. To get more control over the cursor/selection replacement see this blog post.
157
I got a task where i have to make a form to upload its data and image to google spreadsheet. So i have created three files to achieve this task on my Google App Script project.
Files: Code.gs (carrying the form handling code)
form.html (carrying the form html code)
thanks.html (show after successfull submission of form)
and on my google drive i have a folder named "uploads" where all the images upload from the form and its link save in to the spreadsheet along with other data of the form. you can check the running app here : https://script.google.com/macros/s/AKfycbwmUDXR54cWO8PbCaexqDDo2397kyAi-AluUwWuhfG0VqTyK5ed/exec and data will save to this spreasheet : https://docs.google.com/spreadsheets/d/12StuWSCebwRBBTxOcYEr8ksHN8PJhtDIE7NWi9UwGf0/edit#gid=0
following are the files code
Code.gs
var submissionSSKey = [YOUR-SPREADSHEET-ID];
var folderId = [YOUR-FOLDER-ID];
function doGet(e) {
var template = HtmlService.createTemplateFromFile('form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate();
}
function processForm(theForm) {
var fileBlob = theForm.myFile;
var folder = DriveApp.getFolderById(folderId);
var doc = folder.createFile(fileBlob);
// Fill in response template
var template = HtmlService.createTemplateFromFile('thanks.html');
var fname = template.name = theForm.name+','+fileBlob.total;
var guests = template.guests = theForm.guests;
var filters = template.filters = theForm.filters_value;
var email = template.email = theForm.email;
var fileUrl = template.fileUrl = doc.getUrl();
var phone = template.phone = theForm.phone;
var bedroom = template.bedroom = theForm.bedroom;
var beds = template.beds = theForm.beds;
var bathroom = template.bathroom = theForm.bathroom;
var property_name = template.property_name = theForm.property_name;
var property_description = template.property_description = theForm.property_description;
var address = template.address = theForm.address;
// Record submission in spreadsheet
var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 12).setValues([[fname,guests,filters,email,fileUrl,phone,bedroom,beds,bathroom,property_name,property_description,address]]);
// Return HTML text for display in page.
return template.evaluate().getContent();
}
form.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
document.getElementById("myForm").reset();
$('input[id=filtercheck]').change(function(){
var allVals = [];
$('input[type="checkbox"]:checked').each(function () {
// removed the space ^
allVals.push($(this).val());
});
$('#filters_value').val(allVals);
});
});
function mySubmitFunction()
{
if(!$('input[id=terms_check]').is(':checked'))
{
return false;
}
}
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput(resultHtml) {
toggle_visibility('inProgress');
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = resultHtml;
}
// From blog.movalog.com/a/javascript-toggle-visibility/
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<style>
#formDiv{width:90%; padding:10px; font-size:12px;}
/*.singlerow{width:100%; height:auto; float:left; margin-top:10px;}*/
input[type=text], input[type=email], select {min-width:200px; height:30px; margin:10px; }
.top_bar{width:100%; height:40px; float:left; background-color:#000000; padding:5px;}
.top_bar img{margin-top:5px; float:left;}
</style>
</head>
<body>
<div class="top_bar"><a href="http://www.nzholidayhomes.nz"><img src="http://dx577khz83dc.cloudfront.net/4085/c5b11516-3be0-4e08-b962-b2e761e895cf.png" height="30" /></a></div>
<div id="formDiv">
<!-- Form div will be hidden after form submission -->
<form id="myForm" onsubmit="return mySubmitFunction()" style="display:block;">
<input name="name" type="text" placeholder="Name" />
<input name="phone" type="text" placeholder="phone" />
<input name="email" type="text" placeholder="Email" /><br>
<select name="guests">
<option>Select Guests</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="bedroom">
<option>Select Bedroom</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="beds">
<option>Select Beds</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="bathroom">
<option>Select Bathroom</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select><br>
<input type="text" name="property_name" Placeholder="Property Name" />
<input type="text" name="property_description" placeholder="Property Description"/>
<input type="text" name="address" placeholder="Address"/><br>
<input type="checkbox" value="Suitable for Children" name="filtercheck" id="filtercheck"> <label>Suitable for Children</label>
<input type="checkbox" value="Suitable for Events" name="filtercheck" id="filtercheck"><label> Suitable for Events</label>
<input type="checkbox" value="Suitable for Pets" name="filtercheck" id="filtercheck"><label> Suitable for Pets</label>
<input type="checkbox" value="Suitable for Smoking" name="filtercheck" id="filtercheck"><label> Suitable for Smoking</label><br>
<input type="checkbox" value="Stove" name="filtercheck" id="filtercheck"><label> Stove</label>
<input type="checkbox" value="Microwave" name="filtercheck" id="filtercheck"> Microwave
<input type="checkbox" value="Dishwasher" name="filtercheck" id="filtercheck"> Dishwasher
<input type="checkbox" value="Fridge" name="filtercheck" id="filtercheck"> Fridge
<input type="checkbox" value="Freezer" name="filtercheck" id="filtercheck"> Freezer<br>
<input type="checkbox" value="Washer" name="filtercheck" id="filtercheck"> Washer
<input type="checkbox" value="Dryer" name="filtercheck" id="filtercheck"> Dryer
<input type="checkbox" value="Fire Alarm" name="filtercheck" id="filtercheck"> Fire Alarm
<input type="checkbox" value="First Aid Kit" name="filtercheck" id="filtercheck"> First Aid Kit
<input type="checkbox" value="Fire Extinguisher" name="filtercheck" id="filtercheck"> Fire Extinguisher<br>
<input type="checkbox" value="TV" name="filtercheck" id="filtercheck"> TV
<input type="checkbox" value="Sky" name="filtercheck" id="filtercheck"> Sky
<input type="checkbox" value="Wifi" name="filtercheck" id="filtercheck"> Wifi
<input type="checkbox" value="Fireplace" name="filtercheck" id="filtercheck"> Fireplace
<input type="checkbox" value="Heaters" name="filtercheck" id="filtercheck"> Heaters<br>
<input type="checkbox" value="Spa" name="filtercheck" id="filtercheck"> Spa
<input type="checkbox" value="Pool" name="filtercheck" id="filtercheck"> Pool
<input type="checkbox" value="BBQ" name="filtercheck" id="filtercheck"> BBQ
<input type="checkbox" value="Off-street Parking" name="filtercheck" id="filtercheck"> Off-street Parking
<input type="checkbox" value="On-street Parking" name="filtercheck" id="filtercheck"> On-street Parking<br>
<input type="hidden" value="" id="filters_value" name="filters_value" />
Image Files Only: <input name="myFile" type="file" multiple /><br>
<input type="checkbox" id="terms_check" /> Agree to the <a href="#">Terms & Conditions</a><br><br><br>
<input type="button" id="form_btn_submit" value="Submit" onclick="toggle_visibility('myForm');
toggle_visibility('inProgress');
google.script.run.withSuccessHandler(updateOutput).processForm(this.parentNode);" />
</form>
<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Your Data is uploaded. Please check the <a href="https://docs.google.com/spreadsheets/d/12StuWSCebwRBBTxOcYEr8ksHN8PJhtDIE7NWi9UwGf0/edit?pli=1#gid=0&vpid=A2" target="_blank">spreadsheet</a>
</div>
<div id="output">
<!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>
</div>
<a href="http://www.nzholidayhomes.nz">Click here to back to main website</a>
</body>
</html>
thanks.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div>
<h1>Thanks</h1>
<p>Thank you for your submission.</p>
Name: <?= fname ?><br/>
Filters: <?= filters ?><br/>
Email: <?= email ?><br/>
File URL: <?= fileUrl ?><br/>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
