Calling Image File on Google App Scripts to Upload into GoogleDrive - javascript

I am trying to set up a way to upload image files into a google drive. It will create a folder using a timeid and place the image inside the folder it created. I am having trouble calling out the image file. This is how I am attempting this, the folder gets created but no image.
Please ignore any missing var for the timeid variable. This is working fine.
Error given:
ReferenceError: imgInp is not defined
Thank you in advance for your help!
Code.gs
var day = d.getDate();
var month = d.getUTCMonth();
var hour = d.getHours();
var minutes = d.getMinutes();
var realmonth = month+1;
var timeid = String(year)+"-"+String(realmonth)+"-"+String(day)+"-"+String(hour)+"-"+String(minutes);
var foldername=timeid;
var parentFolder=DriveApp.getFolderById("##############");
function upload(){
var newFolder=parentFolder.createFolder(timeid);
var folderidlookup = newFolder.getId();
var destination = DriveApp.getFolderById(folderidlookup);
var imgf = imgInp;
var contentType = 'image/jpeg';
var imgf = imgf.getAs(contentType);
destination.createFile(imgf)
}
Html
<form>
<div class="file-field input-field">
<div class="waves-effect waves-light btn" id="wholebtn"><i class="material-icons right">cloud</i>Browse
<input type="file" name="imgInp" id="imgInp" onchange="loadFile(event)">
</div>
<div class="file-path-wrapper">
<input type="text" class="file-path">
</div>
</div>
</form>
<button class="btn waves-effect waves-light" type="submit" name="action" id ="button">Submit
<i class="material-icons right">send</i>
</button>
JS
<script>
document.getElementById("button").addEventListener("click",upload);
function upload(){
google.script.run.upload();
}
</script>

The error you're getting is because you're trying to use a imgInp variable which you don't have it defined in any part of the code. You can get the blob file from the input, convert it to a binary array string, pass it to the server-side and finally use it to create your blob and the given Drive file, for this I used the code from this answer.
Using the examples for how to work with forms and success and failure handlers from the HTML Service guide, I put together the below code which worked successfully uploading the given image:
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form>
<div class="file-field input-field">
<div class="waves-effect waves-light btn" id="wholebtn"><i class="material-icons right">cloud</i>Browse
<input type="file" name="imgInp" id="imgInp">
</div>
<div class="file-path-wrapper">
<input type="text" class="file-path">
</div>
</div>
<button class="btn waves-effect waves-light" name="action" id="button">Submit
<i class="material-icons right">send</i>
</button>
</form>
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
// Add event listeners
window.addEventListener('load', preventFormSubmit);
document.getElementById("button").addEventListener("click", upload);
// Handler function
function logger(e) {
console.log(e)
}
async function upload() {
// Get all the file data
let file = document.querySelector('input[type=file]').files[0];
// Get binary content, we have to wait because it returns a promise
let fileBuffer = await file.arrayBuffer();
// Get the file content as binary and then convert it to string
const data = (new Uint8Array(fileBuffer)).toString();
// Pass the binary array string to uploadG funciton on code.gs
google.script.run.withFailureHandler(logger).withSuccessHandler(logger).uploadG(data);
}
</script>
</body>
</html>
Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function uploadG(imgInp){
var parentFolder=DriveApp.getFolderById("[FOLER-ID]");
var newFolder = parentFolder.createFolder('test webApp');
var folderidlookup = newFolder.getId();
var destination = DriveApp.getFolderById(folderidlookup);
var contentType = 'image/jpeg';
// Convert the binary array string to array and use it to create the Blob
var blob = Utilities.newBlob(JSON.parse("[" + imgInp + "]"), contentType);
blob = blob.getAs(contentType);
destination.createFile(blob)
return 'Filed uploaded!';
}

