invalidArgumentError: when i upload file using google app script - javascript

I am trying to upload the file "pdf " to google drive through google app script, but I get an error when I click the button. Also, I wanted to use the array bytes but I don't know how to do because without the array bytes I must disable the chrome v8.
Error message :
2495449455-mae_html_user_bin_i18n_mae_html_user__ar.js:56 Uncaught
InvalidArgumentError: Failed due to illegal value in property: 0
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_self">
<?!=include('css');?>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> PDF Collector</title>
<div align="center">
<p><img class="responsive-img offset-m3 s12 "
src=""></p>
</div>
</head>
<body>
<div id="msg" class="col m6 offset-m3 s12" align="center" style='color: red' >
<div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col m6 offset-m3 s12 ">
<div class="input-field">
<input placeholder="Your Id" id="employeeId" type="number" class="validate" required pattern ="^\d{10}$" >
<label class="active" for="id">Your Id</label>
</div>
<div class="input-field">
<input placeholder="Your name" id="fullname" type="text" class="validate" disabled >
<label class="active" for="name">Full Name</label>
</div>
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file" name="myFile">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<button id="btn" class="btn waves-effect waves-light" type="submit"
name="action" > Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
<div class="row">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!=include('js');?>
</body>
</html>
JS Code
document.getElementById('btn').addEventListener('click',
function(e){
google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode)
})
function onSuccess(data){
document.getElementById('msg').innerHTML = "Thanks for Uploading";
}
This the function in .gs
function uploadFiles(data)
{
var file = data.myFile;
var folder = DriveApp.getFoldersByName(collected-Pdf);
Logger.log(folder);
var createFile = folder.createFile(file);
}

On the line google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode) I don't think you can just send an entire html node to the server, it probably tried to parse it as a json or something and failed, pretty much the most you can do is send the file itself
google.script.run.withSuccessHandler(onSuccess).uploadFiles(document.getElementsByClassName("myFile").files[0])
Plus the parent node of the button isn't the input element anyway, yet you are trying to access the .myFile element of it but I don't think class names are added to the server like that, but even if they were that would only be accessing the input element itself not the .files property of it

I have found the answer after dividing the code and test each code one by one. It turned out that the name="action and waves-effect are the reason to stop the code from running. I don't know why but it is working now after removing them from html.
<button id="btn" class="btn waves-light" type="submit"
" > Submit
<i class="material-icons right">send</i>
</button>

Related

adding fields dynamically and using the entered values on the dynamically entered fields

I am creating an UI, where I am entering some useful information. I use a form tag to set it up.
I have the basic form created and it can be seen as below
Since I have made use of form, when I click the Add project details, it directly hits the endpoint assigned (We are usigng springboot+thymeleaf)
Desirable Result:
When I click on Add Project details I should get text fields as shown below :
A student can create multiple projects, so each time Add project details is clicked, a new div with Id, projectname, grade has to be created.
NOTE: just a plain student can be created without any projects, but one student can have multiple projects too. I am failing in adding the UI components there. Each time I click add project details, it redirects to form submission and does not open the required div into the page.
Please provide me some guidelines here.
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</link>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Include https://datatables.net/ -->
<link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet">
</link>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript"
src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<!-- drag select for list of worklogs -->
<style>
.noselect {
user-select: none;
}
.ds-selected {
outline: 1px solid black;
outline-offset: 0px;
color: rgb(0, 0, 0);
font-weight: bold;
}
</style>
</head>
<body>
<div th:fragment="inputdata">
<div class="container-md">
<a>Student and Project Details</a>
<div class="row justify-content-md-end">
<form>
<div class="row">
<div class="col-2">
<a>Enter unique studentId</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="studentid" id="studentid" placeholder="studentid"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>Enter Name</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="name" id="name" placeholder="name"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>birth date</a>
</div>
<div class="col-3">
<input type="date" class="form-control" name="birthdate" id="birthdate"
placeholder="birthdate" required="required">
</div>
</div>
<div class="row">
<div class="row-2">
<button class="btn btn-primary"> Add project details </button>
</div>
</div>
<div class="row" id= "flexibleDiv">
<div class="col-2">
<label >Project </label>
</div>
<div class="col-2">
<input type="text" class="form-control" name="id" id="id"
placeholder="id" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="name" id="name"
placeholder="name" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="grade" id="grade"
placeholder="grade" required="required">
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="row-2">
<input type="submit" id="submitButton" class="btn btn-primary btn-sml" value="Enter to DB">
</div>
</div>
</form>
</div>
</div>
<script>
</script>
</div>
</body>
</html>

How do I choose a modal to display my form and redirect to an external URL on submit form?

