Search This Blog

Upload Image to Google Drive And Google Sheet From HTML File Input Element | JavaScript | AppScript

Upload Image to Google Drive And Google Sheet From HTML File Input Element | JavaScript | AppScript

Hello, in today's video i'll be showing you how to upload image in Google drive and Google sheet From HTML File Input Element.

AppScript Code


let app = SpreadsheetApp.openByUrl("Your_Google_Sheet_URL");
let sheet = app.getSheetByName("Your_Google_Sheet_Name");
function doPost(e){
try{
  let obj = JSON.parse(e.postData.contents);
  let dcode = Utilities.base64Decode(obj.base64);
  let blob = Utilities.newBlob(dcode,obj.type,obj.name);
  let newFile = DriveApp.createFile(blob);
  let link = newFile.setSharing(DriveApp.Access.ANYONE_WITH_LINK,DriveApp.Permission.VIEW).getDownloadUrl();
  let lr = sheet.getLastRow();
  sheet.getRange(lr+1,1).setFormula(`=IMAGE("${link}")`);
  return ContentService.createTextOutput("image uploaded")
}catch(err){
  return ContentService.createTextOutput(err)
}

}

Html JavaScript 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>Document</title>
</head>
<body>
<input type="file"accept="image/*">
<img src="" alt="">
<script>
    let url = "Api_Endpoint_Url";
    let file = document.querySelector("input");
    let img = document.querySelector("img");
    file.addEventListener('change',()=>{
        let fr = new FileReader();
        fr.addEventListener('loadend',()=>{
            let res = fr.result;
            img.src=res;
            let spt = res.split("base64,")[1];
            // console.log(spt);
            let obj = {
                base64:spt,
                type:file.files[0].type,
                name:file.files[0].name
            }
            fetch(url,{
                method:"POST",
                body:JSON.stringify(obj)
            })
            .then(r=>r.text())
            .then(data=>console.log(data))

        })
        fr.readAsDataURL(file.files[0])
    })
</script>
</body>
</html>

No comments:

Post a Comment