I’ve create a app script that serve as backend of my file importer webpage, which I could select a file, rename it and move to corresponding subfolder in a shared Drive. It worked perfect after the deployment, since I was working on other project, so I didn’t use it for a entire month.
Now I come up with some idea and want to improve it, suddenly I found out this app script is not working at all, no error was logged in the console. I checked the modified date (because it was located in company’s shared Drive, others also have the access right) and who modified it last time, it turns out no one has touch it since I depolyed it.
I even tried previous version of depolyment which should works, but ran into same situation, not working but no errors.
Does anyone encountered same situation before? What could be the possible problem, for more details:
this is a standalone app script, which host a web, and enables Google Drive API Version 3, it also linked to a Google Cloud Platform (GCP) Project because I want to add costum properties to the imported file. (The filter part of the web works without problem, which could indicate Drive API is working)
The code is following (due to the privacy not all code are showed here):
index.html:
<code><body>
<div id="Importer" class="content">
<h1>File Importer</h1>
<form id="import_form" onsubmit="finishSelection(); return false;">
<div>
<label for="fileUpload">Upload File:</label>
<input type="file" id="fileUpload" name="fileUpload" accept=".zip, .7z, .gz" required>
</div>
<div>
<label for="fileName"> Rename the File: </label>
<input type="text" id="fileName" name="fileName" placeholder="New Name of the File" maxlength="30" required />
</div>
<div>
<label for="customerName_importer">Select Customer Name:</label>
<select id="customerName_importer" name="customerName_importer" required><option value=""></option></select>
</div>
<div>
<label for="processType_importer">Select Process Type:</label>
<select id="processType_importer" name="processType_importer" required><option value=""></option></select>
</div>
<div>
<label for="dataReceiving_importer">Data of Receiving the Data:</label>
<input type="date" id="dataReceiving_importer" name="dataReceiving_importer" required></input>
</div>
<div>
<label for="dataDeletion_importer">Date of deletion:</label>
<input type="date" id="dataDeletion_importer" name="dataDeletion_importer" required></input>
</div>
<input type="submit" value="Import">
</form>
</div>
<script>
function finishSelection() {
console.log('function finishSelection called');
const formData = new FormData(document.getElementById('import_form'));
const file = formData.get('fileUpload');
const originalFileName = file.name;
const newFileName = formData.get("fileName");
const customerName = formData.get('customerName_importer');
const processType = formData.get('processType_importer');
const dataReceiving = formData.get('dataReceiving_importer');
const dataDeletion = formData.get('dataDeletion_importer');
let filePathAfterMove;
console.log("import data:",dataReceiving);
console.log("file name:",originalFileName);
if (!file) {
console.error('No file selected');
return;
}
const reader = new FileReader();
reader.onload = function(event) {
const fileContent = event.target.result;
console.log("fileContent");
google.script.run.withSuccessHandler(function(fileID) {
test(fileID, originalFileName);
}).renameAndMoveFile(file.name, fileContent, newFileName, customerName, processType, dataReceiving, dataDeletion);
};
reader.onerror = function(event) {
console.error('Error reading file', event);
};
reader.readAsText(file);
}
function test(fileID, originalFileName) {
console.log("getpath and log function called");
google.script.run.withSuccessHandler(function(filePathAfterMove) {
log(fileID,originalFileName, filePathAfterMove);
}).getPath(fileID);
}
function log(fileID, originalFileName, filePathAfterMove) {
console.log("log function called");
google.script.run.logImportedFile(fileID, originalFileName, filePathAfterMove);
alert(`${originalFileName} has been moved to ${filePathAfterMove}`);
document.getElementById('import_form').reset();
}
document.addEventListener('DOMContentLoaded', initialize);
</script>
</body>
</code>
<code><body>
<div id="Importer" class="content">
<h1>File Importer</h1>
<form id="import_form" onsubmit="finishSelection(); return false;">
<div>
<label for="fileUpload">Upload File:</label>
<input type="file" id="fileUpload" name="fileUpload" accept=".zip, .7z, .gz" required>
</div>
<div>
<label for="fileName"> Rename the File: </label>
<input type="text" id="fileName" name="fileName" placeholder="New Name of the File" maxlength="30" required />
</div>
<div>
<label for="customerName_importer">Select Customer Name:</label>
<select id="customerName_importer" name="customerName_importer" required><option value=""></option></select>
</div>
<div>
<label for="processType_importer">Select Process Type:</label>
<select id="processType_importer" name="processType_importer" required><option value=""></option></select>
</div>
<div>
<label for="dataReceiving_importer">Data of Receiving the Data:</label>
<input type="date" id="dataReceiving_importer" name="dataReceiving_importer" required></input>
</div>
<div>
<label for="dataDeletion_importer">Date of deletion:</label>
<input type="date" id="dataDeletion_importer" name="dataDeletion_importer" required></input>
</div>
<input type="submit" value="Import">
</form>
</div>
<script>
function finishSelection() {
console.log('function finishSelection called');
const formData = new FormData(document.getElementById('import_form'));
const file = formData.get('fileUpload');
const originalFileName = file.name;
const newFileName = formData.get("fileName");
const customerName = formData.get('customerName_importer');
const processType = formData.get('processType_importer');
const dataReceiving = formData.get('dataReceiving_importer');
const dataDeletion = formData.get('dataDeletion_importer');
let filePathAfterMove;
console.log("import data:",dataReceiving);
console.log("file name:",originalFileName);
if (!file) {
console.error('No file selected');
return;
}
const reader = new FileReader();
reader.onload = function(event) {
const fileContent = event.target.result;
console.log("fileContent");
google.script.run.withSuccessHandler(function(fileID) {
test(fileID, originalFileName);
}).renameAndMoveFile(file.name, fileContent, newFileName, customerName, processType, dataReceiving, dataDeletion);
};
reader.onerror = function(event) {
console.error('Error reading file', event);
};
reader.readAsText(file);
}
function test(fileID, originalFileName) {
console.log("getpath and log function called");
google.script.run.withSuccessHandler(function(filePathAfterMove) {
log(fileID,originalFileName, filePathAfterMove);
}).getPath(fileID);
}
function log(fileID, originalFileName, filePathAfterMove) {
console.log("log function called");
google.script.run.logImportedFile(fileID, originalFileName, filePathAfterMove);
alert(`${originalFileName} has been moved to ${filePathAfterMove}`);
document.getElementById('import_form').reset();
}
document.addEventListener('DOMContentLoaded', initialize);
</script>
</body>
</code>
<body>
<div id="Importer" class="content">
<h1>File Importer</h1>
<form id="import_form" onsubmit="finishSelection(); return false;">
<div>
<label for="fileUpload">Upload File:</label>
<input type="file" id="fileUpload" name="fileUpload" accept=".zip, .7z, .gz" required>
</div>
<div>
<label for="fileName"> Rename the File: </label>
<input type="text" id="fileName" name="fileName" placeholder="New Name of the File" maxlength="30" required />
</div>
<div>
<label for="customerName_importer">Select Customer Name:</label>
<select id="customerName_importer" name="customerName_importer" required><option value=""></option></select>
</div>
<div>
<label for="processType_importer">Select Process Type:</label>
<select id="processType_importer" name="processType_importer" required><option value=""></option></select>
</div>
<div>
<label for="dataReceiving_importer">Data of Receiving the Data:</label>
<input type="date" id="dataReceiving_importer" name="dataReceiving_importer" required></input>
</div>
<div>
<label for="dataDeletion_importer">Date of deletion:</label>
<input type="date" id="dataDeletion_importer" name="dataDeletion_importer" required></input>
</div>
<input type="submit" value="Import">
</form>
</div>
<script>
function finishSelection() {
console.log('function finishSelection called');
const formData = new FormData(document.getElementById('import_form'));
const file = formData.get('fileUpload');
const originalFileName = file.name;
const newFileName = formData.get("fileName");
const customerName = formData.get('customerName_importer');
const processType = formData.get('processType_importer');
const dataReceiving = formData.get('dataReceiving_importer');
const dataDeletion = formData.get('dataDeletion_importer');
let filePathAfterMove;
console.log("import data:",dataReceiving);
console.log("file name:",originalFileName);
if (!file) {
console.error('No file selected');
return;
}
const reader = new FileReader();
reader.onload = function(event) {
const fileContent = event.target.result;
console.log("fileContent");
google.script.run.withSuccessHandler(function(fileID) {
test(fileID, originalFileName);
}).renameAndMoveFile(file.name, fileContent, newFileName, customerName, processType, dataReceiving, dataDeletion);
};
reader.onerror = function(event) {
console.error('Error reading file', event);
};
reader.readAsText(file);
}
function test(fileID, originalFileName) {
console.log("getpath and log function called");
google.script.run.withSuccessHandler(function(filePathAfterMove) {
log(fileID,originalFileName, filePathAfterMove);
}).getPath(fileID);
}
function log(fileID, originalFileName, filePathAfterMove) {
console.log("log function called");
google.script.run.logImportedFile(fileID, originalFileName, filePathAfterMove);
alert(`${originalFileName} has been moved to ${filePathAfterMove}`);
document.getElementById('import_form').reset();
}
document.addEventListener('DOMContentLoaded', initialize);
</script>
</body>
and code.gs:
<code>function renameAndMoveFile(file, file_content, newFileName, customerName, processType, dataReceiving, dataDeletion) {
try{
console.log("renameAndMoveFile called");
const sharedFolder = DriveApp.getFolderById(<folder_id>);
const uploadedFile = sharedFolder.createFile(file, file_content);
const newName = customerName + '_' + processType + '_' + newFileName;
uploadedFile.setName(newName);
const fileID = uploadedFile.getId();
var resource = {
properties: {
CustomerName: customerName,
ProcessType: processType,
DataReceiving: dataReceiving,
DataDeletion: dataDeletion,
}
};
Drive_v3.Files.update(resource,fileID, null,{ supportsAllDrives: true },);
var subfolders = sharedFolder.getFoldersByName(customerName);
var subfolder;
if (subfolders.hasNext()) {
subfolder = subfolders.next();
} else {
subfolder = sharedFolder.createFolder(customerName);
}
uploadedFile.moveTo(subfolder);
console.log("file moved");
return fileID;
} catch (error){
console.log("Error in renameAndMoveFile:", error.message);
return error.message;
//throw Error;
}
}
function logImportedFile(file_id, original_name, file_path) {
const sheet = SpreadsheetApp.openById(<file_id>).getSheetByName('Log');
const timestamp = new Date();
sheet.appendRow([file_id, timestamp, original_name, file_path]);
}
function getPath(file_id){
const filePath = [];
const file = DriveApp.getFileById(file_id);
let parent = file.getParents();
while (parent.hasNext()){
const folder = parent.next()
const folderName = folder.getName();
filePath.unshift(folderName);
parent = folder.getParents();
};
const chainedFolderNames = filePath.join('/');
return chainedFolderNames;
}
</code>
<code>function renameAndMoveFile(file, file_content, newFileName, customerName, processType, dataReceiving, dataDeletion) {
try{
console.log("renameAndMoveFile called");
const sharedFolder = DriveApp.getFolderById(<folder_id>);
const uploadedFile = sharedFolder.createFile(file, file_content);
const newName = customerName + '_' + processType + '_' + newFileName;
uploadedFile.setName(newName);
const fileID = uploadedFile.getId();
var resource = {
properties: {
CustomerName: customerName,
ProcessType: processType,
DataReceiving: dataReceiving,
DataDeletion: dataDeletion,
}
};
Drive_v3.Files.update(resource,fileID, null,{ supportsAllDrives: true },);
var subfolders = sharedFolder.getFoldersByName(customerName);
var subfolder;
if (subfolders.hasNext()) {
subfolder = subfolders.next();
} else {
subfolder = sharedFolder.createFolder(customerName);
}
uploadedFile.moveTo(subfolder);
console.log("file moved");
return fileID;
} catch (error){
console.log("Error in renameAndMoveFile:", error.message);
return error.message;
//throw Error;
}
}
function logImportedFile(file_id, original_name, file_path) {
const sheet = SpreadsheetApp.openById(<file_id>).getSheetByName('Log');
const timestamp = new Date();
sheet.appendRow([file_id, timestamp, original_name, file_path]);
}
function getPath(file_id){
const filePath = [];
const file = DriveApp.getFileById(file_id);
let parent = file.getParents();
while (parent.hasNext()){
const folder = parent.next()
const folderName = folder.getName();
filePath.unshift(folderName);
parent = folder.getParents();
};
const chainedFolderNames = filePath.join('/');
return chainedFolderNames;
}
</code>
function renameAndMoveFile(file, file_content, newFileName, customerName, processType, dataReceiving, dataDeletion) {
try{
console.log("renameAndMoveFile called");
const sharedFolder = DriveApp.getFolderById(<folder_id>);
const uploadedFile = sharedFolder.createFile(file, file_content);
const newName = customerName + '_' + processType + '_' + newFileName;
uploadedFile.setName(newName);
const fileID = uploadedFile.getId();
var resource = {
properties: {
CustomerName: customerName,
ProcessType: processType,
DataReceiving: dataReceiving,
DataDeletion: dataDeletion,
}
};
Drive_v3.Files.update(resource,fileID, null,{ supportsAllDrives: true },);
var subfolders = sharedFolder.getFoldersByName(customerName);
var subfolder;
if (subfolders.hasNext()) {
subfolder = subfolders.next();
} else {
subfolder = sharedFolder.createFolder(customerName);
}
uploadedFile.moveTo(subfolder);
console.log("file moved");
return fileID;
} catch (error){
console.log("Error in renameAndMoveFile:", error.message);
return error.message;
//throw Error;
}
}
function logImportedFile(file_id, original_name, file_path) {
const sheet = SpreadsheetApp.openById(<file_id>).getSheetByName('Log');
const timestamp = new Date();
sheet.appendRow([file_id, timestamp, original_name, file_path]);
}
function getPath(file_id){
const filePath = [];
const file = DriveApp.getFileById(file_id);
let parent = file.getParents();
while (parent.hasNext()){
const folder = parent.next()
const folderName = folder.getName();
filePath.unshift(folderName);
parent = folder.getParents();
};
const chainedFolderNames = filePath.join('/');
return chainedFolderNames;
}
With the code above, when I tried to upload a file only the following are displayed in the console:
<code>function finishSelection called
userCodeAppPanel:67 import data: 2024-08-19
userCodeAppPanel:68 file name: test.zip
userCodeAppPanel:79 fileContent
2430136560-warden_bin_i18n_warden.js:134 Net state changed from IDLE to BUSY
</code>
<code>function finishSelection called
userCodeAppPanel:67 import data: 2024-08-19
userCodeAppPanel:68 file name: test.zip
userCodeAppPanel:79 fileContent
2430136560-warden_bin_i18n_warden.js:134 Net state changed from IDLE to BUSY
</code>
function finishSelection called
userCodeAppPanel:67 import data: 2024-08-19
userCodeAppPanel:68 file name: test.zip
userCodeAppPanel:79 fileContent
2430136560-warden_bin_i18n_warden.js:134 Net state changed from IDLE to BUSY
It stucked right before calling server side funtion. Nothing pops out, no error at all, and no file was uploaded.
What bothering me is: these codes works perfectly last month, nothing has changed from my side, now it suddenly stop working. What could be the problem, it is from my side or google side, or even others modified yet I didn’t noticed?
I am very appreicate for the help!