I have started to create a form with Apps Script, using materializecss to create a menu with 3 different layouts.
when I embed my URL to the New Google Sites, it doesn't use the layout (modal), I need to know how to select one of the 3 sidebar options.
After submit, the form data is posted to the spreadsheet, but it doesn't redirect to a different page.
it seems it will redirect without validating data, the if sentence is not connected to the redirect function.
function doGet(request) {
return HtmlService.createTemplateFromFile(`form`).evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function include(filename){
var url="https://docs.google.com/spreadsheets/d/1sRKhZY27YVY4xMLJs9qAn_lAumaUKT1AH1SgeBrKk_E/edit#gid=0";
var ss= SpreadsheetApp.openByUrl;
var ws=ss.getSheetByName("data");
}
function onOpen(){
var ui=SpreadsheetApp.getUi();
ui.createMenu("My Menu")
.addItem("Sidebar form", "showInsidebarform")
.addItem("Modal Dialog form", "showInmodaldialogform")
.addItem("Modeless Dialog form", "showInmodelessdialog")
.addToUi();
}
//OPEN THE FORM IN SIDEBAR
function showInsidebarform() {
var userform=HtmlService.createTemplateFromFile("form").evaluate().setTitle("Subscribe");
SpreadsheetApp.getUi().showSidebar(userform);
}
//OPEN THE FORM IN MODAL DIALOG
function showInmodaldialogform() {
var userform=HtmlService.createTemplateFromFile("form").evaluate();
SpreadsheetApp.getUi().showModalDialog(userform, "Subscribe");
}
//OPEN THE FORM IN MODELESS DIALOG
function showInmodelessdialog() {
var userform=HtmlService.createTemplateFromFile("form").evaluate();
SpreadsheetApp.getUi().showModelessDialog(userform, "Subscribe");
}
function appenData(data){
var ws=SpreadsheetApp.getActiveSpreadsheet().getSheetByName("data");
ws.appendRow([data.name,data.email]);
}
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="name" type="text" class="validate">
<label for="name">First Name</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">email</i>
<input id="email" type="text" class="validate">
<label for="email">email</label>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id="btn">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div><!--end row-->
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
var nameBox=document.getElementById("name");
var emailBox=document.getElementById("email");
document.getElementById("btn").addEventListener("click",addRecord);
function addRecord(){
var name=nameBox.value;
var email=emailBox.value;
if(name.trim().length==0||email.trim().length==0){
M.toast({html: 'Name and email are required'})
}
else{
var data={
name:nameBox.value,
email:emailBox.value,
};
}
google.script.run.appenData(data);
nameBox.value="";
emailBox.value="";
self.location="https://www.theapothecary.app/homedoctor"
};
</script>
</body>
</html>
Im posting my full code here, it has credits to: https://www.youtube.com/watch?v=4SqsK3Vh42Q&lc=UgzHk8aEXCtiDyh8e0B4AaABAg.9ZmDWeons-P9ZmyFFSUhEJ
If you want to make a registration system I recommend php
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="name" type="text" class="validate">
<label for="name">First Name</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">email</i>
<input id="email" type="text" class="validate">
<label for="email">email</label>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id="btn">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div><!--end row-->
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
var nameBox=document.getElementById("name");
var emailBox=document.getElementById("email");
document.getElementById("btn").addEventListener("click",addRecord);
function addRecord(){
var name=nameBox.value;
var email=emailBox.value;
if(name.trim().length==0||email.trim().length==0){
M.toast({html: 'Name and email are required'})
}
else{
var data={
name:nameBox.value,
email:emailBox.value,
};
window.open("https://www.theapothecary.app/homedoctor")
}
google.script.run.appenData(data);
nameBox.value="";
emailBox.value="";
self.location="https://www.theapothecary.app/homedoctor"
};
</script>
</body>
</html>
If this is not the answer to your question. Can you explain more clearly where the problem lies

File Not Found "Index.html" Redirect To Another Page

I am creating an app and I keep coming across this problem. The 'Sign-up page' has a "sign in" link to it that is intended to redirect the user to a 'login page/form'. However, when I run the code standalone that is the "index.html" file when I click the 'sign-in' link it says the file is not found. Though, if I use "VS Code's Live Server" that is 'http://127.0.0.1:5500/index.html' it works perfectly fine. Here's the code for the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<title>Connect Us</title>
</head>
<body>
<div class="wrapper">
<section class="form signup">
<header>Connect Us</header>
<form action="#">
<div class="error-txt">This is an error message!</div>
<div class="name-details">
<div class="field input">
<label>First Name</label>
<input type="text" placeholder="First Name">
</div>
<div class="field input">
<label>Last Name</label>
<input type="text" placeholder="Last Name">
</div>
</div>
<div class="field input">
<label>Email Address</label>
<input type="text" placeholder="Enter your email">
</div>
<div class="field input">
<label>Password</label>
<input type="text" placeholder="Enter a password">
<i class="fas fa-eye"></i>
</div>
<div class="field input">
<label>Confirm Password</label>
<input type="text" placeholder="Re-enter the password">
<i class="fas fa-eye"></i>
</div>
<div class="field image">
<label>Profile Picture</label>
<input type="file">
</div>
<div class="field button">
<input type="submit" value="Take me to chat">
</div>
</form>
<div class="link">Already connected? Sign In</div>
</section>
</div>
</body>
</html>
And here is the code for the login.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<title>Connect Us</title>
</head>
<body>
<div class="wrapper">
<section class="form login">
<header>Connect Us</header>
<form action="#">
<div class="error-txt">This is an error message!</div>
<div class="field input">
<label>Email Address</label>
<input type="text" placeholder="Enter your email">
</div>
<div class="field input">
<label>Password</label>
<input type="text" placeholder="Enter your password">
<i class="fas fa-eye"></i>
</div>
<div class="field button">
<input type="submit" value="Take me to chat">
</div>
</form>
<div class="link">New Member? Sign Up</div>
</section>
</div>
</body>
</html>
Clarification to what my problem is:
file:///C:/login.html
Your file couldn’t be accessed
It may have been moved, edited, or deleted.
ERR_FILE_NOT_FOUND
Though when I run the same code with 'VS Code' it works perfectly.
NOTE
When I click the 'Sign in' link this http shows instead:
http://127.0.0.1:5500/login.html
You have href = /login.html
When you open the file directly, the href starting with a forward slash tells the browser to find login.html in the filesystem root directory. See here http://www.linfo.org/forward_slash.html. login.html probably is in a folder several layers deep, so the browser cannot find it.
If you request the resource through a HTTP server, a forward slash tells the server to find login.html in the document root, where you are likely to store all your website’s files.
I hope my explanation is not too confusing. Please point out any problems.

Add jSignature to Bootstrap Form

I'm trying to add the jSignature widget to a standard Bootstrap form, but so far nothing is appearing on the form (other form fields show fine).
Here's my form:
<form id="saveEvent" action="index.php" method="post">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="yourSignature">Your Signature</label>
<div id="signature"></div>
</div>
<hr />
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I'm including all the files at the bottom of the page in the correct order:
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jSignature.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="assets/js/flashcanvas.js"></script>
<![endif]-->
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
but the signature canvas doesn't show. Here's a screenshot of what I'm seeing if that helps:
I'm not getting any server errors or console errors so quite stumped at the moment - this is my first go at using jSignature.
Upon further inspection with the dev tools I noticed that the height of the signature div was 0px. I ended up adding this to the script:
$(document).ready(function() {
$("#signature").jSignature({
height: 200
});
$("#signature").resize();
})
and this is at least showing the signature capture now.
Hi now this code is working please check to properly your code is correct
Ref this code
$('#signature').signature();
#signature{
width:300px;
height:200px;
border:solid 1px red;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link type="text/css" href="http://keith-wood.name/css/jquery.signature.css" rel="stylesheet">
<script type="text/javascript" src="http://keith-wood.name/js/jquery.signature.js"></script>
<form id="saveEvent" action="index.php" method="post">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="yourSignature">Your Signature</label>
<div id="signature"></div>
</div>
<hr />
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>

How to Change background image using Javascript/jQuery?

im currently working on how to change the background image of my html document when the user selects a speficifc group from the dropdown menu from chatrooms. But im currently stuck I cant seem to get my jQuery to work any help you could offer would be great thank you :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Soc Talk</title>
<script src="resource/js/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="resource/css/bootstrap.min.css" />
<link rel="stylesheet" href="resource/css/style.css" />
<script>
$(".chatroom").click(function(){
$('.active').toggleClass('active');
$('.chatroom').toggleClass('active');
$('.jumbotron').fadeOut(500);
//change background image
$('.jumbotron').fadeIn(500);
$('.jumbotron').css('bg.png','url(resource/GamingSoc.jpg)');
});
</script>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>SocTalk</h1>
</div>
</div>
<div class="container chat-signin">
<form class="form-signin">
<h2>Chat Login</h2>
<label for="nickname">Nickname</label> <input type="text" placeholder="Nickname" id="nickname">
<div>
<label for="chatroom" class="chatroom">Chatroom</label> <select size="1" id="chatroom">
<option>Select Room</option>
<option>Gaming Soc</option>
<option>Pokemon Soc</option>
</select>
</div>
<button type="submit" id="enterRoom">Sign in</button>
</form>
</div>
<!-- /container -->
<div class="container chat-wrapper">
<form id="do-chat">
<h2></h2>
<h4></h4>
<table id="response" ></table>
<fieldset>
<legend>Enter your message..</legend>
<div>
<input type="text" placeholder="Your message..." id="message" style="height:60px"/>
<input type="submit" value="Send message" />
<button type="button" id="Exit-room">Exit Room</button>
</div>
</fieldset>
</form>
</div>
<div class="alt1">
<div class="container">
</div>
</div>
<div class="alt2">
<div class="container">
<footer>
<p>Passive Aggressive Liberals</p>
</footer>
</div>
</div>
</body>
</html>
Use background-image property to change or set background image.
<script>
$(".chatroom").click(function(){
$('.active').toggleClass('active');
$('.chatroom').toggleClass('active');
$('.jumbotron').fadeOut(500);
//change background image
$('.jumbotron').fadeIn(500);
$('.jumbotron').css('background-image','url(resource/GamingSoc.jpg)');
});
Possible duplicate of Setting background-image using jQuery CSS property
$('body').css('background', 'url(resource/GamingSoc.jpg)')

Categories

Resources