Ningsang Jabegu
Ningsang Jabegu

Reputation: 41

Uploading Photo to google drive and showing into google sheet

This is my html form and appscript. Whenever the user uploads using "फारम बुझाउनुहोस्" btn, it need to first upload photo in google drive inside the folder "CS_Display_photo-Initial_Request" which is in root folder Google drive Root folder has a folder name "CS_Display_photo-Initial_Request"

`

<form id="photo_form"> 
    <fieldset> 
        <legend>फोटो विवरण</legend> 
        <label for="user_photo">हालसालै खिचिएको फोटो</label>  
        हालसालै खिचिएको पासफोटो वा आफ्नो फोटो आफै खिचेको खण्डमा उज्यलो प्रकासमा दुइवटा कान आएको  प्रष्ट फोटो अपलोड गर्नुहोला ।  
        <input type="file" name="userPhoto" id="user_photo" accept="image/*"> 
        <div id="form_show_photo"> </div> 
    </fieldset> 
    <input type="hidden" name="sheetName" value="Photo Form"> <!-- Add this line to specify the sheet name --> 
    <button type="submit" id="myButton">फारम बुझाउनुहोस्   </button> 
</form> <div id="message" style="display:none;"></div> 

<script>    
    document.addEventListener("DOMContentLoaded", () => {
        let url = "https://script.google.com/macros/s/AKfycbxdFUvsssd_0bAoKmI0ZrUlaQfkI6E73ypmN8r6j_5vrVWBcJ0u_zVJQyBTJ7E-7R6B_w/exec";
        let form = document.querySelector("form");
        let file = document.querySelector("input[type='file']");
        let img = document.querySelector("#form_show_photo img");
        // Shows Photo when photo is added by user
        $('#user_photo').change(function () {
            // get selected file and create a URL for it
            var file = this.files[0];
            var url = URL.createObjectURL(file);
            // update the HTML of the div with the selected image
            $('#form_show_photo').html('<img src="' + url + '">');
        });

        form.addEventListener("submit", (event) => {
            event.preventDefault();
            let fr = new FileReader();
            fr.addEventListener("loadend", () => {
                let res = fr.result;
                let spt = res.split("base64,")[1];
                let formData = {
                    base64: spt,
                    type: file.files[0].type,
                    name: file.files[0].name,
                };
                fetch(url, {
                    method: "POST",
                    body: JSON.stringify(formData),
                })
                    .then((response) => response.text())
                    .then((data) => console.log(data))
                    .catch((error) => console.error("Request error:", error));
            });

            fr.readAsDataURL(file.files[0]);
        });
    });`

and here is the appscript

`

function doPost(e) { 
    try { 
         var formData = JSON.parse(e.postData.contents); var folderName = "CS_Display_photo-Initial_Request"; // Specify the folder name 
         var parentFolder = DriveApp.getFoldersByName(folderName).next(); // Get the parent folder by name
         // Upload the file to the parent folder
         var data = Utilities.base64Decode(formData.fileData);
         var blob = Utilities.newBlob(data, formData.mimeType, formData.fileName);
         var file = parentFolder.createFile(blob);
         var fileId = file.getId();

         // Update the spreadsheet with the image URL
         var spreadsheetId = "130wSROY1_mscyXvuftCTbENkpqxVcmEsVKhWRa4WFwo"; // Spreadsheet ID
         var sheetName = formData.sheetName; // Sheet name
         var sheet = SpreadsheetApp.openById(spreadsheetId).getSheetByName(sheetName);

         // Set the image formula in a specific cell
         var imageUrl = "https://drive.google.com/uc?id=" + fileId;
         var imageFormula = '=IMAGE("' + imageUrl + '", 4, 50, 100)';
         var cell = sheet.getRange("F1"); // Replace with the cell where you want to insert the image
         cell.setFormula(imageFormula);

         return ContentService.createTextOutput("File uploaded successfully.");

       } catch (err) {
         return ContentService.createTextOutput("Error: " + err.message);
       }
     }

`

I tried changing the google appscript more than 10 times, but didn't figureout what to do next. Since I am using this feature in my project, It's been like a month, I didn't get hint on where I got mistake. Can you please help me in this this is my spreadsheet https://docs.google.com/spreadsheets/d/130wSROY1_mscyXvuftCTbENkpqxVcmEsVKhWRa4WFwo/edit?usp=sharing this is the folder in google drive where I want to store the picture

using the formula "=IMAGE(sth.png)" in google sheet I want to display it.

Upvotes: 0

Views: 55

Answers (0)

Related Questions