Данные из формы ниже сохраняю в таблице google sheets (гугл таблицы) и папке google drive (гугл диск).
По средствам javascript функции fetch() отправляется post запрос с данными из формы к платформе google apps script, которая, в свою очередь, служит обработчиком. Получив данные из запроса на стороне apps script, использую класс SpreadsheetApp (google sheets) для добавления новой строки в таблицу. Тут же обрабатываю файлы из запроса и с использованием класса DriveApp (google drive) создаю файл в необходимой папке.
В результате на e-mail приходит уведомление о новой записи с помощью класса MailApp (gmail api).
Форма:
Функция отправки данных в google sheets
function sendData() {
let data = new FormData(),
uploadFiles = [],
promiseList = [];
const photos = document.querySelector('#photofile'),
scriptId = 'идентификатор развертывания',
url = `https://script.google.com/macros/s/${scriptId}/exec`;
form.querySelectorAll('input').forEach(input => {
if (input.type === "text" || input.type === "email") {
data.append(input.name, input.value)
}
})
for (let file of photos.files) {
const fr = new FileReader();
fr.readAsArrayBuffer(file);
let promise = new Promise((resolve) => {
fr.onload = f => {
let fileInfo = {
fileArray: [...new Int8Array(f.target.result)],
filename: file.name,
mimeType: file.type,
}
resolve(uploadFiles.push(fileInfo))
}
})
promiseList.push(promise)
}
Promise.all(promiseList).then(result => {
data.append('files', JSON.stringify(uploadFiles))
fetch(`${url}`, { method: "POST", mode: 'no-cors', body: data })
.then(response => {
document.querySelector('.success').classList.add('show');
toggleFormDisabled(false)
sendButton.textContent = sendButton.dataset.text
form.querySelectorAll('input').forEach(input => {
input.value = '';
input.classList.remove('is-valid')
})
setTimeout(function(){
document.querySelector('.success').classList.remove('show');
}, 4000)
})
.catch(err => {
document.querySelector('.error').classList.add('show');
setTimeout(function(){
document.querySelector('.error').classList.remove('show');
}, 5000)
})
})
}
// Смотри код этой страницы
Функция обработки запроса code.gs
function doPost(e) {
const FOLDER_ID = 'идентификатор папки',
SHEET_ID = 'идентификатор таблицы',
now = new Date();
let linkList = [];
if(e.parameter.files) {
for(let fileInfo of JSON.parse(e.parameter.files)){
try{
const blob = Utilities.newBlob(fileInfo.fileArray, fileInfo.mimeType, fileInfo.filename);
const file = DriveApp.getFolderById(FOLDER_ID).createFile(blob);
file.setDescription(`Витрина от ${e.parameter.company} (now). Загрузил ${e.parameter.name} (${e.parameter.email}, ${e.parameter.phone})`);
linkList.push(file.getUrl())
} catch(err){
linkList.push(`Ошибка загрузки файла ${err || ''}`)
}
}
}
const sheet = SpreadsheetApp.openById(SHEET_ID);
const ws = sheet.getSheetByName('form')
ws.appendRow([
new Date(),
e.parameter.name,
e.parameter.email,
e.parameter.phone,
e.parameter.city,
e.parameter.address,
e.parameter.shopName,
e.parameter.company
].concat(linkList))
MailApp.sendEmail({
to: "e-mail для уведомлений",
subject: "Новая регистрация!",
htmlBody: `${e.parameter.name} (${e.parameter.email}) добавил данные в таблицу.
Таблица, Папка.`,
});
}