File Upload Dialog
Run upLoadMyDialog() from script editor to get it started. The select file and click upload.
function fileUpload(obj) {
var d=new Date();
var ts=Utilities.formatDate(d, Session.getScriptTimeZone(), "yyyy-MM-dd-HH-mm");
var folder=DriveApp.getFolderById("****** Enter FolderId *******");
var file=folder.createFile(obj.file1).setName(ts);
}
function uploadMyDialog() {
var ss=SpreadsheetApp.getActive();
var html='<form><input type="file" name="file1"/><br /><input type="button" value="Upload" onClick="google.script.run.fileUpload(this.parentNode);" /></form>';
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html),"Upload File");
}
With eventListener:
function uploadMyDialog() {
var ss=SpreadsheetApp.getActive();
var html='<form id="f1"><input type="file" name="file1"/><br /><input type="button" value="Upload" id="btn1" /></form>';
html+='<script>window.onload=function(){document.getElementById("btn1").addEventListener("click",function(){google.script.run.fileUpload(document.getElementById("f1"))})}</script>';
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html),"Upload File");
}

Related

JavaScript - Load a file twice in a row

Good day,
I have the following code to load a ".TXT" file into a web page
function load(event) {
let fr = new FileReader();
fr.onload = function() {
let load0 = JSON.parse(fr.result);
console.log(load0);
console.log("Ready!");
};
fr.readAsText(event.target.files[0]);
}
function loadInput(event) {
document.getElementById("loadInputButton").click();
}
<html>
<body>
<input type="button" onclick="loadInput(event)" />
<input id="loadInputButton" type="file" accept="text" onchange="load(event)" />
</body>
</html>
It works fine but only once. After I once load the file it will not work anymore. I try to load the same file again but the function produces nothing.
May I ask for your help solving it?
Thank you,
Eugene
Clear the value of the input after using it, so that the change event will fire when you select the same file.
function load(event) {
let fr = new FileReader();
fr.onload = function() {
let load0 = JSON.parse(fr.result);
console.log(load0);
console.log("Ready!");
event.target.value = '';
};
fr.readAsText(event.target.files[0])
}
function loadInput(event) {
document.getElementById("loadInputButton").click();
}
<html>
<body>
<input type="button" onclick="loadInput(event)" />
<input id="loadInputButton" type="file" accept="text" onchange="load(event)" />
</body>
</html>

Google Scripts/HTML/JavaScript Upload File to Folder Error Argument cannot be null: blob

I am creating an online HTML form that gives people the option to upload a file. I am using google sheets to collect the data so I am using their google scripts feature. When I run my code everything works, meaning I get data inserted into cells, but not the file upload. Here is my Google Scripts code for the file upload:
function doGet(request) {
return HtmlService.createTemplateFromFile('Index')
.evaluate();
}
/* #Include JavaScript and CSS Files */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function uploadFiles(data){
var folder = DriveApp.getFolderById('1pp1ELzGa2fZqU4IHAasZMHsmYx19pnYv');
var createFile = folder.createFile(data.image);
return createFile.getUrl();
}
From what I can tell the problem is at the data.image. This is where I am trying to retrieve my image so I can upload it into the folder. It must be that uploadFiles(data) is not properly bringing in data.
Here is the HTML and JavaScript:
<form id="myForm" onsubmit="handleFormSubmit(this)">
<h1 class="h4 mb-4 text-center" style="text-align:center"> <center>File Upload Testing</center></h1>
<table>
<tr>
<td colspan="11"><input type="file" id="image"></td>
</tr>
<input type="hidden" id="fileURL" name="fileURL">
</table>
<button type="submit" class="button button1" id="submitBtn">Submit</button>
</form>
<script>
document.getElementById('submitBtn').addEventListener('click',
function(e){
google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode);;}
)
function onSuccess(data){
document.getElementById("fileURL").value = data;
}
</script>
I have a feeling that the e parameter is not retrieving the data above, however I don't really understand how it works. It could also be this.parentNode that's not grabbing the fike.
I am using the onSuccess function to retrieve the link so I can put it into my google sheet for quick access.
This is the error I receive;
Here is a link to the google sheet. To reach google scripts go to 'Tools -> Script Editor'.
https://docs.google.com/spreadsheets/d/16w8uB4OZHCeD7cvlrUv5GHP72CWxQhO1AAkF9MMSpoE/edit?usp=sharing
Here is another technique I attempted to use:
Javascript:
function uploadthis(fileForm){
const file = fileForm.image.files[0];
const fr = new FileReader();
fr.onload = function(e) {
const obj = {
// filename: file.name
mimeType: file.type,
bytes: [...new Int8Array(e.target.result)]
};
google.script.run.withSuccessHandler((e) => console.log(e)).uploadFiles(obj);
};
fr.readAsArrayBuffer(file);
}
Google Script:
function uploadFiles(data){
var file = Utilities.newBlob(data.bytes, data.mimeType); // Modified
var folder = DriveApp.getFolderById('1pp1ELzGa2fZqU4IHAasZMHsmYx19pnYv');
var createFile = folder.createFile(file);
return createFile.getId(); // Added
}
Thank you!

