We Keep Coding

how to extract the folder from zip file in upload with html and javascript and django

I am working on a django app in which the html code called tool.hmtl along with the javascript code called myscripts.js let the user upload the folder and then do some processing on that data. Relevant section of tool.hmtl is given as follows.
<main class="tool mg-t-900">
<div id="folderUploadDiv">
<h1 class="tool__heading | text-center text-capitalize">
Upload your folder here
</h1>
<label
for="folder"
class="tool__upload | flex flex-center flex-column mg-t-500 text-center"
>
<i class="ri-upload-cloud-line tool__icon"></i>
<p class="tool__txt text-capitalize">Browse folder to upload</p>
</label>
<input type="file" id="folder" webkitdirectory multiple />
.............some code......
<script src="{% static 'myscripts.js' %}"></script>
<script src="{% static 'app.js' %}"></script>
<script>
const fileInput = document.querySelector("#folder");
const loder = document.querySelector(".loder");
const toggleLoder = function () {
loder.classList.add("active");
setTimeout(() => {
loder.classList.remove("active");
}, 30000);
startTypingAnimation();
};
fileInput.addEventListener("change", toggleLoder);
function startTypingAnimation() {
new TypeIt("#loder-text", {
strings: "Your file is being prepared...",
speed: 75,
loop: true,
}).go();
}
</script>
<script>
setTimeout(function () {
location.reload();
}, 300000); // refresh every 5 minutes (300000 milliseconds)
</script>
</body>
</html>
{% endblock %}
and relevant section of myscripts.js is as under.
// const axios = require('axios');
$("#folderUploadDiv").show();
$("#selectorDiv").hide();
username = "";
contentType = "";
var dataToSend = []
var flag=1
document.getElementById("folder").addEventListener("change", function(event) {
var output = document.querySelector("ul");
var files = event.target.files;
var jsonFiles =0;
var rightOrderFiles = [];
for (var i=0; i<files.length; i++) {
var item = document.createElement("li");
var innerFiles = files[i].webkitRelativePath.split("/");
if(innerFiles.length ===4){
jsonFiles++;
rightOrderFiles.push(files[i].webkitRelativePath)
var reader = new FileReader();
reader.onload = onReaderLoad;
reader.readAsText(files[i]);
}
// console.log("file path : ", files[i].webkitRelativePath);
item.innerHTML = files[i].webkitRelativePath;
output.appendChild(item);
};
}, false);
In this code snippets (both HTML and Javascript), we can see that user uploads the folder and then some processing is done in Javascript.
My question is, how can I change the code both in tool.hmtl along with the javascript code myscripts.js such that the user uploads a zip file and a folder is extracted from that zip file rather than user uploading the folder itself. Everything else remain the same, the only change needed is let the user upload zip file instead of the folder directly and the folder is then extracted from the zip file.

To change the code to extract a folder from a zip file, you need to make the following changes in both tool.html and myscripts.js:
1- In tool.html, change the type of the file input to "file" instead of "folder".
<input type="file" id="folder" />
2- In myscripts.js, use a library such as jszip.js to extract the contents of the uploaded zip file. You can add the library to your project by including the following line in the head of tool.html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.2/jszip.min.js"></script>
3- Replace the event listener for the file input with the following code:
document.getElementById("folder").addEventListener("change", function(event) {
var output = document.querySelector("ul");
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var zip = new JSZip();
zip.loadAsync(e.target.result)
.then(function (zip) {
var rightOrderFiles = [];
var jsonFiles = 0;
zip.forEach(function (relativePath, file) {
if (relativePath.split("/").length === 4) {
jsonFiles++;
rightOrderFiles.push(relativePath);
file.async("text").then(function (content) {
var item = document.createElement("li");
item.innerHTML = relativePath;
output.appendChild(item);
});
}
});
});
};
reader.readAsArrayBuffer(file);
}, false);
This code uses JSZip to load the contents of the uploaded zip file, extract the files and process them in the same manner as before.

Vanilla JS multi image upload doesn't work when dropping files, does work when selecting files manually

