I am very new to Google Scripts - like I just started learning how to use it yesterday. I have put together a google drive dropzone based on code from this answer. I have my script working, and it uploads photos to the correct folder. The problem is, I am not able to upload files larger than 10mb, and I need to be able to upload video. I did a little research, and I found other questions addressing the same issue, but none of them had a solution to the problem.
Sorry for the messy code since this is another projet I modified.
Here is form.html:
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/flatly/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css">
<link href="https://fonts.googleapis.com/css?family=Catamaran:900" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script>
</head>
<body>
<div class="flex-center-wrap">
<div class="flex-center">
<div class="panel panel-default">
<div class="panel-heading">
<h2>Media Dropzone</h2>
</div>
<div class="panel-body">
<form class="dropzone" id="myForm" action="#">
<div class="fallback">
<input name="file" type="file" multiple/>
</div>
</form>
<div id="status" class="hidden">
<br>
<p id="status-message"></p>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var numUploads = {};
numUploads.done = 0;
numUploads.total = 0;
var myDropzone = new Dropzone("#myForm", { url: "#"});
myDropzone.on("addedfile", function() {
iteratorFileUpload();
});
// Upload the files into a folder in drive
// This is set to send them all to one folder (specificed in the .gs file)
function iteratorFileUpload() {
myDropzone.disable();
var allFiles = document.getElementsByTagName("input")[0].files;
if (allFiles.length == 0) {
alert('No file selected!');
} else {
numUploads.total = allFiles.length;
$("#status").removeClass("hidden");
$("#status-message").text("Uploading file " + numUploads.done + " of " + numUploads.total + "...");
for (var i = 0; i < allFiles.length; i++) {
sendFileToDrive(allFiles[i]);
}
}
}
function sendFileToDrive(file) {
var reader = new FileReader();
reader.onload = function (e) {
var content = reader.result;
console.log('Sending ' + file.name);
var currFolder = 'Something';
google.script.run.withSuccessHandler(function(){
numUploads.done = numUploads.done + 1;
if(numUploads.done !== numUploads.total){
$("#status-message").text("Uploading file " + numUploads.done + " of " + numUploads.total + "...");
} else{
$("#status-message").text("Uploading finished!");
}
}).withFailureHandler(function(e){
alert(e.message);
}).uploadFileToDrive(content, file.name, currFolder);
}
reader.readAsDataURL(file);
}
});
</script>
<style>
body, html{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
min-height: 100%;
overflow-x: hidden;
background-color: #3498db;
}
.flex-center-wrap{
height: 100vh;
width: 100vw;
padding: 0;
position: absolute;
top: 0;
left: 0;
margin: 0;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: flex;
align-items: center;
justify-content: center;
}
.flex-center{
position: relative;
max-height: 80vh;
width: 500px;
max-width: 90vw;
}
.dropzone{
height: 300px;
border: 3px dashed #3498db;
}
.dropzone .dz-message{
margin: 117px 0 !important;
}
.dz-progress,
.dz-error-message,
.dz-success-mark,
.dz-error-mark{
display: none !important;
}
h1,h2,h3,h4,h5,h6{
text-align: center;
font-family: 'Catamaran', sans-serif;
margin: 10px 0;
}
p{
text-align: center;
}
</style>
</body>And here is server.gs:
function doGet() {
return HtmlService.createHtmlOutputFromFile('form')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function uploadFileToDrive(base64Data, fileName) {
try{
var splitBase = base64Data.split(','),
type = splitBase[0].split(';')[0].replace('data:','');
var byteCharacters = Utilities.base64Decode(splitBase[1]);
var ss = Utilities.newBlob(byteCharacters, type);
ss.setName(fileName);
var folder;
try{
folder = DriveApp.getFolderById(""); //removed this for security
} catch(e){
folder = DriveApp.createFolder("social-media-dropzone");
}
var file = folder.createFile(ss);
return file.getName();
} catch(e){
return 'Error: ' + e.toString();
}
}
Is there any way to increase the limit, or should I scrap this method and try something other than Google scripts?
And here is server.gs using the Advanced Drive API:
function doGet() {
var output = HtmlService.createHtmlOutputFromFile('form').setSandboxMode(HtmlService.SandboxMode.IFRAME);
output.addMetaTag('viewport', 'width=device-width, initial-scale=1');
return output;
}
function uploadFileToDrive(base64Data, fileName) {
var splitBase = base64Data.split(','),
type = splitBase[0].split(';')[0].replace('data:','');
var byteCharacters = Utilities.base64Decode(splitBase[1]);
var ss = Utilities.newBlob(byteCharacters, type);
ss.setName(fileName);
//var file = folder.createFile(ss);
var folderId = ""; //removed for security
var file = {
title: fileName,
mimeType: ss.type,
parents: [{id: folderId }]
};
Drive.Files.insert(file, ss);
return null;
}
Even with the advanced API, uploads fail when they get too big. I tested it with an 8mb video and a 15mb video, and the latter failed.
