Google Forms do not support file uploads but you can use Google Apps Script for uploading files to Google Drive through an HTML web form. For instance, you can share the form with your class, or with your clients, and they can directly upload school assignments, photographs, and other files to a specific folder in your Google Drive.
There are two steps involved here. First you need to create an HTML form using standard HTML, CSS and JavaScript. You can use the Add-ons CSS package to give the standard Google look-n-feel to your file upload form. Here’s a sample form:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!— Include the Google CSS package —>
<!— You can also include your own CSS styles —>
<style>
form { margin: 40px auto; }
input { display:inline-block; margin: 20px; }
</style>
// The function will be called after the form is submitted
function uploadFile() {
document.getElementById(‘uploadFile’).value = “Uploading File..”;
google.script.run
.withSuccessHandler(fileUploaded)
.uploadFiles(document.getElementById(“labnol”));
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;
}
<!— 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..’;uploadFile();”>
</form>
<!— Here the results of the form submission will be displayed —>
<div id=“output”></div>
|
The server side Google Script code includes a function for processing the form input. It reads the uploaded file as a blob and saves the blob as a new file into your Google Drive. The file name, extension and content type are preserved.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
/* 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();
}
}
|
You can save the two files and deploy the script as a web app as demonstrated in the GIF animation below.
Cermin 