Прямой переход на новую страницу после отправки формы - PullRequest
0 голосов
/ 11 сентября 2018

В настоящее время я разработал API Google Scripts, который используется для загрузки файлов в общую папку Google Диска. После успешной загрузки файла я хочу, чтобы они были перенесены на отдельную страницу «Спасибо», чтобы было ясно, что их загрузка сработала. В настоящее время у меня есть только сообщение на той же странице об этом, и я не могу понять, как перейти на новую страницу, которую я создал.

Это дополнительный бит, который я нашел в разных вопросах, чтобы попытаться перейти на новую страницу, однако пока он не работает, так как он остается на той же странице формы загрузки. Я включил его в конец моего файла code.gs. Любые идеи о том, как перейти на пользовательскую страницу с надписью "спасибо" или чем-то подобным, были бы великолепны!

function doPost(e) {
  var template = HtmlService.createTemplateFromFile('Thanks.html');
  return template.evaluate();
}

Остальная часть моего кода выглядит следующим образом:

Code.gs:

 function doGet() {
        return HtmlService.createHtmlOutputFromFile('form').setSandboxMode(
                HtmlService.SandboxMode.IFRAME);
    }

function createFolder(parentFolderId, folderName) {
    try {
        var parentFolder = DriveApp.getFolderById(parentFolderId);
        var folders = parentFolder.getFoldersByName(folderName);
        var folder;
        if (folders.hasNext()) {
            folder = folders.next();
        } else {
            folder = parentFolder.createFolder(folderName);
        }
        return {
            'folderId' : folder.getId()
        }
    } catch (e) {
        return {
            'error' : e.toString()
        }
    }
}

function uploadFile(base64Data, fileName, folderId) {
    try {
        var splitBase = base64Data.split(','), type = splitBase[0].split(';')[0]
                .replace('data:', '');
        var byteCharacters = Utilities.base64Decode(splitBase[1]);
        var ss = Utilities.newBlob(byteCharacters, type);
        ss.setName(fileName);

        var folder = DriveApp.getFolderById(folderId);
        var files = folder.getFilesByName(fileName);
        var file;
        while (files.hasNext()) {
            // delete existing files with the same name.
            file = files.next();
            folder.removeFile(file);
        }
        file = folder.createFile(ss);
        return {
            'folderId' : folderId,
            'fileName' : file.getName()
        };
    } catch (e) {
        return {
            'error' : e.toString()
        };
    }
}

function doPost(e) {
  var template = HtmlService.createTemplateFromFile('Thanks.html');
  return template.evaluate();
}

form.html:

<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>


<body>

<div align="center">
  <p><img src="https://drive.google.com/uc?export=download&id=0B1jx5BFambfiWDk1N1hoQnR5MGNELWRIM0YwZGVZNzRXcWZR"
  height="140" width="400" ></p>
<div>

    <form id="uploaderForm">
        <label for="uploaderForm">  <b> Welcome to the Tesco's animal welfare and soy reporting system. </b> </label>
<BR>
<BR>


<div style="max-width:500px; word-wrap:break-word;">

Please add your contact information below and attach a copy of your company's animal welfare standard before clicking submit. Wait for the browser to confirm your submission and you may then close this page.

<BR>
<BR>

Thank you very much for your submission.

</div>

<BR>
<BR>
        <div>
            <input type="text" name="applicantName" id="applicantName"
                placeholder="Your Name">
        </div>

<BR>
        <div>
            <input type="text" name="applicantEmail" id="applicantEmail"
                placeholder="Your Company">
        </div>

<BR>
<BR>
        <div>
            <input type="file" name="filesToUpload" id="filesToUpload" multiple>
            <input type="button" value="Submit" onclick="uploadFiles()">
        </div>
    </form>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="output"></div>
    <script>
        var rootFolderId = '1-aYYuTczQzJpLQM3mEgOkWsibTak7KE_';
        var numUploads = {};
        numUploads.done = 0;
        numUploads.total = 0;
        // Upload the files into a folder in drive
        // This is set to send them all to one folder (specificed in the .gs file)
        function uploadFiles() {
            var allFiles = document.getElementById('filesToUpload').files;
            var applicantName = document.getElementById('applicantName').value;
            if (!applicantName) {
                window.alert('Missing applicant name!');
            }
            var applicantEmail = document.getElementById('applicantEmail').value;
            if (!applicantEmail) {
                window.alert('Missing applicant email!');
            }
            var folderName = applicantEmail;
            if (allFiles.length == 0) {
                window.alert('No file selected!');
            } else {
                numUploads.total = allFiles.length;
                google.script.run.withSuccessHandler(function(r) {
                    // send files after the folder is created...
                    for (var i = 0; i < allFiles.length; i++) {
                        // Send each file at a time
                        uploadFile(allFiles[i], r.folderId);
                    }
                }).createFolder(rootFolderId, folderName);
            }
        }
        function uploadFile(file, folderId) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var content = reader.result;
                document.getElementById('output').innerHTML = 'uploading '
                        + file.name + '...';
                //window.alert('uploading ' + file.name + '...');               
                google.script.run.withSuccessHandler(onFileUploaded)
                        .uploadFile(content, file.name, folderId);
            }
            reader.readAsDataURL(file);
        }
        function onFileUploaded(r) {
            numUploads.done++;
            document.getElementById('output').innerHTML = 'uploaded '
                    + r.fileName + ' (' + numUploads.done + '/'
                    + numUploads.total + ' files).';
            if (numUploads.done == numUploads.total) {
                document.getElementById('output').innerHTML = 'All of the '
                        + numUploads.total + ' files are uploaded';
                numUploads.done = 0;
            }
        }
    </script>

        <label for="uploaderForm"> 

