I'm trying to send a submitted images to unique subfolder any time some user send images through my google form, this is my code so far :
var idnumber = Utilities.formatDate(new Date(), 'America/Bogota', 'ddMMyyyyHHmmss')
function onFormSubmit(e) {
var driveMainFolder = 'MyFolder'
var driveSubFolder = idnumber;
// Create subfolder
var parentFolder = DriveApp.getFoldersByName(driveMainFolder).next();
var newFolder = parentFolder.createFolder(driveSubFolder);
// Move files to subfolder
var files = DriveApp.getFoldersByName(driveMainFolder).next().getFiles();
while (files.hasNext()) {
var file = files.next();
var destination = DriveApp.getFoldersByName(driveSubFolder).next();
destination.addFile(file);
var pull = DriveApp.getFoldersByName(driveMainFolder).next();
pull.removeFile(file);
}
}
It kind of works, after sending the images some of these images stay in "MyFolder" instead of moving directly to the unique subfolder.
This trigger is being called in the event OnFormSubmit, is created in the Google Form Spreadsheet.
In "my Executions" the trigger doesn't display anything wrong but not the whole images moves to unique subfolder.
I'm sending 5 images, in average each one has 18kb.
Is there a way to upload images from a Google Form and add a trigger to organize the images ? Thanks !
I have been trying to use sheetJS and follow examples that completely work in jsfiddle, however I cannot get to work when creating a new js file. I have tried multiple browswers, but keep getting the same error "XLSX is not defined"
I have tried this Excel to JSON javascript code? and wanted to ask on there but needed 50 rep to leave a comment.
Here is the code snippet and am including the following files in this order:
shim.js, jszip.js,xlsx.js
var oFileIn;
$(function() {
oFileIn = document.getElementById('xlf');
if(oFileIn.addEventListener) {
console.log("if hit")
oFileIn.addEventListener('change', filePicked, false);
}
$("#xlf").on("change",function(oEvent){
console.log("jqiey workd?")
filePicked(oEvent)
})
});
function filePicked(oEvent) {
// Get The File From The Input
var oFile = oEvent.target.files[0];
var sFilename = oFile.name;
// Create A File Reader HTML5
var reader = new FileReader();
// Ready The Event For When A File Gets Selected
reader.onload = function(e) {
var data = e.target.result;
var cfb = XLSX.read(data, {type: 'binary'});
console.log(cfb)
cfb.SheetNames.forEach(function(sheetName) {
// Obtain The Current Row As CSV
var sCSV = XLS.utils.make_csv(cfb.Sheets[sheetName]);
var oJS = XLS.utils.sheet_to_json(cfb.Sheets[sheetName]);
$("#my_file_output").html(sCSV);
console.log(oJS)
$scope.oJS = oJS
});
};
I have tried numerous examples, this is just the only one I came across that worked on jsfiddle. The same error occurs if it is XLS or XLSX...
In other examples such as the one provided by sheetJS it has
var X = XLSX;
right under the script segment, and will automatically get error that XLSX is not defined on that line.
Anyone come across this, or know what the issue is?
-Thanks!!!
The included files with the project weren't correct. The project had a corrupt js file. I fixed it by manually adding all sheet project download folder and replacing files.
I've just started to use GAS and I'm having issues with uploading files to a GDrive folder.
I'm using this way to read the form (html+bootstrap) file inputs and generate the files into a drive folder. There are 4 file inputs for different topics on the form.
function processForm(theForm) {
//Variables from files to upload
var talleres = theForm.talleres;
var sistEval = theForm.sistEval;
var otrosDoc = theForm.otrosDoc;
var matsDigi = theForm.matsDigi;
var folder = DriveApp.getFolderById(folderId);
var nombTuto = theForm.curso+'_'+theForm.nombre+'_'+theForm.paterno+'_'+theForm.materno;
var foldTuto = DriveApp.createFolder(nombTuto);
var doc = foldTuto.createFile(talleres);
var doc2 = foldTuto.createFile(sistEval);
var doc3 = foldTuto.createFile(otrosDoc);
var doc4 = foldTuto.createFile(matsDigi);
folder.addFolder(foldTuto);
DriveApp.removeFolder(foldTuto);
I've limited the file size with a js validation on the form.html to 100Mb each file, but when I try to upload more than 50Mb in total (considering the 4 files) the console of bugzilla returns the message:
NetworkError: Connection failure due to HTTP 500
And the web gets frozen, and obviously didn't save anything.
So, I need to know if i have to change the method for upload because I'm searching on the documentation of GAS page but can't find anything about "upload Quotas" or detailed information from the error 500, just like "Internal Server Error".
Sorry about my english, regards.
With the Drive Service of Google Apps Script the limit is set to 10MB per upload. I guess that the Blob function has the same limits that the others, it's an oversight from Google.
Throws an exception if content is larger than 10MB.
Issue already reported here: #552, #2806
I guess this limitation is due to the limitation of URL Fetch POST size.
I am trying to add some local image icon after the url on web page in web view.
The piece of JS function code trying to execute is
var anchors = document.getElementsByClassName('title');
var img = new Image();
img.src = 'file:///android_asset/high.png';
for (var i=0; i<anchors.length; i++)
{
links.push(anchors[i].children[0].href);
var tag = anchors[i].children[0];
tag.insertAdjacentHTML('AfterEnd', ' <img src=img alt=\"My Image\"/>');
}
Can not see the image appended, whereas I am getting error "Not Allowed to load local resources"
My question is Why I am not able to see images ? and also I am getting above error.
These palette cycle images are breathtaking: http://www.effectgames.com/demos/canvascycle/?sound=0
I'd like to make some (or all) of these into desktop backgrounds.
I could use an animated gif version, but I have no idea how to get that from the canvas "animation". Is there anything available yet that can do something along these lines (speficially for that link and generally speaking).
I have a solution but it is dependent on you being familiar with the Javascript Console in Firefox (install the Firebug plugin), Chrome or Safari.
In case you're not, google it, or try to just right click anywhere on the page, choose "Inspect Element" and look for "Console"...
What the code does:
It allows you to take 10 screen-grabs of the CANVAS element every 1/10th of a second. Both these values are easily modified since you can tweak to find the number of iterations you'd like to get. For the example you give, the canvas element ID is 'mycanvas'.
Once it has the screen-grabs it outputs the images into the page. At that point you can save the individual images.
Running the code
Paste in the following code into the Javascript Console:
var canvas = document.getElementById("mycanvas");
var shots = [];
var grabLimit = 10; // Number of screenshots to take
var grabRate = 100; // Miliseconds. 500 = half a second
var count = 0;
function showResults() {
//console.log(shots);
for (var i=0; i<shots.length; i++) {
document.write('<img src="' + shots[i] + '"/>\n');
}
}
var grabber = setInterval(function(){
count++;
if (count>grabLimit) {
clearInterval(grabber);
showResults();
}
var img = canvas.toDataURL("image/png");
shots.push(img);
}, grabRate);
and press CTRL-Enter to execute it.
It should take a few seconds to run so please be patient.
After that you should have all the necessary frames (any maybe more) to create an animated GIF via ImageMagick, this website MakeAGif.com, or other app.
Side Note
If for some reason you need to output as GIF of JPG instead of PNG just update, as needed, this:
var img = canvas.toDataURL("image/png");
to one of these:
var img = canvas.toDataURL("image/gif");
var img = canvas.toDataURL("image/jpg");
Support for output as gif or jpg may not be in all browsers (should be most).
(BIG) UPDATE #1
First, I'm keeping the code above intact rather than updating it because both approaches could be helpful to others.
Second, this new code DOES NOT SOLVE the problem. It kind-of does but one major drawback. It creates an animated GIF (Yipee!) but its in various shades of green (Boooo!). Not sure how/why, but maybe someone can take it from here and see what I've missed.
So here we go... same rules apply - copy and paste it into the Javascript Console of a browser (it lags in Firefox but Google Chrome its pretty fast... 10 seconds or so to run).
var jsf = ["/Demos/b64.js", "LZWEncoder.js", "NeuQuant.js", "GIFEncoder.js"];
var head = document.getElementsByTagName("head")[0];
for (var i=0;i<jsf.length;i++) {
var newJS = document.createElement('script');
newJS.type = 'text/javascript';
newJS.src = 'http://github.com/antimatter15/jsgif/raw/master/' + jsf[i];
head.appendChild(newJS);
}
// This post was very helpful!
// http://antimatter15.com/wp/2010/07/javascript-to-animated-gif/
var w = setTimeout(function() { // give external JS 1 second of time to load
console.log('Starting');
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext('2d');
var shots = [];
var grabLimit = 10; // Number of screenshots to take
var grabRate = 100; // Miliseconds. 500 = half a second
var count = 0;
function showResults() {
console.log('Finishing');
encoder.finish();
var binary_gif = encoder.stream().getData();
var data_url = 'data:image/gif;base64,'+encode64(binary_gif);
document.write('<img src="' +data_url + '"/>\n');
}
var encoder = new GIFEncoder();
encoder.setRepeat(0); //0 -> loop forever, 1+ -> loop n times then stop
encoder.setDelay(500); //go to next frame every n milliseconds
encoder.start();
var grabber = setInterval(function(){
console.log('Grabbing '+count);
count++;
if (count>grabLimit) {
clearInterval(grabber);
showResults();
}
var imdata = context.getImageData(0,0,canvas.width,canvas.height);
encoder.addFrame(context);
}, grabRate);
}, 1000);
It uses some helpful code, pointers and JS files referenced in this blog post JavaScript to (Animated) GIF. I use some JS files directly but you should copy these locally if you're going to use it a lot.
The output for me was this GIF:
So its something, but not what you need...
EDIT: Finally put that code to use, here's the result:
Imagick generated a large image, so I went ahead and optimized with gimp.
The client-side code is a modified version of Michael's code:
var canvas = document.getElementById("mycanvas");
var shots = [];
var grabLimit = 30; // Number of screenshots to take
var grabRate = 100; // Miliseconds. 500 = half a second
var count = 0;
function postResults() {
console.log("START---------");
for (var i = 0; i < shots.length; i++) {
document.write(shots[i]+"<br />");
}
console.log("END-----------");
}
var grabber = setInterval(function(){
count++;
if (count>grabLimit) {
clearInterval(grabber);
postResults();
}
var img = canvas.toDataURL("image/png");
shots.push(img.replace("data:image/png;base64,",""));
}, grabRate);
It will write a bunch of base64 strings to the screen. Copy them and save them into a text file and then upload it to your web server. Then run the other script (see below) and it will write the image to your web server. The resulting image will be large and possibly choppy, so open up GIMP and optimize for difference and GIF. When saving, force it to use the same delay for all frames so the animation is smooth.
May not be too hard using PHP.
Grab the dataURL (base64 encoded string) for each frame with JS and send it to the server.
Decode the base64 strings and convert them to Imagick objects.
Add these Imagick objects as frames to a new Imagick object.
Save the Imagick object to the file system as a GIF.
Since michael already posted a nice JS solution, I'll add the server side code if you wish to automate it:
<?php
$imageData = array_map('rtrim', file('data.txt', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES)); //base 64 strings separated by newlines
$delay = 100;
$filename = 'coolmoviebro.gif';
$gif = new Imagick();
for($i = 0; $i < count($imageData); $i++) {
$tempImg = new Imagick();
$tempImg->readimageblob(base64_decode($imageData[$i]));
$gif->addImage($tempImg);
}
$gif->setFormat('gif');
$gif->setImageDelay($delay);
$gif->writeImages($filename, true);
?>
I haven't written much PHP for a year or two so be sure to double check everything and so on.
I took a look at the code, and it seems like it should be possible with a little hacking.
By looking at the list of cycle objects in Palette.Cycles, you should be able to figure out the cycle length of each cycle with the cycle.high, cycle.low, and cycle.rate fields. That said, you'll need a different algorithm for each of the six possible values for cycle.reverse.
Once you know the length of each cycle in the list (in milliseconds, if I'm reading the code correctly), you can find the least common multiple of all of the cycle lengths, which would tell you the total length of the animation. In practice, though, you'd want to floor-divide them by your sample period first, (say, 100 milliseconds for ten frames a second) in order to get a lower common multiple.
Then rig the animate function in main.js to take a tickCount parameter and pass that into palette.cycle, instead of using anything based on real time. Increase the tick count by your sample period with each iteration.
From there, you should be able to modify the Bitmap class's render method, adding the necessary logic to rip the canvas to a file. There appear to be libraries that can manage this last bit for you. I would recommend saving the files using the tick count as the file name (with enough leading zeros to keep them in order.) Stitching all the images together into an animated GIF might be possible to execute as a batch job using the right software.
Of course, I haven't actually tried this. You might want to put in checks, for instance, to make sure that you don't stumble upon an animation with an epic cycle length and creation millions of images on your hard drive.
As an aside, you could also, with a little more work, figure out the exact time until the next update and take irregular samples, but you'd have to figure out how to store that delay information such that you could use it to assemble the completed GIF.
Sadly, according to the art creator, it is not quite possible to convert it to GIF animation due to different parts of the picture having different cycles.
Try PhantomJS
This script saves 100 frames.
var webPage = require('webpage');
var fs = require('fs');
var page = webPage.create();
var NB_FRAME = 100;
var current = 0;
page.open('http://www.effectgames.com/demos/canvascycle/?sound=0',
function(status) {
if (status === "success") {
var current = 0;
var grabber = setInterval(function () {
var frame = page.evaluate(function() {
return document.getElementById('mycanvas').toDataURL("image/png").split(",")[1];
});
fs.write("./frame-" + current + ".png",atob(frame), 'wb');
if (++current === NB_FRAME) {
window.clearInterval(grabber);
phantom.exit(0);
}
}, 1000);
}
});
Run it:
phantomjs SaveCanvasFrame.js
Then use ImageMagick
convert *.png animated.gif
Here we go :