Converting Images to DataURIs

Overview:

One of the problems I used to have was that every time I did an app and I decided that I wanted to improve it's looks I always had to contend with where to host my images because it can be difficult to get images from your Google account. I first ran into this while browsing on GitHub and it took me quite a while before I figured out how to use it to solve the image hosting problem.

The code I'm giving you today not only provides you with the ability to host your images on your Google Drive but it also provides to webapp websites to give you and idea of how you can use them and to make it all in one app I did it as a multipage webapp. So if you've been wondering about how to do that well this is your chance to learn and get some free code at the same time. As always , the code is yours to do with as you please. But if blows up and causes you lots of problems that is your problem not mine. I write most of my code for myself and it is has problems I fix my own problems and that's what I expect you to do. I don't provide support or any warranties on any code.

I'm thinking about doing a YouTube video by taking a pristine copy of this code and getting it to work on a fresh account.

So this code has three parts:

A tool that converts normal images from a given url into a DataURI.
A webapp website that generates a large table of images with Google Apps Script and exports them to the webapp website all at one time.
A simple webapp website that was built by hand with simple image tags and then gets it's images from DataURIs that are stored on a Google Drive.

So let's get to the code. I provide the names of the code files and in some cases it's not actually necessary to have them in separate file s, I just like to organize things that way but when in comes to the html files I strongly recommend keeping them in the correctly named files because often those names are used with in the code as in HtmlService commands and also in templated HTML files.

This is a chart that I did to explain how I have integrated the use of DataURI's into my work flow for creating website images.

Code.gs

function onOpen(){

SpreadsheetApp.getUi().createMenu('My Menu')

.addItem('Media Converter', 'showImageConverterAsDialog')

.addItem('Build Media File List', 'buildMediaFileList')

.addItem('Build Sound FolderList', 'buildSoundFolderList')

.addToUi();

}

