Reputation: 41
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