I am using a script based on this one to allow users to add multiple images to a form.
The form has multiple other inputs and the multi-image selection is part of it.
If I select files 'manually' using the 'click here' then the files are sent with the form submit. If the user drops them onto the 'dropzone' however, they do not get sent with the form. How can I make sure they do?
let dropBox = document.getElementById('dropBox');
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(evt => {
dropBox.addEventListener(evt, prevDefault, false);
});
function prevDefault(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(evt => {
dropBox.addEventListener(evt, hover, false);
});
['dragleave', 'drop'].forEach(evt => {
dropBox.addEventListener(evt, unhover, false);
});
function hover(e) {
dropBox.classList.add('!bg-lime-100', 'border-lime-300');
}
function unhover(e) {
dropBox.classList.remove('!bg-lime-100', 'border-lime-300');
}
dropBox.addEventListener('drop', mngDrop, false);
function mngDrop(e) {
let dataTrans = e.dataTransfer;
let files = dataTrans.files;
filesManager(files);
}
function filesManager(files) {
files = [...files];
files.forEach(previewFile);
}
function previewFile(file) {
if (!file.type.match(/image.*/)) {
return alert('Only JPG, JPEG and PNG files are allowed');
}
let fReader = new FileReader();
let gallery = document.getElementById('gallery');
fReader.readAsDataURL(file);
fReader.onloadend = function() {
let wrap = document.createElement('div');
let img = document.createElement('img');
img.src = fReader.result;
img.classList.add('rounded-lg');
let imgCapt = document.createElement('p');
let fSize = Math.round((file.size / 1024 / 1024) * 10) / 10 + ' MB';
imgCapt.innerHTML = `<span class="text-md font-bold tracking-tight">${fSize}</span>`;
gallery.appendChild(wrap).appendChild(img);
gallery.appendChild(wrap).appendChild(imgCapt);
}
}
<form method="post" action="..." enctype="multipart/form-data">
<input type="text" name="name">
<input type="text" name="example">
<input type="text" name="etc">
<div id="dropBox" class="border-2 border-dashed bg-white border-slate-300 rounded-lg md:p-5 p-10 text-center">
<p class="mb-2 mt-4">Drag and drop your images here, or</p>
<input type="file" name="photos[]" id="imgUpload" multiple accept="image/*" onchange="filesManager(this.files)" class="hidden">
<label for="imgUpload" class="block mt-4 font-bold cursor-pointer"><u>Click here</u> to select from your computer</label>
<div id="gallery" class="mt-4 grid grid-cols-2 md:grid-cols-3 gap-4"></div>
</div>
</form>
I tried adding this in the previewFile function but that doesn't work:
let dropBox = document.getElementById('dropBox');
let formData = new FormData(dropBox[0]);
formData.append('photos', file);

<input type="file"> elements are read-only inputs. Files can't be assigned to them. For security reasons user input is necessary to attach a file on the client computer to a form. The "Browse..." or "Choose file..." button provides that user input.
In the case of a drag and drop interaction create a FormData object:
const photoFormData = new FormData();
...and append() each file to it using forEach():
files.forEach((file, idx) => {
photoFormData.append(`photos[${idx}]`, file);
});
The index (idx) of the file in the files array is used to differentiate each file in the FormData object.
When the user submits the form, use a submit addEventListener() to post the FormData object holding the files to the location the form is posted to using fetch():
document.querySelector('form').addEventListener('submit', function ({target}) {
fetch(target.action, {
method: 'put',
body: photoFormData
})
.then(result => { console.log('Success:', result); })
.catch(error => { console.error('Error:', error); });
});
Appending the files can happen in the filesManager() function:
function filesManager(files) {
files = [...files];
files.forEach((file, idx) => {
photoFormData.append(`photos[${idx}]`, file);
});
files.forEach(previewFile);
}
let dropBox = document.getElementById('dropBox');
const photoFormData = new FormData();
document.querySelector('form').addEventListener('submit', function ({target}) {
fetch(target.action, {
method: 'put',
body: photoFormData
})
.then(result => { console.log('Success:', result); })
.catch(error => { console.error('Error:', error); });
});
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(evt => {
dropBox.addEventListener(evt, prevDefault, false);
});
function prevDefault(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(evt => {
dropBox.addEventListener(evt, hover, false);
});
['dragleave', 'drop'].forEach(evt => {
dropBox.addEventListener(evt, unhover, false);
});
function hover(e) {
dropBox.classList.add('!bg-lime-100', 'border-lime-300');
}
function unhover(e) {
dropBox.classList.remove('!bg-lime-100', 'border-lime-300');
}
dropBox.addEventListener('drop', mngDrop, false);
function mngDrop(e) {
let dataTrans = e.dataTransfer;
let files = dataTrans.files;
filesManager(files);
}
function filesManager(files) {
files = [...files];
files.forEach((file, idx) => {
photoFormData.append(`photos[${idx}]`, file);
});
files.forEach(previewFile);
}
function previewFile(file) {
if (!file.type.match(/image.*/)) {
return alert('Only JPG, JPEG and PNG files are allowed');
}
let fReader = new FileReader();
let gallery = document.getElementById('gallery');
fReader.readAsDataURL(file);
fReader.onloadend = function() {
let wrap = document.createElement('div');
let img = document.createElement('img');
img.src = fReader.result;
img.classList.add('rounded-lg');
let imgCapt = document.createElement('p');
let fSize = Math.round((file.size / 1024 / 1024) * 10) / 10 + ' MB';
imgCapt.innerHTML = `<span class="text-md font-bold tracking-tight">${fSize}</span>`;
gallery.appendChild(wrap).appendChild(img);
gallery.appendChild(wrap).appendChild(imgCapt);
}
}

Node JS - How can I post to an iframe without needing to open the page? I need to act like an API in the background

So I have a piece of code that automatically changes a .psd image depending on the user inputs.
I am using https://www.photopea.com/ to achieve this using their handy API and scripts.
Note: Photopea has a nice feature that when you enter your url inside the server array, and you call save as a script, it saves the file, posted to your server link you put. This works fine (Only when I have the page opened myself like a normal client. Not without opening the page).
My issue is, I need to be able to make a post request to update the script (to the iframe window), without the client actually opening the page / browser. This is sort like an API. It needs to check an incoming post request for the values entered to change on the .psd, then it needs to automatically do these changes without the user needing to open the page.
Sorta like an api running in the background, checking for incoming connections, then once it has found the post request to our node js, it will run the script to change the .psd layers to suit users values.
What I'm stuck at:
When I run the script in a API sorta mode (through post request, not opening the page manually, it shows me this error message here.
This is my html page I need to load without needing the client to open it up:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD Changer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style type="text/css">
input {
padding: 7px;
width: 100%;
margin: 10px 0px 10px 0px;
}
</style>
</head>
<body>
<textarea rows="8", style="width:100%;" id="json">
{
"files": [
"https://www.photopea.com/#MY_PHOTOPEA_PSD"
],
"resources" : [
],
"environment" : {
},
"server" : {
"version" : 1,
"url" : "https://www.myserver.cc/saveFile.php",
"formats" : [ "png:true", "jpg:0.5" ]
}
}</textarea>
<button onclick="updatePlayground()" style="display:block; font-size:1.2em;" >Update</button> <br />
<b>URL:</b>
<textarea rows="3", style="width:100%;" id="url"></textarea>
<iframe src="https://www.photopea.com?rnd=44567643" id="pp" style="border:none; width:100%; height:600px;"></iframe>
<button onclick="testOurAuto();">Auto Change Text</button>
<h2>Run a script</h2>
<textarea rows="4", style="width:100%;" id="script">app.activeDocument.activeLayer.translate(20,20);</textarea>
<button onclick="runScript()" style="display:block; font-size:1.2em;">Run</button> <br />
<b>Messages from Photopea</b>
<pre id="msgs"></pre>
<hr>
<div style="background: black; margin-top: 50px; color: white; padding: 100px;">
<h1>Auto Config Editor</h1>
<label>Change first name to:</label>
<input type="text" id="new_first_name" placeholder="Enter new first name for ID here" />
<br>
<label>Change last name to:</label>
<input type="text" id="new_last_name" placeholder="Enter new last name for ID here" />
<hr>
<label>Change date of birth to:</label>
<input type="text" id="new_dob" placeholder="Enter new date of birth - 05.07.1991 for ID here" />
<br>
<label>Change city to:</label>
<input type="text" id="new_city" placeholder="Enter new city for ID here" />
<br>
<label>Change expiry date to:</label>
<input type="text" id="new_expiry_date" placeholder="Enter new expiry date for ID here" />
<button style="width: 100%; background: black; padding: 30px; color: white;" onclick="testOurAuto('<?=$first_name;?>', '<?=$last_name;?>', '<?=$dob;?>', '<?=$city;?>', '<?=$doe;?>');">Auto Fix ID</button>
</div>
<script src="mymodule.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
testOurAuto();
});
function makeid(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() *
charactersLength));
}
return result;
}
function testOurAuto() {
//var lays = app.activeDocument.layers;
//lays[1].textItem.contents = "My new text!";
var random = Math.random().toString().slice(2,8); // 6 digits
var random_chars_nums = makeid(9);
${scriptString}
runScriptManaual(string);
console.log('runScriptManaual executed fine');
}
function onMSG(e) {
var nst;
if(typeof e.data=="string") nst = e.data;
else nst = "ArrayBuffer["+e.data.byteLength+"]";
document.getElementById("msgs").textContent += nst;
};
var frame = null;
function updatePlayground(e)
{
var json = document.getElementById("json").value;
json = JSON.stringify(JSON.parse(json));
var url = "https://www.photopea.com";
var end = "#"+encodeURI(json);
document.getElementById("url").value = url+end;
frame.src = url+"?rnd="+Math.floor(Math.random()*0xffffffff)+end;
}
function runScript(e)
{
var script = document.getElementById("script").value;
frame.contentWindow.postMessage(script,"*");
}
function runScriptManaual(text)
{
frame.contentWindow.postMessage(text,"*");
}
function testOuterEnvironment() {
window.addEventListener("message", function(e) { alert(e.data); });
var wnd = document.getElementById("pp").contentWindow;
wnd.postMessage(msg, "*");
}
document.body.onload = function(e) {
frame = document.getElementById("pp");
window.addEventListener("message", onMSG);
updatePlayground();
}
</script>
As you can see, it requires an iframe to post inside of. I am wondering if there is any alternatives that do not require iframe or do not require the user opening the page up.
My index.js NODE JS file:
var express = require('express');
var app = express();
var es6Renderer = require('express-es6-template-engine');
var httpServer = require('http').Server(app);
var mymodule = require('./views/mymodule');
var path = require('path');
app.use(express.static(path.join(__dirname, 'public')));
var ip = 'iphere';
var port = 3000;
var views = __dirname + '/views/';
var public = __dirname + '/public/';
// Add headers before the routes are defined
app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', '*');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
next();
});
function scriptString(FIRST_NAME, LAST_NAME, DOB, CITY, EXPIRY_DATE, random, random_chars_nums) {
return `
var string = \`var lays = app.activeDocument.layers; var layerRef = app.activeDocument.layerSets; var FIRST_NAME = '` + FIRST_NAME + `'; var LAST_NAME = '` + LAST_NAME + `'; var DOB = '` + DOB + `'; var CITY = '` + CITY + `'; var EXPIRY_DATE = '` + EXPIRY_DATE + `'; var IDD_4 = '` + random + `'; var IDD = '` + random_chars_nums + `'; var Signature = FIRST_NAME + ' ' + LAST_NAME; var IDD_Green = IDD;for(var i=0; i<lays.length; i++) {if(lays[i].name == 'FirstName') { lays[i].textItem.contents = FIRST_NAME; alert(lays[i].textItem.contents);}else if(lays[i].name == 'LastName') { lays[i].textItem.contents = LAST_NAME;alert(lays[i].textItem.contents);}else if(lays[i].name == 'Birthdate') {lays[i].textItem.contents = DOB;alert(lays[i].textItem.contents);}else if(lays[i].name == 'City') {lays[i].textItem.contents = CITY;alert(lays[i].textItem.contents);}else if(lays[i].name == 'ExpiryDate') {lays[i].textItem.contents = EXPIRY_DATE;alert(lays[i].textItem.contents);}else if(lays[i].name == 'IDD_4') {lays[i].textItem.contents = IDD_4;alert(lays[i].textItem.contents);}else if(lays[i].name == 'IDD') { lays[i].textItem.contents = IDD;alert(lays[i].textItem.contents);}else if(lays[i].name == 'IDD_Green') {lays[i].textItem.contents = IDD_Green;alert(lays[i].textItem.contents);}else if(lays[i].name == 'Signature') {lays[i].textItem.contents = Signature; alert(lays[i].textItem.contents);}else if(lays[i].name == 'Signature') {lays[i].textItem.contents = Signature;alert(lays[i].textItem.contents);}}layerRef[1].artLayers[0].visible = true;\`
`;
}
app.use(express.static('public'))
app.engine('html', es6Renderer);
app.set('views', 'views');
app.set('view engine', 'html');
app.get('/photopea', function (req, res) {
if(req.query.FIRST_NAME && req.query.LAST_NAME && req.query.DOB && req.query.CITY && req.query.EXPIRY_DATE && req.query.random && req.query.random_chars_nums) {
console.log('All values have been successfully passed!');
var FIRST_NAME = req.query.FIRST_NAME;
var LAST_NAME = req.query.LAST_NAME;
var DOB = req.query.DOB;
var CITY = req.query.CITY;
var EXPIRY_DATE = req.query.EXPIRY_DATE;
var random = req.query.random;
var random_chars_nums = req.query.random_chars_nums;
res.render('index', {locals: {
scriptString: scriptString(FIRST_NAME, LAST_NAME, DOB, CITY, EXPIRY_DATE, random, random_chars_nums).toString()
}});
} else {
console.log('Not all variables were passed!');
res.end('Not all variables were passed!');
}
});
httpServer.listen(port, '0.0.0.0', function() {
console.log('Listning on 0.0.0.0, port ' + port);
});
Is there anyway in Node js we can make a post to a hidden iframe that runs in the background or something that doesn't require an iframe?
Thanks!

