Google Forms은 파일 업로드를 지원하지 않습니다. 하지만 Google Apps Script와 HTML 웹 폼을 사용한다면, Google Drive에 파일을 업로드 할 수 있습니다.
예를 들어, 선생님이 학생들에게 레포트를 받기 위해 웹 폼을 작성하고, 작성 한 폼을 공유함으로써, 학생들은 그 웹폼에 접근하여 파일을 업로드 할 수 있습니다.
Google Script는 업로드하는 파일을 blob 타입으로 읽고 구글드라이브에 새로운 파일로 저장하게 됩니다. 파일이름, 확장자 컨텐츠 내용까지 다 지정할 수 있습니다.
Google에서 제공되는 Google Script를 사용해보도록 하겠습니다.
파일 구조는 두가지 파일로 (Code.gs, form.html)으로 구성됩니다. Code.gs – Google Apps Script입니다. 다양한 Google API를 사용할때 사용됩니다. form.html – 학생들에게 보이는 화면입니다. HTML,CSS, 그리고 JavaScript로 구성되어 있습니다.
아래와 같이 작성해주세요.
Code.gs
/* The script is deployed as a web app and renders the form */
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html').setSandboxMode(HtmlService.SandboxMode.NATIVE);
// This is important as file upload fail in IFRAME Sandbox mode.
}
/* This function will process the submitted form */
function uploadFiles(form) {
try {
/* Name of the Drive folder where the files should be saved */
var dropbox = form.myName + " " + form.myEmail;
var folder, folders = DriveApp.getFoldersByName(dropbox);
/* Find the folder, create if the folder does not exist */
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
/* Get the file uploaded though the form as a blob */
var blob = form.myFile;
var file = folder.createFile(blob);
/* Set the file description as the name of the uploader */
file.setDescription("Uploaded by " + form.myName);
/* Return the download URL of the file once its on Google Drive */
return "File uploaded successfully " + file.getUrl();
} catch (error) {
/* If there's an error, show the error message */
return error.toString();
}
}
form.html
<!-- Include the Google CSS package -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<!-- You can also include your own CSS styles -->
<style>
form { margin: 40px auto; }
input { display:inline-block; margin: 20px; }
</style>
<script>
// The function will be called after the form is submitted
function doUploadFile() {
document.getElementById('uploadFile').value = "Uploading File..";
var f = document.getElementById('labnol');
google.script.run.withSuccessHandler(fileUploaded).uploadFiles(f);
return false;
}
// This function will be called after the Google Script has executed
function fileUploaded(status) {
document.getElementById('labnol').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<!-- This is the HTML form -->
<form id="labnol">
<!-- Text input fields -->
<input type="text" name="myName" placeholder="Your name..">
<input type="email" name="myEmail" placeholder="Your email..">
<!-- File input filed -->
<input type="file" name="myFile">
<!-- The submit button. It calls the server side function uploadfiles() on click -->
<input type="submit" id="uploadFile" value="Upload File"
onclick="this.value='Uploading..';doUploadFile();">
</form>
<!-- Here the results of the form submission will be displayed -->
<div id="output"></div>
위 코드를 작성후 프로젝트 명을 지정해주세요. 이전에 지정되어도 상관없습니다. 프로젝트 명을 작성할 경우 지정된 이름이 drive> 아래 놓이게 됩니다.
프로젝트명은 ‘report’로 하겠습니다.
프로젝트가 생성되고, 위 파일을 성공적으로 작성하였다면, ‘Publish > Deploy as web app’을 선택해주세요.
Project version: new (새로 만들었다면, 기존것을 변경 할 수도 있습니다.) Execute the app as: Me (앱이 실행되기 위해 권한을 부여받기 위한 사용자가 되겠습니다. ) Who has access to the app: Anyone, even anonymous 누가 이 웹에 접속 할 수 있는지, 접근 권한을 선택 할 수 있습니다.
모든 설정을 완료하고 업데이트를 누르면, 공유 URL이 생성됩니다.
이상.
참조
