I am day 1 fresh using javascript and html. I am simply trying to extract text once a button is clicked and write out that text to an s3 bucket. I have an html file that contains the html and java script function that will extract the text. Now I just need to write that data to s3.
<html>
<body>
<center>
<label for="freeform">Please decribe what you would like photo-ai to create:</label>
<br>
<textarea id="freeform" name="freeform" rows="4" cols="50">
Enter text here...
</textarea>
<input type="button" value="Submit my Application!" onclick="formdata()" />
</center>
</body>
</html>
<script>
function formdata()
{
var free_text= document.getElementById("freeform").value;
}
</script>
I see stuff in Node.js but I am not sure the way I am doing here is possible. Basically I am lost and I am asking for guidance, thanks.
On day one you should definitely learn something else than using AWS S3 SDK to upload objects to S3 bucket, but here are the official SDK with some examples how to make it work:
https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-examples.html
so basically the task is quite simple, but I didn't find any workable solution for my problem. I have a huge upload script on my website (at the moment localhost), but lets reduce all the complexity to the only neccessary.
So I just want to upload a single file to Google Drive with Google App Script and receive the URL of it to save it in a var, to work with that information on a later point in my function.
Now the problem is I already have the form on my website, I dont want the form inside script.google.com as extra html, I want to transfer my user input to Google App Script, then upload it to google drive and return the url back to my website where I can save it into a var.
My problem now is, I cant put all the stuff together.
This is the form on my website (simplified):
<form name="myForm" method="post">
<!-- <form name="first-form"> -->
<input type="text" placeholder="Name" id="myName">
<input type="file" name="myFile" id="myFile">
<button onclick="UploadFile()" type="submit">submit</button>
</form>
So how can I upload my informations inside google drive and get back a result? How can I push the data in Google App Script without using iFrame or anything else?
THANK YOU!
**** Working example if html is in scripts.google.com ****
gs
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('forms.html').setTitle("Google File Upload by CTRLQ.org");
}
function uploadFileToGoogleDrive(data, file, name, email) {
try {
var dropbox = "Received Files";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
/* Credit: www.labnol.org/awesome */
var contentType = data.substring(5,data.indexOf(';')),
bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),
blob = Utilities.newBlob(bytes, contentType, file),
file = folder.createFolder([name, email].join(" ")).createFile(blob);
return "OK";
} catch (f) {
return f.toString();
}
}
html in apps.googlescript
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google File Upload by CTRLQ.org</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<style>
.disclaimer{width: 480px; color:#646464;margin:20px auto;padding:0 16px;text-align:center;font:400 12px Roboto,Helvetica,Arial,sans-serif}.disclaimer a{color:#009688}#credit{display:none}
</style>
</head>
<body>
<!-- Written by Amit Agarwal amit#labnol.org -->
<form class="main" id="form" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
<div id="forminner">
<div class="row">
<div class="col s12">
<h5 class="center-align teal-text">Upload Files to my Google Drive</h5>
<p class="disclaimer">This File Upload Form (tutorial) is powered by Google Scripts</p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="name" type="text" name="Name" class="validate" required="" aria-required="true">
<label for="name">Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" name="Email" class="validate" required="" aria-required="true">
<label for="email">Email Address</label>
</div>
</div>
<div class="row">
<div class="file-field input-field col s12">
<div class="btn">
<span>File</span>
<input id="files" type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Select a file on your computer">
</div>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<button class="waves-effect waves-light btn submit-btn" type="submit" onclick="submitForm(); return false;">Submit</button>
</div>
</div>
<div class="row">
<div class="input-field col s12" id = "progress">
</div>
</div>
</div>
<div id="success" style="display:none">
<h5 class="left-align teal-text">File Uploaded</h5>
<p>Your file has been successfully uploaded.</p>
<p>The pro version (see demo form) includes a visual drag-n-drop form builder, CAPTCHAs, the form responses are saved in a Google Spreadsheet and respondents can upload multiple files of any size.</p>
<p class="center-align"><a class="btn btn-large" href="https://gum.co/GA14?wanted=true" target="_blank">Upgrade to Pro</a></p>
</div>
</form>
<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red">
<i class="large material-icons">menu</i>
</a>
<ul>
<li><a class="btn-floating red" href="https://gum.co/GA14" target="_blank" title="Buy License - File Upload Form"><i class="material-icons">monetization_on</i></a></li>
<li><a class="btn-floating blue" href="https://youtu.be/C_YBBupebvE" target="_blank" title="Video Tutorial"><i class="material-icons">video_library</i></a></li>
<li><a class="btn-floating green" href="http://www.labnol.org/internet/file-upload-google-forms/29170/" target="_blank" title="How to Create File Upload Forms"><i class="material-icons">help</i></a></li>
</ul>
</div>
<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/0.97.5/js/materialize.min.js"></script>
<script src="https://gumroad.com/js/gumroad.js"></script>
<script>
var file,
reader = new FileReader();
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, file.name, $('input#name').val(), $('input#email').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 file to upload");
return;
}
file = files[0];
if (file.size > 1024 * 1024 * 5) {
showError("The file size should be < 5 MB. Please <a href='http://www.labnol.org/internet/file-upload-google-forms/29170/' target='_blank'>upgrade to premium</a> for receiving larger files in Google Drive");
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>
</body>
</html>
As reccomended Im going to describe the process here.
So we are on the website: www.example.com , there is a form with text input field and file field. Lets say we put in an image and call it example. Now if we press submit, I want to upload the image to google drive without any oAuth (Thats why we need to use google app script here) and name it to what we typed in the textfield. When the upload is done, I want the url of the image of google drive to be returned back to the website, so the form can continue working with the information. I want to save the returned url in a var then, to later on save it in a database. Thats why I need the result back to my website.
So scheme looks like the following:
Enter informations to form on website -> Redirected to google app script: take informations of website form field and upload file to google drive and name it like text input entry -> taking url of google drive as final result -> redirecting final url result back to website -> saving url result in var and continuing doing stuff from function on website -> at the end saving the informations from var to a database -> finish
------------------------------------------------ EDIT: ------------------
Thanks to #Tanaike Im a lot closer to the goal of my challenge here, so in order to see where I got stuck, I'm replicating my issue now:
I took the form with the script from your example:
<form id="form">
<input name="file" id="uploadfile" type="file">
<input name="filename" id="filename" type="text">
<input id="submit" type="submit">
</form>
<script>
const form = document.getElementById('form');
form.addEventListener('submit', e => {
e.preventDefault();
const file = form.file.files[0];
const fr = new FileReader();
fr.readAsArrayBuffer(file);
fr.onload = f => {
const url = "https://script.google.com/macros/s/###/exec"; // <--- Please set the URL of Web Apps.
const qs = new URLSearchParams({filename: form.filename.value || file.name, mimeType: file.type});
fetch(`${url}?${qs}`, {method: "POST", body: JSON.stringify([...new Int8Array(f.target.result)])})
.then(res => res.json())
.then(e => console.log(e)) // <--- You can retrieve the returned value here.
.catch(err => console.log(err));
}
});
</script>
and for google script:
function doPost(e) {
// const folderId = "###"; // Folder ID which is used for putting the file, if you need.
const blob = Utilities.newBlob(JSON.parse(e.postData.contents), e.parameter.mimeType, e.parameter.filename);
const file = DriveApp.getFolderById(folderId || "root").createFile(blob);
const responseObj = {filename: file.getName(), fileId: file.getId(), fileUrl: file.getUrl()};
return ContentService.createTextOutput(JSON.stringify(responseObj)).setMimeType(ContentService.MimeType.JSON);
}
Now when i tried to upload something I had following error: CORS Policy not able to fetch. So I changed this part to the following and added mode no cors:
const qs = new URLSearchParams({filename: form.filename.value || file.name, mimeType: file.type});
fetch(`${url}?${qs}`, {method: "POST", mode: "no-cors", body: JSON.stringify([...new Int8Array(f.target.result)])})
This worked. Second try uploading the file caused in the following error:
it says: syntax error: unexpected end of input
So I changed this line and removed the brackets from res.json
JSON.stringify([...new Int8Array(f.target.result)])})
.then(res => res.json)
third try to upload the file actually worked with the following console result:
ƒ json() { [native code] }
But there is no file uploaded in google drive. Im missing something somewhere. Maybe we should create a folder and place the files in there.
Oh and another information: when i run doPost function in google app sript it says:
TypeError: Cannot read property 'postData' of undefined (line 13
EDIT2 -----------------------------------------
I added https://drive.google.com/uc?export=download&id=###fileId### to your code and everything works fine. The file is getting uploaded.
Lets say we upload the file test.mp3 and we call it testdata.
This is what we recieve:
{
"filename": "testdata",
"fileId": "###some id##",
"fileUrl": "https://drive.google.com/uc?export=download&id=###fileId###"
}
Now when I open the file url, the browser downloads file but its called: testdata, not testdata.mp3. The filetyp ending is missing.
Second task: If you click the link, I want to open the file in browser, when its mp3 file for example i want that you can play the sound in webview, like it is here: https://files.freemusicarchive.org/storage-freemusicarchive-org/music/Creative_Commons/Dead_Combo/CC_Affiliates_Mixtape_1/Dead_Combo_-_01_-_Povo_Que_Cas_Descalo.mp3
I hope you can guide me!
I believe your goal as follows.
Your web site is not related to Google account. It's independent.
Your web site has a form for uploading a file.
When users submit the form, you want to upload the file to your Google Drive without the authorization, and want to return the URL of the uploaded file on Google Drive.
About "Database", this is your database. You will put the retrieved URL of the file to "Database" at the client side.
In this case, I think that your goal can be achieved using the Web Apps created by Google Apps Script.
Usage:
Please do the following flow.
1. Create new project of Google Apps Script.
Sample script of Web Apps is a Google Apps Script. So please create a project of Google Apps Script.
If you want to directly create it, please access to https://script.new/. In this case, if you are not logged in Google, the log in screen is opened. So please log in to Google. By this, the script editor of Google Apps Script is opened.
2. Prepare script.
Please copy and paste the following script (Google Apps Script) to the script editor. This script is for the Web Apps.
Server side: Google Apps Script
Please set the folder ID that you want to put the file.
function doPost(e) {
const folderId = "root"; // Or Folder ID which is used for putting the file instead of "root", if you need.
const blob = Utilities.newBlob(JSON.parse(e.postData.contents), e.parameter.mimeType, e.parameter.filename);
const file = DriveApp.getFolderById(folderId).createFile(blob);
const responseObj = {filename: file.getName(), fileId: file.getId(), fileUrl: file.getUrl()};
return ContentService.createTextOutput(JSON.stringify(responseObj)).setMimeType(ContentService.MimeType.JSON);
}
3. Deploy Web Apps.
On the script editor, Open a dialog box by "Publish" -> "Deploy as web app".
Select "Me" for "Execute the app as:".
By this, the script is run as the owner.
Select "Anyone, even anonymous" for "Who has access to the app:".
Click "Deploy" button as new "Project version".
Automatically open a dialog box of "Authorization required".
Click "Review Permissions".
Select own account.
Click "Advanced" at "This app isn't verified".
Click "Go to ### project name ###(unsafe)"
Click "Allow" button.
Click "OK".
Copy the URL of Web Apps. It's like https://script.google.com/macros/s/###/exec.
When you modified the Google Apps Script, please redeploy as new version. By this, the modified script is reflected to Web Apps. Please be careful this.
4. Upload a file from client side to server side.
Client side: HTML & Javascript
Please set the URL of your Web Apps to the following script.
<form id="form">
<input name="file" id="uploadfile" type="file">
<input name="filename" id="filename" type="text">
<input id="submit" type="submit">
</form>
<script>
const form = document.getElementById('form');
form.addEventListener('submit', e => {
e.preventDefault();
const file = form.file.files[0];
const fr = new FileReader();
fr.readAsArrayBuffer(file);
fr.onload = f => {
const url = "https://script.google.com/macros/s/###/exec"; // <--- Please set the URL of Web Apps.
const qs = new URLSearchParams({filename: form.filename.value || file.name, mimeType: file.type});
fetch(`${url}?${qs}`, {method: "POST", body: JSON.stringify([...new Int8Array(f.target.result)])})
.then(res => res.json())
.then(e => console.log(e)) // <--- You can retrieve the returned value here.
.catch(err => console.log(err));
}
});
</script>
At the client side, when you selected a file from your local PC and push the button, the file is uploaded to your Google Drive by retrieving the data at the Web Apps (server side).
Result:
When above script is run, the following value is returned. From this, you can retrieve the URL of the file.
{
"filename": "### inputted filename ###",
"fileId": "###",
"fileUrl": "https://drive.google.com/file/d/###/view?usp=drivesdk"
}
Note:
When you modified the script of Web Apps, please redeploy the Web Apps as new version. By this, the latest script is reflected to Web Apps. Please be careful this.
In above script, the maximum file size is 50 MB. Because in the current stage, the maximum blob size is 50 MB at Google Apps Script.
References:
Web Apps
Taking advantage of Web Apps with Google Apps Script
Lots of useful tips in https://stackoverflow.com/a/63391363/1585523 answer! Thank you for sharing. Instead of POSTing the file, we could also use
On the client: index.html
google.script.run.withSuccessHandler(fileName => {}).withFailureHandler(error => {}).saveInDrive(fileAsByteArray);
On the server: Code.gs
function saveInDrive(f) {
const blob = Utilities.newBlob(f, "image/jpeg", "some-name");
const file = DriveApp.getFolderById("root").createFile(blob);
return file.getName()
}
You can even exchange complicated types like JS objects with binary info as values as well in this approach.
I do not think that adding
mode: 'no-cors'
is right way because then this mode will block app from reading response(cors policies), which by the way comes not from response to initial request but from second redirected GET request
How can I automatically save an image from canvas into a folder? I am using the
signature_pad-1.5.2 from szimek (link). Here is what I have tried so far:
HTML CANVAS
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="description">Signature</div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button save" data-action="save">Save</button>
</div>
</div>
<script src="js/signature_pad.js"></script>
<script src="js/app.js"></script>
The signature_pad.js is for drawing in the canvas. Here is the content of my app.js from signature_pad-1.5.2 (I modified it a little):
app.js
var wrapper = document.getElementById("signature-pad"),
clearButton = wrapper.querySelector("[data-action=clear]"),
saveButton = wrapper.querySelector("[data-action=save]"),
canvas = wrapper.querySelector("canvas"),
signaturePad;
saveButton.addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
alert("Please provide signature first.");
} else {
newfolder = myObject.CreateFolder ("C:\\xampp\\htdocs\\signature\\resources\\sigs");
alert();
saveButton.href = signaturePad.toDataURL();
saveButton.download = 'image.png';
}
});
I am trying to save the image.png file to newFolder when I click the save button. Thanks
There is no way for javascript to access the filesystem, this is due to security concerns. You can store the image data as a string in a lot of places though, such as browser storage. Luckily for you it looks as though you're trying to store it in a web server's folder!
The best thing for you to do here is to make a script on the server that you want to store the image on. That script will accept a file POST request and store it in a server folder somewhere. This can be written in php for example.
Once you have that server-side script, make an AJAX request from the client (from the javascript) with the image data to that server script.
I would provide code samples and a more in-depth explanation, but unfortunately you haven't provided any real info about your tech stack and what exactly you're trying to accomplish. Good luck!
I'm trying to read data from an external JSON file using AngularJS.
Here is my HTML
<div class="panel panel-default" ng-controller="MyAppController">
<div class="panel-heading">
<div class="input-group">
<input ng-model="query" type="text" placeholder="What file are you looking for?" class="form-control"><span ng-click="clearFilter()" ng-disabled="query.length == 0" class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>
</div>
</div>
<div class="panel list-group">
<span data-ng-repeat="cat in cats | filter: query" class="list-group-item animate-repeat">{{cat.title}}
</span>
<div class="clearfix"></div>
</div>
</div>
It works fine when I use this in my JS file and data shows up in a list.
function MyAppController($scope, $http) {
var url = 'http://jobs.github.com/positions.json?callback=JSON_CALLBACK';
$http.jsonp(url).success(function(data) {
$scope.cats = data;
});
}
But when I change the URL to my personal site nothing shows up even though I literally just copied and pasted everything in the github JSON file to a local JSON file. (just to test it out)
function MyAppController($scope, $http) {
var url = 'http://ciagent.com/Website-files/positions.json?callback=JSON_CALLBACK';
$http.jsonp(url).success(function(data) {
$scope.cats = data;
});
}
http://ciagent.com/Website-files/positions.json?callback=JSON_CALLBACK &
http://jobs.github.com/positions.json?callback=JSON_CALLBACK have the same exact content but only the github one works with my angular app for some reason.
Any reasons as to why it's doing this?
Assuming you are using a static resource file you need to realize that the string 'JSON_CALLBACK' is a placeholder and gets modified within each $http.jsonp() request to something else.
You should be able to see this in the actual request URL in network tab of browser dev tools.
You can also open the github version in browser and change the value to see that it is not static on their server and will adjust to whatever value is sent.
If you want to use jsonp server side it needs to return dynamic value of the callback GET parameter value.
+1 to what #charlietfl said. Also, be sure to set Content-Type:application/javascript;charset=utf-8 in your response headers.
I'm trying to create a sample epub file that I can read in iBooks that will contain interactive content that iBooks will access via localStorage. I am able to get the localStorage piece working on the browser aok in chrome and firefox (not IE).
I noted that the localStorage javascript bit does not work when the files have *.xhtml extensions, only *.html extensions.
I am able to zip up the html, opf and ncx and get an epub that I can read in digital editions and only throw epubcheck errors related to javascript stuff.
I first tried importing this to iBooks, and I could read it aok, but the form was not interactive. Then I googled and found a post saying that it need to to be in an iFrame, which I did. I was then able to enter text into the form, but the local storage bit did not work.
Here are the 2 relevant html files:
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
</head>
<body onLoad="writeStoredData( 'storedName' );" >
<div epub:type="chapter">
<h1>An HTML5 Ebook Sample</h1>
<p> A simple html5 form that uses local storage to hold user input info</p>
<ul><li>Does a device retain the info when the user moves from page to page? </li>
<li>When the device is turned off and on?</li>
</ul>
<p>In this simple form, the body has an onLoad attribute that calls a function to load the "name" from local storage. When the user enters input from a form the value is updated. When the user closes the page and opens it again the value is still there.</p>
<br/>
<div class="formContainer">
<iframe class="content" src="form.html"></iframe>
</div>
<div id="storedName"></div>
<p>Go to page 2
</p>
</div>
<script>
function writeStoredData( id ){
var storedNameDiv = document.getElementById(id);
storedNameDiv.innerHTML = "<p>The stored name is: <span class='selected'>" + localStorage.getItem('somename') + "</span></p>";
}
</script>
</body>
</html>
and the form: (this has the function that writes to localStorage)
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>Epub3 Test Input Form</title>
</head><body>
<form>
Please enter your name: <input type="text" id="nameInput"/>
<input type="submit" value="enter" onClick="writeLocal();" onSubmit="window.location.reload()"/>
</form>
<script>
function writeLocal(){
var submittedName = document.getElementById('nameInput').value;
// calling it 'somename' to indicate user defined key
localStorage.setItem('somename', submittedName);
writeStoredData( 'storedName' );
}
function writeStoredData( id ){
var storedNameDiv = document.getElementById(id);
storedNameDiv.innerHTML = "<p>The stored name is: <span class='selected'>" + localStorage.getItem('somename') + "</span></p>";
}
</script>
</body></html>
and here is the manifest from the content.opf file:
<manifest>
<item id="js" href="javascript/ebook-test.js" media-type="text/javascript"/>
<item href="form.html" id="form1" media-type="application/xhtml+xml" properties="scripted"/>
<item href="ebook-sample.html" id="page1" media-type="application/xhtml+xml" properties="scripted"/>
<item href="ebook-sample-pg2.html" id="page2" media-type="application/xhtml+xml" properties="scripted"/>
<item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/>
<item id="toc" properties="nav" href="toc.xhtml" media-type="application/xhtml+xml"/>
</manifest>
The bit written by javascript never appears at all. My next step is to try to create a file in iBooks Author, but was hoping to be able to do this with epub. I know that iBooks should be able to do this stuff, as most of the googling I did brought up tutorials for iBooks Author.
Also, I tried various things with the javascript; most of the examples I saw had the code in a tag at the bottom of the html file, but I tried in a separate *.js file, and in the head tag, made no difference.
Any help greatly appreciated.
bp
localStorage has been disabled in iBooks by Apple, hence you cannot hope to have your code running from within an EPUB rendered by it.
You can use contenteditable it will be work. Remove the input tag