function saveDataURIInFile(filename,datauri,type) {

Logger.log('filename: %s\ndatauri: %s\ntype: %s\n',filename,datauri,type);

if(filename && datauri && type) {

var folder=DriveApp.getFolderById(getGlobal('MediaFolderId'));

var files=folder.getFilesByName(filename);

while(files.hasNext()) {

files.next().setTrashed(true);

}

var f=folder.createFile(filename,datauri,MimeType.PLAIN_TEXT);

return {name:f.getName(),id:f.getId(),type:type,uri:DriveApp.getFileById(f.getId()).getBlob().getDataAsString()};

}else{

throw('Invalid input in saveDataURIInFile.');

}

function showImageConverterAsDialog(){

var ui=HtmlService.createTemplateFromFile('mediaconverter').evaluate().setWidth(600).setHeight(550);

SpreadsheetApp.getUi().showModelessDialog(ui, 'Media Converter');

}

function include(filename){

return HtmlService.createHtmlOutputFromFile(filename).getContent();

}

function createDataTable(){

var data=getData();

var s='<table>';

for(var i=0;i<data.length;i++){

s+='<tr>';

for(var j=0;j<data[i].length;j++){

s+=Utilities.formatString('<td>%s</td>', data[i][j]);

}

s+='</tr>';

}

s+='</table>';

return s;

}

function convImageUrl(url){

var url=url || "http://jimesteban.com/images/mimincoopers.png";

var blob=UrlFetchApp.fetch(url).getBlob();

var b64Url='data:' + blob.getContentType() + ';base64,' + Utilities.base64Encode(blob.getBytes());

return b64Url;

}

function buildMediaFileList(){

var ss=SpreadsheetApp.getActive();

var sh=ss.getSheetByName('Media File List');

sh.clearContents();

var mA=[['Media File Name','Media File Type','Media File Id']]

var mediaFolder=DriveApp.getFolderById(getGlobal('MediaFolderId'));

var files=mediaFolder.getFiles();

while(files.hasNext()){

var file=files.next();

var s=file.getBlob().getDataAsString().split(',')[0];

var type=s.slice(s.indexOf(':')+1,s.indexOf(';'));

mA.push([file.getName(),type,file.getId()]);

}

sh.getRange(1,1,mA.length,mA[0].length).setValues(mA);

}

function buildSoundFolderList(){

var ss=SpreadsheetApp.getActive();

var sh=ss.getSheetByName('Sound Folder List');

sh.clearContents();

var mA=[['Sound File Name','Sound File Type','Sound File Id']]

var mediaFolder=DriveApp.getFolderById(getGlobal('SoundFolderId'));

var files=mediaFolder.getFiles();

while(files.hasNext()){

var file=files.next();

var s=file.getBlob().getDataAsString().split(',')[0];

var type=s.slice(s.indexOf(':')+1,s.indexOf(';'));

mA.push([file.getName(),type,file.getId()]);

}

sh.getRange(1,1,mA.length,mA[0].length).setValues(mA);

}

function getMediaSelectionList(){

var mediaFolder=DriveApp.getFolderById(getGlobal('MediaFolderId'));

var files=mediaFolder.getFiles();

var vA=[];

while(files.hasNext()){

var file=files.next();

vA.push([file.getName(),file.getId()]);

}

return vA;

}

function getSelectedFile(fileId){

var file=DriveApp.getFileById(fileId);

var dataURI=file.getBlob().getDataAsString();

var s=dataURI.split(',')[0];

var mediaType=s.slice(s.indexOf(':')+1,s.indexOf('/'));

var fileType=s.slice(s.indexOf('/')+1,s.indexOf(';'));

var fObj={name:file.getName(),uri:dataURI ,type:mediaType,filetype:fileType};

return fObj;

}

globals.gs

function getGlobals(){

var ss=SpreadsheetApp.getActive();

var sh=ss.getSheetByName('Globals');

var rg=sh.getDataRange();

var vA=rg.getValues();

var g={};

for(var i=0;i<vA.length;i++){

g[vA[i][0]]=vA[i][1];

}

return g;

}

function setGlobals(dfltObj){

if(dfltObj){

var ss=SpreadsheetApp.getActive();

var sh=ss.getSheetByName('Globals');

var rg=sh.getDataRange();

var vA=rg.getValues();

for(var i=0;i<vA.length;i++){

vA[i][1]=dfltObj[vA[i][0]];

}

rg.setValues(vA);

}

function getGlobal(name){

return getGlobals()[name];

}

function setGlobal(name,value){

var curObj=getGlobals();

curObj[name]=value;

setGlobals(curObj);

}

doGets.gs

function getScriptURL(qs) {

var url = ScriptApp.getService().getUrl();

//Logger.log(url + qs);

return url + qs ;

}

function doGet(e)

{

//Logger.log('query params: ' + Utilities.jsonStringify(e));

if(e.queryString !=='')

{

switch(e.parameter.mode)

{

case 'simplesite':

setPage('simplesite');

return HtmlService

.createTemplateFromFile('simplesite')

.evaluate()

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

.setTitle("Simple Site");

break;

case 'myimages':

setPage('myimages');

return HtmlService

.createTemplateFromFile('myimages')

.evaluate()

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

.setTitle("My Images");

break;

case 'mediaconverter':

setPage('mediaconverter');

return HtmlService

.createTemplateFromFile('mediaconverter')

.evaluate()

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

.setTitle("Media Converter");

break;

default:

setPage('mediaconverter');

return HtmlService

.createTemplateFromFile('mediaconverter')

.evaluate()

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

.setTitle("Media Converter");

break;

}

else

{

setPage('mediaconverter');

return HtmlService

.createTemplateFromFile('mediaconverter')

.evaluate()

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

.setTitle("Media Converter");

}

function getPageData()

{

var s='';

s+='<input type="button" value="Media Converter" onClick="getUrl(\'?mode=mediaconverter\');" />';

s+='<input type="button" value="My Images" onClick="getUrl(\'?mode=myimages\');" />';

s+='<input type="button" value="Simple Site" onClick="getUrl(\'?mode=simplesite\');" />';

var rObj={menu:s,title:getPage()};

Logger.log(rObj);

return rObj;

}

function include(filename) {

return HtmlService.createHtmlOutputFromFile(filename).getContent();

}

function setPage(page) {

var ps=PropertiesService.getUserProperties();

ps.setProperty('PageTitle', page);

return ps.getProperty('PageTitle');

}

function initPage() {

var ps=PropertiesService.getUserProperties();

ps.setProperty('PageTitle','');

return ps.getProperty('PageTitle');

}

function getPage() {

var ps=PropertiesService.getUserProperties();

var pt=ps.getProperty('PageTitle');

return pt;

}

function doGet1(e)

{

//Logger.log('query params: ' + Utilities.jsonStringify(e));

if(e.queryString !=='')

{

switch(e.parameter.mode)

{

case 'simplesite':

setPage('simplesite');

return HtmlService

.createTemplateFromFile('simplesite')

.evaluate()

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

.setTitle("Simple Site");

break;

case 'myimages':

setPage('myimages');

return HtmlService

.createTemplateFromFile('myimages')

.evaluate()

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

.setTitle("My Images");

break;

default:

setPage('myimages');

return HtmlService

.createTemplateFromFile('myimages')

.evaluate()

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

.setTitle("My Images");

break;

}

else

{

setPage('myimages');

return HtmlService

.createTemplateFromFile('myimages')

.evaluate()

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

.setTitle("My Images");

}

Images.gs

function getDataURI(fileId) {

var file=DriveApp.getFileById(fileId);

return file.getBlob().getDataAsString();

}

function getImagesPageContent() {

var ss=SpreadsheetApp.getActive();

var sh=ss.getSheetByName('MyImages');

var rg=sh.getRange(1,2,sh.getLastRow(),1);

var vA=rg.getValues();

var html='';

html+='<table>';

var n=0;

var w=300;

for(var i=0;i<vA.length;i+=3) {

html+='<tr>';

if(i%9==0){

html+=Utilities.formatString('<td colspan="3"><img id="img-%s" src="%s" width="%s" /></td>',n++,getDataURI(vA[i][0]),3*w);

continue;

}else{

html+=Utilities.formatString('<td><img id="img-%s" src="%s" width="%s" /></td>',n++,getDataURI(vA[i][0]),w);

html+=Utilities.formatString('<td><img id="img-%s" src="%s" width="%s" /></td>',n++,getDataURI(vA[i+1][0]),w);

html+=Utilities.formatString('<td><img id="img-%s" src="%s" width="%s" /></td>',n++,getDataURI(vA[i+2][0]),w);

}

html+='</tr>';

}

html+='</table>';

var bgimg=getDataURI(SpreadsheetApp.getActive().getSheetByName('MyImagesBackground').getRange('B1').getValue());

var hObj={heading:'My Images',content:html,bgimage:bgimg};

return hObj;

}

function getSimpleSiteImages() {

var ss=SpreadsheetApp.getActive();

var sh=ss.getSheetByName('SimpleSite');

var rg=sh.getDataRange();

var vA=rg.getValues();

var oObj={iA:[]};

for(var i=0;i<vA.length;i++) {

oObj.iA[i]=vA[i][2];

oObj[oObj.iA[i]]=getDataURI(vA[i][1]);

}

return oObj;

}

Resources.html

css1.html

<style>

body{

background-color:#fbf2eb;

}

input,select{

margin:2px;

padding:2px;

}

#wrapper{

width:98%;

height:100%;

background-color:#def882;

padding:5px;

border:2px solid #fae090;

min-width:500px;

max-width:600px;

margin:auto;

}

#selectedMedia{

text-align:center;

}

#savfil{

display:none;

}

.header{

//margin-left: 75px; /* Same as the width of the sidenav */

font-size: 16px;

padding: 0px 5px;

background-color:#fbd393;

height:60px;

}

</style>

css2.html

<style>

input[type="button"]{margin:2px 2px 5px 150px;}

body {

background-color:#dce8ce;

font-family: "Lato", sans-serif;

font-size:16px;

color:#ffffff;

}

.wrapper{

height:100%;

width:100%;

}

.sidenav {

height: 100%;

width: 150px;

position: fixed;

z-index: 1;

top: 0;

left: 0;

background-color: #EEE;

overflow-x: hidden;

padding-top: 5px;

}

.sidenav a {

padding: 6px 8px 6px 16px;

text-decoration: none;

font-size: 16px;

color: #818181;

display: block;

}

.sidenav a:hover,label:hover {

color: #770000;

}

.header{

//margin-left: 150px; /* Same as the width of the sidenav */

font-size: 16px;

padding: 0px 5px;

background:transparent;

height:100px;

background-repeat:no-repeat;

}

.subheader{

font-size: 16px;

padding: 0px 5px;

background:transparent;

}

.main {

//margin-left: 150px; /* Same as the width of the sidenav */

font-size: 16px; /* Increased text to enable scrolling */

padding: 0px 5px;

//background-color:#e9e8de;

background-color:#000000;

height:100%;

max-width:1000px;

margin:auto;

}

@media screen and (max-height: 450px) {

.sidenav {padding-top: 5px;}

.sidenav a {font-size: 16px;}

}

td,td{text-align:center;border:2px solid #7fc39e;}

</style>

mediaconverter.html

<!DOCTYPE html>

<html>

<head>

<?!= include('resources') ?>

<?!= include('css1') ?>

<?!= include('page') ?>

</head>

<body>

<?!= include('content1') ?>

<?!= include('mediascript') ?>

</body>

</html>

myimages.html

<!DOCTYPE html>

<html>

<head>

<?!= include('resources') ?>

<?!= include('css2') ?>

<?!= include('page') ?>

</head>

<body>

<?!= include('content2') ?>

<?!= include('imagesscript') ?>

</body>

</html>

simplesite.html

<!DOCTYPE html>

<html>

<head>

<style>

body{

background-color:#fbf2eb;

}

input,select{

margin:2px;

padding:2px;

}

#main{

height:100%s;

min-height:800px;

max-width:800;

min-width:400;

margin:auto;

}

#wrapper{

width:98%;

height:1600px;

background-color:#def882;

padding:5px;

border:2px solid #fae090;

min-width:500px;

max-width:900px;

margin:auto;

}

#header{

font-size: 16px;

padding: 0px 5px;

background:transparent;

height:100px;

}

p{

float:left;

}

img{border:3px solid #007700;}

input[type="button"]{margin-left:20px;}

</style>

$(function(){

google.script.run

.withSuccessHandler(updatePageData)

.getPageData();

google.script.run

.withSuccessHandler(function(iObj){

console.log(iObj);

for(var i=0;i<iObj.iA.length;i++) {

if(i==iObj.iA.length-1) {

$('#header').css('background-image','URL(' + iObj[iObj.iA[i]] + ')');

}else{

$('#' + iObj.iA[i]).attr('src',iObj[iObj.iA[i]]);

}

})

.getSimpleSiteImages();

});

function getUrl(qs){

google.script.run

.withSuccessHandler(loadNewPage)

.getScriptURL(qs);

}

function updatePageData(dObj){

$('#header').html(dObj.menu);

}

function loadNewPage(url){

window.open(url,"_top");

}

console.log('simplesite.html');

</script>

</head>

<body>

</div>

<h1>Simple Site</h1>

<h3>Summary:</h3>

The is a simple website to demonstrate how to add dataURI's to your website which is setup manually. Normally I like to use the templated html approach since it helps

to keep the pages looking better organized which improves it's maintainability. But I thought it would be useful to have an example of how to implement the use of

DataURIs on a simple site where the developer goes in and manually positions the images. The "MyImages" page HTML was completely built programmatically and then passed to the

html file with the DOM ready event function.

</p>

<hr/>

<h3>Description</h3>

<p>

<img id="img-2" alt="Sun3" style="float:left;width:150px;margin:15px;" />This simple site is part of a 3 page Google WebApp which demonstrates how to make and store

images as dataURI's so that you can utilize your Google Account for storing images rather than requiring another site to host your images. The main page is a tool for

converting images from a known URL to dataURIs and storing them on your Google Drive. The file ids are collected and store in a spreadsheet for distribution to other projects

as needed the simplicity of getting images in this way save the developer from having to find a place to host images outside of Google. To use images of your own all you need to

do is upload them to Google Photo Library. You can take those images which have already been sized by you photo editor and converted to dataURIs and store them on your Google.

This function is performed with a very simple Javascript function utilizing the Google Apps Script to return the URI via the withSuccessHandler()

which places it into the source of the image with a simple JQuery command. You can view that right now with your browser developer tools.

</p>

<hr />

<h3>From Your Personal Computer to Your Website</h3>

<p><img id="img-3" style="float:right;width:700px;margin-left:15px;" />This is a chart made with Draw.IO Diagrams which is a great tool. It highlights some of the steps in getting images from your pc to your website using DataURI's it also

contains some of the Javascript and Google Apps Script which is used along the way. This image was generated by Data.IO Diagrams export tools. It was then downloaded to a

computer and then uploaded to Google Photo Library. From the libary it was easy to get the URL and paste it into the Image Converter and save on the Google Drive as a DataURI.

I have found the conversion quality to be quite good.

</p>

</div>

</body>

</html>

mediascript.html

$(function(){

google.script.run

.withSuccessHandler(updatePageData)

.getPageData();

google.script.run

.withSuccessHandler(function(vA){

var select=document.getElementById('mediaSel');

select.options.length=0;

select.options[0]=new Option('Select Media File','');

for(var i=0;i<vA.length;i++)

{

select.options[i+1] = new Option(vA[i][0],vA[i][1]);

}

})

.getMediaSelectionList();

});

function getUrl(qs){

google.script.run

.withSuccessHandler(loadNewPage)

.getScriptURL(qs);

}

function updatePageData(dObj){

$('#header').html(dObj.menu);

$('#header #ttl').html(dObj.title);

$('#end').css('display','none');

}

function loadNewPage(url){

window.open(url,"_top");

}

function updateSelectionList(){

google.script.run

.withSuccessHandler(function(vA){

var select=document.getElementById('mediaSel');

select.options.length=0;

select.options[0]=new Option('Select Media File','');

for(var i=0;i<vA.length;i++)

{

select.options[i+1] = new Option(vA[i][0],vA[i][1]);

}

})

.getMediaSelectionList();

google.script.run.buildMediaFileList();

}

function convertURLToMediaURI(){

var url=$('#mediaUrls').val();

if(url) {

//console.log(url);

var s0='<h3>From URL:</h3><img src="' + url + '" />';

var s4='<h3>From URL:</h3><audio controls id="audio1" src="'+ url +'"></audio></audio><input type="button" value="Play" onClick="play(\'audio1\');" />';

var ext=url.slice(-3);

//console.log(ext);

if(ext=='mp3'){

$('#urlDiv').html(s4);

}else{

$("#urlDiv").html(s0);

}

google.script.run

.withSuccessHandler(function(uri){

var type=uri.split(',')[0].slice(uri.indexOf(':')+1,uri.indexOf(';'));

var s1='<h3>From URI:</h3><img src="' + uri + '" />';

var s5='<h3>From URI:</h3><audio controls id="audio2" src="' + uri + '"></audio><input type="button" value="Play" onClick="play(\'audio2\');" />';

if(type.startsWith('image')){

$('#mediaURIs').html(s1);

}else{

$('#mediaURIs').html(s5);

}

var s2='<p>Type: ' + type + '</p>';

$('#typeDiv').html(s2);

$('#duri').val(uri);

$('#savfil').css('display','block');

//console.log(uri);

})

.convImageUrl(url);

}else{

alert('Invalid or Missing Url');

}

function savDataURI(){

var filename=$('#filnam').val();

var datauri=$('#duri').val();

var t=datauri.split(',')[0];

var type=t.slice(t.indexOf(':')+1,t.indexOf('/'));

if(filename){

google.script.run

.withSuccessHandler(function(fObj){

var s0='<h3>From FileName: '+ fObj.name +'</h3><audio controls id="audio3" src="'+ fObj.uri +'"></audio><input type="button" value="Play" onClick="play(\'audio3\');" />';

var s1='<h3>From FileName: '+ fObj.name +'</h3><img src="'+ fObj.uri +'" />';

if(type=='audio'){

$('#plafil').html(s0);

}else{

$('#plafil').html(s1);

}

})

.saveDataURIInFile(filename,datauri,type)

}else{

window.alert('No filename');

}

function play(id){

var elem=document.getElementById(id);

elem.play();

}

function showSelectedMedia(){

var fileId=$('#mediaSel').val();

google.script.run

.withSuccessHandler(function(fObj){

var s0='<br /><strong>File Name:</strong> '+ fObj.name + '<br /><audio controls src="'+ fObj.uri +'" title="' + fObj.filetype +'" />';

var s1='<br /><strong>File Name:</strong> '+ fObj.name + '<br /><img src="'+ fObj.uri +'" title="' + fObj.filetype + '" />';

if(fObj.type=='audio'){

//$('#selectedMedia').html(s0);

$(s0).prependTo('#selectedMedia');

}else{

//$('#selectedMedia').html(s1);

$(s1).prependTo('#selectedMedia');

}

})

.getSelectedFile(fileId);

}

function clearSelectedMedia() {

$('#selectedMedia').html('');

$('#urlDiv').html('');

$('#mediaURIs').html('');

$('#savefile').html('');

$('#plafil').html('');

$('#typeDiv').html('');

$('#savfil').css('display','none');

$('#filnam').val('');

}

function getWidthIt() {

var imgs=$('img');

var w=500;

var s='';

for(var i=0;i<imgs.length;i++) {

s+='image[' + i + ']= ' + imgs[i].width + '\n';

if(imgs[i].width>w) {

imgs[i].width=w;

}

//window.alert(s);

}

function clearUrl() {

$('#mediaUrls').val('')

}

console.log('mediascript.html');

</script>

content1.html

</div>

</div>

</div>

content2.html

</div>

<p>

This is a simple Google Apps Script WebApp to demonstrate the use of DataURI's as a way to be able utilize images stored on your Google Drive directly on to your website.

The fairly large delay is due to the fact that it was loading a considerable number of sunset and sunrise images. But when they arrive they get loaded rather quickly. If you

have a chance to view the other page you will see an example of a more normal although a bit old school website where the developer hand placed all of the image tags. In the

current page all of the image tags were built on the Google Server using Google Apps Script and passed back the the html page in one big object. The local javascript took

them and placed the entire clump of them all in one div.

</p>

</div>

</div>

page.html

$(function(){

google.script.run

.withSuccessHandler(updatePageData)

.getPageData();

});

function getUrl(qs){

google.script.run

.withSuccessHandler(loadNewPage)

.getScriptURL(qs);

}

function updatePageData(dObj){

$('.sidenav').html(dObj.menu);

$('.header #ttl').html(dObj.title);

}

function loadNewPage(url){

window.open(url,"_top");

}

console.log('page.html');

</script>

imagesscript.html

$(function(){

google.script.run

.withSuccessHandler(updatePageData)

.getPageData();

google.script.run

.withSuccessHandler(function(hObj){

$('#hdg1').html(hObj.heading);

$('#images').html(hObj.content);

$('.header').css('background-image','URL(' + hObj.bgimage + ')');

})

.getImagesPageContent();

});

function getUrl(qs){

google.script.run

.withSuccessHandler(loadNewPage)

.getScriptURL(qs);

}

function updatePageData(dObj){

$('.header').html(dObj.menu);

//$('.header #ttl').html(dObj.title);

}

function loadNewPage(url){

window.open(url,"_top");

}

function updateSelectionList(){

google.script.run

.withSuccessHandler(function(vA){

var select=document.getElementById('mediaSel');

select.options.length=0;

select.options[0]=new Option('Select Media File','');

for(var i=0;i<vA.length;i++)

{

select.options[i+1] = new Option(vA[i][0],vA[i][1]);

}

})

.getMediaSelectionList();

google.script.run.buildMediaFileList();

}

function convertURLToMediaURI(){

var url=$('#mediaUrls').val();

if(url) {

//console.log(url);

var s0='<h3>From URL:</h3><img src="' + url + '" />';

var s4='<h3>From URL:</h3><audio controls id="audio1" src="'+ url +'"></audio></audio><input type="button" value="Play" onClick="play(\'audio1\');" />';

var ext=url.slice(-3);

//console.log(ext);

if(ext=='mp3'){

$('#urlDiv').html(s4);

}else{

$("#urlDiv").html(s0);

}

google.script.run

.withSuccessHandler(function(uri){

var type=uri.split(',')[0].slice(uri.indexOf(':')+1,uri.indexOf(';'));

var s1='<h3>From URI:</h3><img src="' + uri + '" />';

var s5='<h3>From URI:</h3><audio controls id="audio2" src="' + uri + '"></audio><input type="button" value="Play" onClick="play(\'audio2\');" />';

if(type.startsWith('image')){

$('#mediaURIs').html(s1);

}else{

$('#mediaURIs').html(s5);

}

var s2='<p>Type: ' + type + '</p>';

$('#typeDiv').html(s2);

$('#duri').val(uri);

$('#savfil').css('display','block');

//console.log(uri);

})

.convImageUrl(url);

}else{

alert('Invalid or Missing Url');

}

function savDataURI(){

var filename=$('#filnam').val();

var datauri=$('#duri').val();

var t=datauri.split(',')[0];

var type=t.slice(t.indexOf(':')+1,t.indexOf('/'));

if(filename){

google.script.run

.withSuccessHandler(function(fObj){

var s0='<h3>From FileName: '+ fObj.name +'</h3><audio controls id="audio3" src="'+ fObj.uri +'"></audio><input type="button" value="Play" onClick="play(\'audio3\');" />';

var s1='<h3>From FileName: '+ fObj.name +'</h3><img src="'+ fObj.uri +'" />';

if(type=='audio'){

$('#plafil').html(s0);

}else{

$('#plafil').html(s1);

}

})

.saveDataURIInFile(filename,datauri,type)

}else{

window.alert('No filename');

}

function play(id){

var elem=document.getElementById(id);

elem.play();

}

function showSelectedMedia(){

var fileId=$('#mediaSel').val();

google.script.run

.withSuccessHandler(function(fObj){

var s0='<br /><strong>File Name:</strong> '+ fObj.name + '<br /><audio controls src="'+ fObj.uri +'" title="' + fObj.filetype +'" />';

var s1='<br /><strong>File Name:</strong> '+ fObj.name + '<br /><img src="'+ fObj.uri +'" title="' + fObj.filetype + '" />';

if(fObj.type=='audio'){

//$('#selectedMedia').html(s0);

$(s0).prependTo('#selectedMedia');

}else{

//$('#selectedMedia').html(s1);

$(s1).prependTo('#selectedMedia');

}

})

.getSelectedFile(fileId);

}

function clearSelectedMedia() {

$('#selectedMedia').html('');

$('#urlDiv').html('');

$('#mediaURIs').html('');

$('#savefile').html('');

$('#plafil').html('');

$('#typeDiv').html('');

$('#savfil').css('display','none');

$('#filnam').val('');

}

function getWidthIt() {

var imgs=$('img');

var w=500;

var s='';

for(var i=0;i<imgs.length;i++) {

s+='image[' + i + ']= ' + imgs[i].width + '\n';

if(imgs[i].width>w) {

imgs[i].width=w;

}

//window.alert(s);

}

function clearUrl() {

$('#mediaUrls').val('')

}

console.log('mediascript.html');

</script>

Video

The following YouTube video provides a demonstration of how this code functions. The images are not provided.