Powered by 3Keel 
</label>
</body>


</html>

thanks.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Thank you for submitting!
  </body>
</html>

EDIT:

Я изменил эту функцию в соответствии с рекомендациями:

        if (numUploads.done == numUploads.total) {
            window.location = 'Thanks.html';
            numUploads.done = 0;

Теперь он перенаправляет на другую страницу, но я столкнулся с этой ошибкой:

  1. Это ошибка.

Запрошенный URL не найден на этом сервере. Это все, что мы знаем.

Ответы [ 2 ]

0 голосов
/ 13 сентября 2018

Если вы ищете решение своей проблемы, как насчет этого ответа?

  • Вы хотите открыть Thanks.html, когда процесс на Form.html завершится.
  • Form.html и Thanks.html помещены в проект.

Если мое понимание верно, как насчет этого обходного пути? Я когда-либо сталкивался с вашей ситуацией. В то время я мог решить эту проблему с помощью этого обходного пути.

Очки модификации:

  • Не обязательно использовать doPost() для доступа к Thanks.html. Я думаю, что вы можете достичь того, что вы хотите, используя doGet().
  • Я думаю, что @ ответ Скотта Крейга также может быть использован для этой ситуации. В моем временном решении URL window.location = 'Thanks.html'; изменен.
    • Использует URL развернутых веб-приложений. В вашем сценарии, когда пользователи получают доступ к вашей форме, они получают доступ к URL-адресу развернутых веб-приложений. В этом обходном пути он используется путем добавления параметра запроса.

Модифицированные скрипты:

form.html

Для сценария, добавленного в ваш вопрос как «РЕДАКТИРОВАТЬ», пожалуйста, измените его следующим образом.

От:
window.location = 'Thanks.html';
Для того, чтобы:
window.location = 'https://script.google.com/macros/s/#####/exec?toThanks=true';

https://script.google.com/macros/s/#####/exec - это URL развернутых веб-приложений. Пожалуйста, добавьте параметр запроса, например toThanks=true. Это пример параметра запроса.

Code.gs

Пожалуйста, измените doGet() следующим образом.

От:
function doGet() {
  return HtmlService.createHtmlOutputFromFile('form')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
Для того, чтобы:
function doGet(e) {
  if (e.parameter.toThanks) {
    return HtmlService.createHtmlOutputFromFile('Thanks')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  } else {
    return HtmlService.createHtmlOutputFromFile('form')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  }
}

Примечание:

  • Когда сценарий развернутых веб-приложений был изменен, пожалуйста, повторно разверните его как новую версию. Таким образом, последний скрипт отображается в веб-приложениях.
  • Ход этого модифицированного скрипта следующий.
    • Когда пользователи получают доступ к Form.html, поскольку параметр запроса toThanks=true не используется, возвращается Form.html.
    • Когда onFileUploaded() запущен и if (numUploads.done == numUploads.total) {} имеет значение true, он открывает URL-адрес веб-приложений с параметром запроса toThanks=true. Таким образом, if (e.parameter.toThanks) {} из doGet() истинно, и Thanks.html возвращается и открывает его.

В моей среде я мог подтвердить, что этот модифицированный скрипт работает. Но если это не сработало в вашей среде, извините. В то время я хотел бы подумать о проблеме.

0 голосов
/ 11 сентября 2018

Возможно, я неправильно понимаю ваш вопрос, но, насколько я понимаю, вместо этой строки:

document.getElementById('output').innerHTML = 'All of the '
                    + numUploads.total + ' files are uploaded';

Вы хотите перенаправить на Thanks.html. Если это правильно, просто замените вышеуказанную строку на:

window.location = 'Thanks.html';
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...