Why is this alert box not popping up when button clicked?

I've been writing a script to check for reflective XSS vulnerabilities. So far, it has an input for a URL with * in place of queries and an error checker for malformed URLs. It also has a file uploader for users to upload "payloads". However, I recently made a part that replaces * with the contents of the payload, and then for debugging purposes, I made it alert() the variable with the file contents. However, its not working. Here's my code:
function selectPayload(y) {
var fr = new FileReader();
fr.readAsText(document.getElementById('file').files[0]);
fr.onload = function() {
var dir = fr.result;
var payload = y.replace("*", fr.result);
alert(payload);
};
}
function myFunction() {
var errors = [];
var x = document.getElementById("myText").value;
if (!x.includes("http://") && !x.includes("https://")) {
errors.push('missing HTTP or HTTPS in URL');
}
if (!x.includes("*")) {
errors.push('missing * in place of query')
}
// Renders errors
if (errors.length) {
x = 'Error: ' + errors.join(', ') + '!';
}
document.getElementById("demo").innerHTML = x;
selectPayload(x);
}
<!DOCTYPE html>
<html>
<head>
<title>Slingshot.XSS</title>
</head>
<body style="font-family:monospace;" align="center">
<h2>Slingshot.XSS</h2>
<h3>Slingshot.XSS is a script that launches pre-loaded XSS payloads at a target to test its vulnerabilities.</h3>
<h4>Please report all issues to
or contact me at email#example.com.</h4>
Source Code / Learn More
<br />
<h4>Enter a URL with <b>*</b> in the place of query.</h4>
<h5>Example: <code>https://www.google.com/#q=*</code></h5>
<input type="text" id="myText" placeholder="Enter a URL"> <button onclick="myFunction()">Submit</button>
<p id="demo">No Submitted URL</p>
<h4>Select a payload:</h4>
<h5>Default payloads in <code>payloads</code></h5>
<input type="file" id="file"> <button onclick="selectPayload()">Submit</button>
</body>
</html>
What am I doing wrong?
You have the second button calling the wrong function. Changed to call myFunction() instead of selectPayload(). Unless you intended to call selectPayload() with the second button, in which case you neet to pass it an argument like it expects.
function selectPayload(y) {
var fr = new FileReader();
fr.readAsText(document.getElementById('file').files[0]);
fr.onload = function() {
var dir = fr.result;
var payload = y.replace("*", fr.result);
alert(payload);
};
}
function myFunction() {
var errors = [];
var x = document.getElementById("myText").value;
if (!x.includes("http://") && !x.includes("https://")) {
errors.push('missing HTTP or HTTPS in URL');
}
if (!x.includes("*")) {
errors.push('missing * in place of query')
}
// Renders errors
if (errors.length) {
x = 'Error: ' + errors.join(', ') + '!';
}
document.getElementById("demo").innerHTML = x;
selectPayload(x);
}
<!DOCTYPE html>
<html>
<head>
<title>Slingshot.XSS</title>
</head>
<body style="font-family:monospace;" align="center">
<h2>Slingshot.XSS</h2>
<h3>Slingshot.XSS is a script that launches pre-loaded XSS payloads at a target to test its vulnerabilities.</h3>
<h4>Please report all issues to
or contact me at keeganjkuhn#gmail.com.</h4>
Source Code / Learn More
<br />
<h4>Enter a URL with <b>*</b> in the place of query.</h4>
<h5>Example: <code>https://www.google.com/#q=*</code></h5>
<input type="text" id="myText" placeholder="Enter a URL"> <button onclick="myFunction()">Submit</button>
<p id="demo">No Submitted URL</p>
<h4>Select a payload:</h4>
<h5>Default payloads in <code>payloads</code></h5>
<input type="file" id="file"> <button onclick="myFunction()">Submit</button>
</body>
</html>
Here: I've found code that will work:
<!DOCTYPE html>
<html>
<head>
<title>Slingshot.XSS</title>
</head>
<body style="font-family:monospace;" align="center">
<script>
function selectPayload() {
var x = document.getElementById("myText").value;
var fr = new FileReader();
fr.readAsText(document.getElementById('file').files[0]);
fr.onload = function() {
var dir = fr.result;
var payload = x.replace("*", fr.result);
alert(payload);
};
}
function myFunction() {
var errors = [];
var x = document.getElementById("myText").value;
if (!x.includes("http://") && !x.includes("https://")) {
errors.push('missing HTTP or HTTPS in URL');
}
if (!x.includes("*")) {
errors.push('missing * in place of query')
}
// Renders errors
if (errors.length) {
x = 'Error: ' + errors.join(', ') + '!';
}
document.getElementById("demo").innerHTML = x;
}
</script>
<h2>Slingshot.XSS</h2>
<h3>Slingshot.XSS is a script that launches pre-loaded XSS payloads at a target to test its vulnerabilities.</h3>
<h4>Please report all issues to
or contact me at keeganjkuhn#gmail.com.</h4>
Source Code / Learn More
<br />
<h4>Enter a URL with <b>*</b> in the place of query.</h4>
<h5>Example: <code>https://www.google.com/#q=*</code></h5>
<input type="text" id="myText" placeholder="Enter a URL"> <button onclick="myFunction()">Submit</button>
<p id="demo">No Submitted URL</p>
<h4>Select a payload:</h4>
<h5>Default payloads in <code>payloads</code></h5>
<input type="file" id="file"> <button onclick="selectPayload()">Submit</button>
</body>
</html>

