I am trying to make a website that will save a cat into the account of the user and have tried this:
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-savetodrive"
data-src="http://example.com/pug-snores.mp3"
data-filename="pug-snores.mp3"
data-sitename="A Snoring Pug">
</div>
The save icon shows up but it does not save to the drive.
Why?
Thanks
try the explicit render: code from the google javascript api
<!DOCTYPE html>
<html>
<head>
<title>Save to Drive Demo: Explicit Render</title>
<link rel="canonical" href="http://www.example.com">
<script src="https://apis.google.com/js/platform.js">
{parsetags: 'explicit'}
</script>
</head>
<body>
Render the Save to Drive button
<div id="savetodrive-div"></div>
<script>
function renderSaveToDrive() {
gapi.savetodrive.render('savetodrive-div', {
src: '//example.com/path/to/myfile.pdf',
filename: 'My Statement.pdf',
sitename: 'My Company Name'
});
}
document.getElementById('render-link').addEventListener('click', renderSaveToDrive);
</script>
</body>
</html>
The data-src URL can be served from another domain but the responses from the HTTP server needs to support HTTP OPTION requests and include the following special HTTP headers:
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Range
Access-Control-Expose-Headers: Cache-Control, Content-Encoding, Content-Range
If you want upload a local file with input file form and/or without php lib would be ...
<!DOCTYPE html>
<html>
<head>
<title>Save to Drive Demo: Explicit Render</title>
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<form id="GDrive" name="GDrive" enctype="multipart/form-data" method = "post">
<input type="file" id="file" name="file" onChange="renderSaveToDrive('savetodrive-div', this.files[0].name,'GDrive');"><div id="savetodrive-div"></div>
</form>
<script>
function renderSaveToDrive(namediv, namefile, idfrm) {
window.___gcfg = {
lang: 'es-ES',
parsetags: 'explicit'
};
var xhr = new XMLHttpRequest();
var fd = new FormData(document.forms.namedItem(idfrm));
fd.append("file_new_name", namefile);
xhr.open("POST", location.href);
xhr.send(fd);
gapi.savetodrive.render(namediv, {
src: namefile,
filename: namefile,
sitename: 'GDrive Demo: Explicit Render'
});
}
</script>
</body>
</html>
Related
This is Google's code
function getOAuthService() {
return OAuth2.createService('SERVICE_NAME')
.setAuthorizationBaseUrl('SERVICE_AUTH_URL')
.setTokenUrl('SERVICE_AUTH_TOKEN_URL')
.setClientId('CLIENT_ID')
.setClientSecret('CLIENT_SECRET')
.setScope('SERVICE_SCOPE_REQUESTS')
.setCallbackFunction('authCallback')
.setCache(CacheService.getUserCache())
.setPropertyStore(PropertiesService.getUserProperties());
}
I don't know what are SERVICE_AUTH_URL and SERVICE_AUTH_TOKEN_URL
This is my
var SERVICE_AUTH_URL = 'http://account.simontest.com/a/login?app=addon';
After submit and login, I redirect my website to this link:
https://script.google.com/macros/d/13-mVZUel3ZnYoFKC5JrRUkWD12iMSa3REEfddfdf71ucXm1rA_s0/usercallback
and got this message :
"Sorry, unable to open the file at this time.
Please check the address and try again."
https://imgur.com/a/C8Iep
But It's still error.
Anybody has any idea about where I am going wrong? Thanks.
Here, SERVICE_AUTH_TOKEN_URL is the rest api url of the service to get the access token, refresh token using auth code generated in the oauth login process. Probably, you might have missed the callback implementation.Follow the below code:
var oauthService = getOAuthService();
function authCallback(oauthResponse) {
try {
console.log("oauthResponse->" + JSON.stringify(oauthResponse));
oauthService.handleCallback(oauthResponse);
return HtmlService.createHtmlOutputFromFile("auth-success");
} catch (e) {
var template = HtmlService.createTemplateFromFile("auth-failure");
template.errorMessage = e.toString();
return template.evaluate();
}
}
auth-success.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<div class="sidebar">
<p>Your GitHub account has been connected.</p>
</div>
</body>
<script>
setTimeout(function() {
top.window.close();
}, 2000);
</script>
</html>
auth-failure.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<div class="sidebar">
<p>Your GitHub account was not connected. Please try again.</p>
<h3>Details:</h3>
<pre><?= errorMessage ?></pre>
</div>
</body>
</html>
I kept getting the "Sorry, unable to open the file at this time." message until I realized you have to append a secret access code as well as the state to the url.
The OAuth2 server (account.simontest.com in your case) needs to format the redirect url like this:
Pseudo-code:
$redirect_uri = $redirect_uri . "?code=" . $your_secret_code . "&state=" . $state
See this page for more details: OAuth2 Simplified
So: how can I use the drive button: https://developers.google.com/drive/v3/web/savetodrive and load a selected local file from an input: file so that I can save it in the cloud?
I understand that the button loads a file that is hosted on another host by putting its url in the button, but I need to save a local file, and from "input: file" put it in "data-url" or where it is correct to upload the file (images in my case)
<!DOCTYPE html>
<html>
<head>
<title>Save to Drive Demo: Explicit Render</title>
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<form id="GDrive"
name="GDrive"
enctype="multipart/form-data"
method="post">
<input type="file"
onChange="renderSaveToDrive('savetodrive-div', this.files[0].name,'GDrive');">
<div id="savetodrive-div"></div>
</form>
<script>
function renderSaveToDrive(namediv, namefile, idfrm) {
console.log('namediv: ' + namediv + ' nameFile: ' + namefile);
window.___gcfg = {
lang: 'es-ES',
parsetags: 'explicit'
};
var xhr = new XMLHttpRequest();
var fd = new FormData(document.forms.namedItem(idfrm));
fd.append("file_new_name", namefile);
xhr.open("POST", location.href);
xhr.send(fd);
gapi.savetodrive.render(namediv, {
src: namefile,
filename: namefile,
sitename: 'GDrive Demo: Explicit Render'
});
}
</script>
</body>
</html>
To override the chrome web store new tab page I use the following code:
"chrome_url_overrides": {
"newtab": "index.html"
}
I have a backend which serves the html files so instead of using the index.html file I would like to get a html file via a http request.
Is this possible? Or is there a workaround Thanks.
You could make an ajax call from your index page to remote server, and replace the entire html with external html. Sample code looks like the following
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
index.js
var SERVER_URL = "";
var xhr = new XMLHttpRequest();
xhr.onload = function() {
replaceHtml(xhr.responseText);
};
xhr.open("GET", SERVER_URL);
xhr.send();
function replaceHtml(data) {
document.open("text/html");
document.write(data);
document.close();
}
You could simply have some javascript inside a <script></script> tag in your index.html file that grabs your generated html content from a custom domain.
I have file named a.html with this code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Restaurant Gaststätte Gartenfreunde-Ehningen</title>
<meta charset="utf-8" />
<meta name="generator" content="iloapp 2.1"/>
<link rel="shortcut icon" href="//ilostatic.one.com/iloapp/gallery/images/favicon.ico" type="image/vnd.microsoft.icon"/>
</head>
<body>
<script>
(function () {
var script = document.createElement('script');
script.src = '//ilostatic.one.com/iloapp/gallery/js/init.js?' + (new Date).getTime();
document.documentElement.firstChild.appendChild(script);
})();
</script>
<noscript><iframe src="//ilostatic.one.com/iloapp/gallery/html/nojs_1_en-US.html" frameBorder="0" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></iframe></noscript>
</body>
</html>
It`s for a galerie who look like this: link
I want to include this here: link
Need some help here.
If you are using Jquery you can do the following:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
If you are looking to do raw Javascript DOM then you can do the following:
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
}
xhttp.open("GET", "b.html", true);
xhttp.send();
}
You could include an HTML code from another file without scripting using SSI (Sever
Side Includes).
Just name your file with .shtml extension and write something like at the place you want to include your file (e.g. index.html):
<!--#include virtual="/galerie/index.html" -->
Usually SSI works in .shtml files by default without any configuration.
Web server will work up .shtml file, looks for SSI directives inside it and process them.
I've succesfull integrated galerie in script. :) Thanks all guys for youre tips. I've used iframe . Finaly worked
when i click on start upload button it is redirecting to http://jquery-file-upload.appspot.com/ but i could not seen whether my image has uploaded or not.
you can look at jquery fileupload rails
Install the gem by adding this to your Gemfile gem "jquery-fileupload-rails"
now in this path app/assets/application.js add //= require jquery-fileupload this will add all the js files need
for the css app/assets/stylesheets/application.css add
*= require jquery.fileupload
*= require jquery.fileupload-ui
you can follow the jQuery-File-Upload /wiki/ Basic-plugin on how to set up or watch the railscasts.com on jquery file upload
This is your basic upload form
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
</body>
</html>
hope that this helps.