Angular Uploading a File with Copy Paste

In my app, I have an Upload button that enables the user to search files and upload them. I also defined a textarea and I want the user to be able to paste the file that he copied and upload it that way (like you would do in an e-mail or whatsapp etc.). Right now, when I try to paste the file that I've copied, nothing happens and the file doesn't paste. My code is below. What should I do to upload files by paste?
HTML:
<div>
<button mat-stroked-button class="primary-fg" (click)="onFileUploadClick($event)">
<mat-icon>attach_file</mat-icon>
Upload
</button>
<mat-form-field appearance="fill">
<mat-label>Paste</mat-label>
<textarea matInput
cdkTextareaAutosize
#autosize="cdkTextareaAutosize"
cdkAutosizeMinRows="1"
cdkAutosizeMaxRows="5"
id="pasteArea"></textarea>
</mat-form-field>
<script>
window.addEventListener("paste", e => {
if (e.clipboardData.files.length > 0) {
const fileInput = document.querySelector("#fileInput");
fileInput.files = e.clipboardData.files;
}
});
</script>
</div>
<input hidden type="file" id="fileInput" #fileInput multiple />
TS:
onFileUploadClick(event: any) {
event.preventDefault();
const fileInput = document.getElementById('fileInput') as HTMLInputElement;
fileInput.value = '';
fileInput.onchange = () => {
let tempFiles: IAttachment[] = [];
for (let index = 0; index < fileInput.files.length; index++) {
const file = fileInput.files[index];
const fileSize = file.size / 1024 / 1024; // in MB
if (fileSize <= 5) {
tempFiles.push({ FileInfo: file });
}
else {
this._dialog.open(FuseSimpleDialogComponent, {
width: "400px",
data: {
title: "Uyarı",
message: "Dosya boyutu 5MB'den büyük olduğundan seçilemez. Dosya Adı: " + file.name
}
});
}
}
tempFiles.forEach(f => this.uploadFile(f));
};
fileInput.click();
}
/**
*
* #param file
*/
private uploadFile(file: IAttachment) {
if (file.FileData) return; //file already uploaded
let fileReader: FileReader = new FileReader();
let $that = this;
let data: any;
fileReader.onerror = function (): void {
//show error message
};
fileReader.onloadend = function (): void {
if (FileReader.prototype.readAsBinaryString) {
data = btoa(fileReader.result as string);
}
else { //support for IE
data = ($that as any).arrayBufferToBase64(fileReader.result);
}
file.Name = file.FileInfo.name;
file.FileData = data;
file.CreateDate = new Date();
file.CreateUser = $that.user;
let allFiles = $that.Attachments ? $that.Attachments.slice(0) : [];
allFiles.unshift(file);
$that.Attachments = allFiles;
$that.AttachmentsChange.emit(allFiles);
};
if (FileReader.prototype.readAsBinaryString) {
fileReader.readAsBinaryString(file.FileInfo);
}
else { //support for IE
fileReader.readAsArrayBuffer(file.FileInfo);
}
}