Display shapeFile on leaflet map using an uploaded file.zip

I'm trying to display a shape file from Brazil on my leaflet map, this shape file is inside a .zip that contains: .dbf, .prj, .sbn, .sbx, .shp and .shx files. To do that, I'm using: https://github.com/calvinmetcalf/leaflet.shapefile
I have the .zip file at my local computer so I simply made:
HTML
<button ng-click="addShape()"> Brasil Shape File </button>
JS
var mymap = L.map('mapid').setView([-12.85, -50.09], 4);
$scope.addShape = function () {
var shpfile = new L.Shapefile('scripts/ShapeFiles/Brasil.zip');
shpfile.addTo(mymap);
}
Now I want to make the user upload the .zip to show it on the map exactly like whats happening here:
http://leaflet.calvinmetcalf.com/#3/32.69/10.55
But I can't figure this out... All I have found on the internet is posting the .zip file to an url. I need to use the file right after the user "uploaded" it to the browser.
On the code bellow the user can upload some file and POST it, I tried to console.log the supposed objects that contains the .zip file before sending it but I couldn't find it inside the objects:
HTML
<body ng-controller="FileUploadCtrl">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" ng-model-instant id="fileToUpload" multiple onchange="angular.element(this).scope().setFiles(this)" />
</div>
<input type="button" ng-click="uploadFile()" value="Upload" />
</body>
JS
scope.setFiles = function(element) {
scope.$apply(function(scope) {
console.log('files:', element.files);
// Turn the FileList object into an Array
scope.files = []
for (var i = 0; i < element.files.length; i++) {
scope.files.push(element.files[i])
}
scope.progressVisible = false
});
};
scope.uploadFile = function() {
var fd = new FormData()
for (var i in scope.files) {
fd.append("uploadedFile", scope.files[i])
}
var xhr = new XMLHttpRequest()
xhr.upload.addEventListener("progress", uploadProgress, false)
xhr.addEventListener("load", uploadComplete, false)
xhr.addEventListener("error", uploadFailed, false)
xhr.addEventListener("abort", uploadCanceled, false)
xhr.open("POST", "/fileupload")
scope.progressVisible = true
xhr.send(fd)
}
source fiddle: danielzen
On this exemple, inside the functions 'setFiles' and 'uploadFile', when I console.log(fd) I get: fd: [object FormData] and console.log(element.files):
element.files[0] File {name: "Brasil (1).zip", lastModified: 1492436239000, lastModifiedDate: Mon Apr 17 2017 10:37:19 GMT-0300 (BRT), webkitRelativePath: "", size: 5988862…}
But I can't find the original .zip file that was uploaded, maybe because this is not the right way to do it...
If someone knows a way to get this .zip file or have access to this example source and can share with me I'll be very thankful.
I managed to solve this by using an arrayBuffer for the shapefile as it is specified here. I figured that out reading about this issue.
Here is my code:
HTML
<div id="mapid" style="width: 800px;float: left;">
</div>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
</form>
JS
function loadFile() {
input = document.getElementById('fileinput');
if (!input.files[0]) {
bodyAppend("p", "Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
fr = new FileReader();
fr.onload = receiveBinary;
fr.readAsArrayBuffer(file);
}
function receiveBinary() {
result = fr.result
var shpfile = new L.Shapefile(result);
shpfile.addTo(mymap);
}
}
I use angular 12... and I can upload file with Shapefile.js https://github.com/calvinmetcalf/shapefile-js
You can see my code in https://gitlab.com/-/snippets/2141645

creating an image uploader with preview in php and javascript

my code does not seem to be able to pull the image from my desktop for a preview. i don't know what. All it was does, is show me a broken image. Here is the code.
javascript
function ajaxFileUpload(upload_field)
{
// Checking file type
var re_text = /\.jpg|\.gif|\.jpeg|\.png|\.gif/i;
var filename = upload_field.value;
if (filename.search(re_text) == -1) {
alert("File should be either jpg or gif or jpeg or png");
upload_field.form.reset();
return false;
}
document.getElementById('picture_preview').innerHTML = '<img src="" width="10%" border="0" />';
upload_field.form.action = 'upload-picture.php';
upload_field.form.target = 'upload_iframe';
upload_field.form.submit();
upload_field.form.action = '';
upload_field.form.target = '';
return true;
}
HTML
<!-- iframe used for ajax file upload-->
<!-- debug: change it to style="display:block" -->
<iframe name="upload_iframe" id="upload_iframe" style="display:none;"></iframe>
<!-- iframe used for ajax file upload-->
<form name="pictureForm" method="post" autocomplete="off" enctype="multipart/form-data">
<div>
<span>Upload Picture :</span>
<input type="file" name="picture" onclick="preview()" id="picture" onchange="return ajaxFileUpload(this);" />
<span id="picture_error"></span>
<div id="picture_preview"></div>
</div>
</form>
Something like this should work:
Javascript
var input = document.getElementById('image_uploader');
var uploadedImage = document.getElementById('uploaded_image');
input.addEventListener('change', onImageInput);
function onImageInput()
{
var imageFile = input.files[0];
var reader = new FileReader();
reader.addEventListener('loadend', onReaderComplete);
reader.readAsDataURL(imageFile);
}
function onReaderComplete(e)
{
uploadedImage.src = e.target.result;
}
HTML
<input type="file" id="image_uploader"/>
<div id="picture_preview"><img id="uploaded_image"/></div>
After this, you can send the image data (src) to the server with AJAX or other stuff like that.

Categories