I am new to programming and just created a simple application to send text files to a specific folder in my google drive. I would like to ask if somebody knows how to send an image file instead of the text file? Below is the function to send the text file:
function upload(){
var text = document.querySelector('textarea');
if(text.value != ""){
const blob = new Blob([text.value], {type: 'plain/text'});
// get parent folder id from localstorage
const parentFolder = localStorage.getItem('parent_folder');
// set file metadata
var metadata = {
name: 'backup-file-'+String(Math.random() * 10000).split('.')[0]+'.txt',
mimeType: 'plain/text',
parents: [parentFolder]
};
var formData = new FormData();
formData.append("metadata", new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
formData.append("file", blob);
fetch("https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart", {
method: 'POST',
headers: new Headers({ "Authorization": "Bearer " + gapi.auth.getToken().access_token}),
body: formData
}).then(function(response){
return response.json();
}).then(function(value){
console.log(value)
});
}
}
I have tried to change it to this:
function upload(){
const file1 = this.file; // It supposes that "this.file" is the blob.
// get parent folder id from localstorage
const parentFolder = localStorage.getItem('parent_folder');
// set file metadata
var metadata = {
name: 'backup-file-'+String(Math.random() * 10000).split('.')[0]+'.png',
mimeType: 'image/png',
parents: [parentFolder]
};
var formData = new FormData();
formData.append("metadata", new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
formData.append("file", file1);
fetch("https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart", {
method: 'POST',
headers: new Headers({ "Authorization": "Bearer " + gapi.auth.getToken().access_token}),
body: formData
}).then(function(response){
return response.json();
}).then(function(value){
console.log(value)
});
}
However, this is only sending an "empty" file. Hope someone can help. Many thanks!
Below is the entire code:
<!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">
<title>Back up to google drive</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
body{
font-family: 'Noto Sans KR', sans-serif;
margin: 0px;
text-align: center;
}
.header{
background-color: rgb(224, 224, 224, 0.5);
padding: 0px 150px;
line-height: 80px;
height: 80px;
border-bottom: 1px solid rgb(224, 224, 224, 0.6);
}
.title{
font-weight: 700;
font-size: 30px;
float: left;
color: #3c84f8;
}
.auth-buttons{
float: right;
}
.signin, .signout{
border: 0px;
padding: 10px 70px;
background-color: #3c84f8;
color: white;
outline: none;
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
display: none;
}
.actions{
padding: 0px 300px;
}
textarea{
width: calc(100% - 40px);
height: 450px;
margin: 20px auto;
background-color: rgb(224, 224, 224, 0.2);
border: 2px solid rgb(224, 224, 224, 1);
outline: none;
padding: 10px 20px;
font-family: 'Noto Sans KR', sans-serif;
font-size: 18px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.upload{
border: 0px;
outline: none;
padding: 8px 30px;
display: block;
font-size: large;
border: 2px solid rgb(224, 224, 224, 1);
font-family: 'Noto Sans KR', sans-serif;
cursor: pointer;
float: right;
color: #3c84f8;
}
</style>
</head>
<body>
<div class="header">
<div class="title">Backup To Google Drive</div>
<div class="auth-buttons">
<button class="signin">Sign In</button>
<button class="signout">Sign Out</button>
</div>
</div>
<div class="actions">
<textarea placeholder="Enter text here ..."></textarea>
<button class="upload" onclick="upload()">Backup</button>
<input id="files" type="file" name="files[]" multiple/>
<img id="image-element"/>
</div>
<script>
window.onload = handleClientLoad;
var CLIENT_ID = <enter client ID>;
var API_KEY = <enter API key>;
var DISCOVERY_DOCS = <Discovery docs>;
var SCOPES = <scopes>;
var signinButton = document.getElementsByClassName('signin')[0];
var signoutButton = document.getElementsByClassName('signout')[0];
function handleClientLoad(){
gapi.load('client:auth2', initClient);
}
function initClient(){
gapi.client.init({
apiKey: API_KEY,
clientId: CLIENT_ID,
discoveryDocs: DISCOVERY_DOCS,
scope: SCOPES
}).then(function(){
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// check initial signin state
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
signinButton.onclick = handleSignin;
signoutButton.onclick = handleSignout;
}, function(error){
console.error(error);
})
}
// now make function for signin checking
function updateSigninStatus(isSignedIn){
if(isSignedIn){
signinButton.style.display = 'none';
signoutButton.style.display = 'block';
checkFolder();
}else{
signinButton.style.display = 'block';
signoutButton.style.display = 'none';
}
}
// handle signin click
function handleSignin(){
gapi.auth2.getAuthInstance().signIn();
}
// handle signout click
function handleSignout(){
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function(){
location.reload();
});
auth2.disconnect();
}
// check for a Backup Folder in google drive
function checkFolder(){
gapi.client.drive.files.list({
'q' : 'name = "Backup Folder"',
}).then(function(response){
var files = response.result.files;
if(files && files.length > 0){
for(var i=0; i<files.length; i++){
var file = files[i];
localStorage.setItem('parent_folder', file.id);
console.log('Folder Available');
}
}else{
// if folder not available then create
createFolder();
}
})
}
// now create a function to upload file
function upload(){
var text = document.querySelector('textarea');
if(text.value != ""){
const blob = new Blob([text.value], {type: 'plain/text'});
// get parent folder id from localstorage
const parentFolder = localStorage.getItem('parent_folder');
// set file metadata
var metadata = {
name: 'backup-file-'+String(Math.random() * 10000).split('.')[0]+'.txt',
mimeType: 'plain/text',
parents: [parentFolder]
};
var formData = new FormData();
formData.append("metadata", new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
formData.append("file", blob);
fetch("https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart", {
method: 'POST',
headers: new Headers({ "Authorization": "Bearer " + gapi.auth.getToken().access_token}),
body: formData
}).then(function(response){
return response.json();
}).then(function(value){
console.log(value)
});
}
}
function createFolder(){
var access_token = gapi.auth.getToken().access_token;
var request = gapi.client.request({
'path': 'drive/v2/files',
'method': 'POST',
'headers': {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + access_token,
},
'body': {
'title': 'Backup Folder',
'mimeType': 'application/vnd.google-apps.folder'
}
});
request.execute(function(response){
localStorage.setItem('parent_folder', response.id);
})
}
document
.getElementById("files")
.addEventListener("change", function () {
document
.getElementById("image-element")
.setAttribute("src", window.URL.createObjectURL(this.files[0]));
});
</script>
<script src="https://apis.google.com/js/api.js"></script>
</body>
</html>