Careful with you approach, simply pasting a file into a textarea will do nothing as a text area is made to receive... text.
You need to have an input file somewhere on your component and an event listener on window for the paste event.
Then take the paste event and try to see if it includes a file, if yes, start the uploading process, if not, paste the text in the textarea.
This is how I would approach it.

Insert Image Link from Google Drive into Google Sheets After Uploading an Image via Web App

To preface, I'm super new to programming in general, nevermind javascript.
I'm developing a web application where a user can upload a picture by clicking on a button. This action will upload pictures into a certain directory in my google drive with a unique folder and name.
Now, I'm trying to copy and paste the google drive link of a picture any time it has been uploaded.
I am able to successfully get the ID of the picture URL in my getFileUrl() method. But when I call that method within my doStuff1() function then later insert that info into userInfo.fileUrl, I am getting https://docs.google.com/document/d/undefined/ as the output in my spreadsheet.
How can call that value?
Updated: I am realizing that when I use "google.script.run.getFileUrl("fn","i"), that is when I'm getting "undefined". When I run the getFileUrl() function locally, I do get the value that I want. Please advise how I can use .WithSuccessHandler(function) correctly so that I can return the value of "fileId0".
This is the front end, where a user uploads the picture
page.html
<html>
<head>
<body>
<form action="#" method="post" enctype="multipart/form-data">
<div class="row">
<div class="file-field input-field">
<div class="waves-effect waves-light btn-small">
<i class="material-icons right">insert_photo</i>
<span>Import Picture</span>
<input id="files" type="file" name="image">
</div>
<div class="file-path-wrapper">
<input disabled selected type="text" class="file-path
validate" placeholder="Choose an image">
</div>
</div>
</div>
</form>
<?!= include("page-js"); ?>
</div> <!-- CLOSE CONTAINER-->
</body>
</html>
This is part of the javascript to put relevant info in an array, which will later be used to append a row in the google sheet
page-js.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://gumroad.com/js/gumroad.js"></script>
<script>
document.getElementById("addAnother").addEventListener("click",doStuff1);
var i=1;
var num={};
function doStuff1(){
num.picNum2=i;
var personName=document.getElementById("fn").value;
var fileId00=google.script.run.getFileUrl("fn","i");
var userInfo ={};
userInfo.firstName= document.getElementById("fn").value;
userInfo.number=i;
userInfo.fileUrl="https://docs.google.com/document/d/"+fileId00
+"/";
i++;
google.script.run.userClicked(userInfo);
}
This is part of the javascript to upload picture file into the Google drive
(still part of page-js.html)
var file,
reader = new FileReader();
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'- '+today.getDate();
reader.onloadend = function(e) {
if (e.target.error != null) {
showError("File " + file.name + " could not be read.");
return;
} else {
google.script.run
.withSuccessHandler(showSuccess)
.uploadFileToGoogleDrive(e.target.result,num.picNum,date,$('input#fn')
.val(),$('input#date').val());
}
};
function showSuccess(e) {
if (e === "OK") {
$('#forminner').hide();
$('#success').show();
} else {
showError(e);
}
}
function submitForm() {
var files = $('#files')[0].files;
if (files.length === 0) {
showError("Please select a image to upload");
return;
}
file = files[0];
if (file.size > 1024 * 1024 * 5) {
showError("The file size should be < 5 MB.");
return;
}
showMessage("Uploading file..");
reader.readAsDataURL(file);
}
function showError(e) {
$('#progress').addClass('red-text').html(e);
}
function showMessage(e) {
$('#progress').removeClass('red-text').html(e);
}
</script>
This part grabs the array "userInfo" and appends the content in a row within a designated google sheet. Any time, I click on the button in the front end, it creates a new row.
Code.gs
//google sheet web script
var url="https://docs.google.com/spreadsheets/d/XXXXX";
function getFileUrl(fn,i){
try{
var today0 = new Date();
var date0 = today0.getFullYear()+'-'+(today0.getMonth()+1)+'-'
+today0.getDate();
var dropbox0 = "OE Audit Pictures";
var folder0,folders0 = DriveApp.getFoldersByName(dropbox0);
while (folders0.hasNext())
var folder0=folders0.next();
var dropbox20=[date0,fn].join(" ");
var folder20,folders20=folder0.getFoldersByName(dropbox20);
while (folders20.hasNext())
var folder20=folders20.next();
var file0, files0= folder20.getFilesByName(i);
while (files0.hasNext())
var file0=files0.next();
var fileId0=file0.getUrl();
return fileId0;
} catch(f){
return f.toString();
}
}
function userClicked(userInfo){
var ss= SpreadsheetApp.openByUrl(url);
var ws=ss.getSheetByName("Data");
ws.appendRow([userInfo.number,new Date(),
userInfo.firstName,userInfo.fileUrl]);
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function uploadFileToGoogleDrive(data, file, fn, date) {
try {
var dropbox = "OE Audit Pictures";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var contentType = data.substring(5,data.indexOf(';')),
bytes =
Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),
blob=Utilities.newBlob(bytes, contentType, file)
var dropbox2=[fn,date].join(" ");
var folder2, folders2=folder.getFoldersByName(dropbox2)
if (folders2.hasNext()){
folder2=folders2.next().createFile(blob);
} else {
file = folder.createFolder([fn,date].join(" ")).createFile(blob);
}
return "OK";
} catch (f) {
return f.toString();
}
}

In doStuff1() of "page-js.html", you want to give a value returned from getFileUrl() of "Code.gs" to userInfo.fileUrl.
If my understanding is correct, how about this modification?
Modification point:
google.script.run.getFileUrl() doesn't return values. When you want to use the values from getFileUrl(), you can use withSuccessHandler() as following modified script.
Modified script:
Please modify doStuff1() as follows.
function doStuff1() {
num.picNum2 = i;
var personName = document.getElementById("fn").value;
google.script.run.withSuccessHandler(doStuff2).getFileUrl("fn","i"); // Modified
}
// Added
function doStuff2(fileId00) {
var userInfo = {};
userInfo.firstName = document.getElementById("fn").value;
userInfo.number = i;
userInfo.fileUrl = "https://docs.google.com/document/d/"+fileId00 +"/";
i++;
google.script.run.userClicked(userInfo);
}
Note:
In this modification, I used doStuff2() for retrieving the values from getFileUrl(). If you want to modify the function name, please modify it.
Reference:
Class google.script.run
If I misunderstood your question and this was not the result you want, I apologize.