Develop Reference

I want to remove files from object

I created a multiple file upload form. And it shows me the list of files I'm about to upload once I've selected the files. and i made delete file button to remove files that have been deleted from the object but cannot be deleted
<input type="file" class="" id="fileInput" multiple onchange="displayFiles()" style="width: 85px">
function removeFile(index) {
var input = document.getElementById("fileInput");
Array.from(input.files).splice(index, 1);
displayFiles();
}
I tried this method and it didn't work.
function removeFile(index) {
var input = document.getElementById("fileInput");
delete input.files[index];
displayFiles();
}
please help me

Hopefully this small example helps, you could create an array of indices to skip which are used when uploading.
const get = str => document.querySelector(str);
get("#myFiles").addEventListener("change", e => {
get("#howMany").setAttribute("max", e.target.files.length);
});
get("#upload").addEventListener("click", () => {
const files = get("#myFiles").files;
const len = get("#howMany").value;
const data = new FormData();
for (let i = 0; i < len; i++) {
const targetFile = files[i];
data.append("files[]", targetFile, targetFile.name);
}
devFetch("testurl", {
method: "POST",
body: data
});
});
/* DEV FETCH EMULATE NORMAL FETCH FOR STACK SNIPPET, SHOULD JUST BE FETCH */
function devFetch(url, options) {
console.log("Posting to", url, "with method", options.method);
console.log("Body:");
console.log(options.body.getAll("files[]"));
}
<input id="myFiles" type="file" multiple /> <br />
<input id="howMany" type="range" min=0 max=0 /> <br />
<button id="upload">upload</button>

How clear the form inputs after submission?

Already tried everything from different references but, I can't get it to work. I intended to use it for google photo submission form. I just want my text inputs and textarea to clear after it successfully uploaded everything.
Here's the whole HTML code.
<form id="uploaderForm">
<label for="uploaderForm">Photo Upload Form</label>
<div>
<input type="text" name="applicantName" id="applicantName"
placeholder="Your Name">
</div>
<div>
<input type="text" name="gradesection" id="gradesection"
placeholder="Your Grade Level & Section">
</div><br>
<div>
You can select multiple Photos upload!<br>
<br>
<input type="file" name="filesToUpload" id="filesToUpload" multiple>
<br><br>
<input type="button" value="Submit" onclick="uploadFiles()">
</div>
</form>
<br>
<br>
<div id="output"></div>
<script>
var rootFolderId = 'xxxxxxxxxxxxxxxxxxx';
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 gradesection = document.getElementById('gradesection').value;
if (!gradesection) {
window.alert('Missing Grade & Section!');
}
var folderName = applicantName + ' - ' + gradesection;
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>
The form upload and displays the response to the user.
I want to reset the form so, the form resets to its original state, so when the user upload another file it wont upload the same file again. Right now, the submission message stays and I have no clue on how to reset the form.
I am new to javascript and I have no clue on what to call to rest the form, any idea? TIA Guys :)

As your code snippet only contains input, You can find all inputs using querySelectorAll and reset its value.
Example below. When you click the button it resets all the input.
function resetAllInput() {
const allInput = document.querySelectorAll('input');
allInput.forEach( input => {
input.value = "";
})
}
function uploadFiles() {
console.log('uploading files');
resetAllInput();
console.log('Resetted all inputs');
}
<form id="uploaderForm">
<label for="uploaderForm">Photo Upload Form</label>
<div>
<input type="text" name="applicantName" id="applicantName" placeholder="Your Name">
</div>
<div>
<input type="text" name="gradesection" id="gradesection" placeholder="Your Grade Level & Section">
</div><br>
<div>
You can select multiple Photos upload!<br>
<br>
<input type="file" name="filesToUpload" id="filesToUpload" multiple>
<br><br>
<input type="button" value="Submit" onclick="uploadFiles()">
</div>
</form>

You can assign null value to your input element:
const reset = () => {
let fileInput = document.getElementById('file-input');
fileInput.value = null;
}
<input type="file" id="file-input">
<button onclick="reset()">Reset</button>

how to call function and access in innerHTML

I'd like to show data which stored in DB at update page.
My problem is that I wanna access innerHTML tag to show images and any other data like
document.getElementById(visibilities).checked = true;
or
for (i=0; i<files.length; i++) {
var image = new Image();
image.src = files[i];
image.height = 100;
display.appendChild(image);
}
Btw, I don't know how to access tags or call function with onload in innerHTML. Please let me know. Thanks in advance.
function getData(id) {
var path = '/project/update/' + id;
restfull.get({
path: path
}, function(err, data) {
if(err) return;
var title = data.title;
var descriptions = data.descriptions;
var visibilities = data.visibilities;
var files = data.image;
const modal = new window.Modal({
modalContainerId: 'updateModal'
, modalTitleText: `Update Your Project`
, modalContentsInnerHTML: ` <form method="put" id="updateform" enctype="multipart/form-data" onload='getData()'>
<input type="radio" name="visibilities" value="public" id="public">Public
<input type="radio" name="visibilities" value="private" id="private">Private
<input type="radio" name="visibilities" value="unlisted" id="Unlisted">Unlisted <br>
<label for="title">Project Title</label>
<input type="text" name="title" id="title" required value="${title}"><br>
<label for="descriptions">Description</label>
<input type="text" name="descriptions" id="descriptions" required value="${descriptions}"><br>
<label for="multi_image">Images/ Videos
<input type="file" id="multi_image" name="multi_image" multiple onchange='previewImages()'><br>
<div id="display"></div>
<div id="projectpreview"></div>
</form>`
, modalSubmitBtnText: 'Update'
, modalSubmitBtnAction: function(){updatesubmit(data._id)}
, modalCancelBtnText: 'Cancel'
, modalCancelBtnAction: function() {
modal.destroy();
}
})
modal.show();
})
}

You can define the function outside and reference it by name. Here I also use the dataset of the button inside the innerHTML to store the id I want to access when the function is called.
const id = 1
document.getElementById('container').innerHTML = `
<button data-selected="${id}" onclick="foo(event)">Click Me</button>
`
const foo = ({target}) => console.log('selected id:', target.dataset.selected)
<div id="container"></div>

If you want to preview the uploaded image for update:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]); // convert to base64 string
}
}
$("#imgInput").change(function() {
readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
<input type='file' id="imgInput" />
<img id="preview" src="#" alt="your image" />
</form>
If you want to display an already stored image from database:
var image = document.getElementById('preview');
image.src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==";
image.width=100;
image.height=100;
image.alt="here should be some image";
<img id="preview">

Custom form with two file uploads to Google Drive only works half the time

I'm trying to make a custom web form where people can upload their resume and license to my Google Drive. I found some code online, which I've modified a little, and it sort of works.
code.gs
var emailTo= "test#test.com"
function doPost(e) {
try {
var data = e.parameter.fileContent; // First attachment
var filename = e.parameter.filename; // First attachment filename
var data2 = e.parameter.fileContent2; // Second attachment
var filename2 = e.parameter.filename2; // Second attachment filename
var email = e.parameter.Email;
var name = e.parameter.Name;
var result=uploadFileToGoogleDrive(data,filename,data2,filename2,name,email,e);
return ContentService // return json success results
.createTextOutput(
JSON.stringify({"result":"success",
"data": JSON.stringify(result) }))
.setMimeType(ContentService.MimeType.JSON);
} catch(error) { // if error return this
Logger.log(error);
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": error}))
.setMimeType(ContentService.MimeType.JSON);
}
}
function doGet() {
return HtmlService.createHtmlOutputFromFile('Form').setSandboxMode(
HtmlService.SandboxMode.IFRAME);
}
// new property service GLOBAL
var SCRIPT_PROP = PropertiesService.getScriptProperties();
// see: https://developers.google.com/apps-script/reference/properties/
/**
* select the sheet
*/
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
SCRIPT_PROP.setProperty("key", doc.getId());
}
/**
* record_data inserts the data received from the html form submission
* e is the data received from the POST
*/
function record_data(e,fileUrl,fileUrl2) {
try {
var doc = SpreadsheetApp.openById("Spreadsheet ID");
var sheet = doc.getSheetByName('Responses'); // select the responses sheet
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow()+1; // get next row
var row = [ new Date() ]; // first element in the row should always be a timestamp
// loop through the header columns
for (var i = 1; i < headers.length; i++) { // start at 1 to avoid Timestamp column
if(headers[i].length > 0 && headers[i] == "Resume") {
row.push(fileUrl); // add data to row
}
else if(headers[i].length > 0 && headers[i] == "License") {
row.push(fileUrl2); // add data to row
}
else if(headers[i].length > 0) {
row.push(e.parameter[headers[i]]); // add data to row
}
}
// more efficient to set values as [][] array than individually
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
}
catch(error) {
Logger.log(e);
}
finally {
return;
}
}
function uploadFileToGoogleDrive(data, file, data2, file2, name, email,e) {
try {
var dropbox = "Application Test";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var contentType = data.substring(5,data.indexOf(';')),
bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),
blob = Utilities.newBlob(bytes, contentType, file);
var subfolder = folder.createFolder([name, email].join("-"));
var file = subfolder.createFile(blob);
var fileUrl=file.getUrl();
var contentType2 = data2.substring(5,data2.indexOf(';')),
bytes2 = Utilities.base64Decode(data2.substr(data2.indexOf('base64,')+7)),
blob2 = Utilities.newBlob(bytes2, contentType2, file2);
var file2 = subfolder.createFile(blob2);
var fileUrl2=file2.getUrl();
//Generating Email Body
var html =
'<body>' +
'<h2> New Application </h2>' +
'<p>Name : '+e.parameters.Name+'</p>' +
'<p>Email : '+e.parameters.Email+'</p>' +
'<p>Phone Number : '+e.parameters.Phone+'</p>' +
'<p>Address : '+e.parameters.Address+'</p>' +
'<p>Postal Code : '+e.parameters.Postal+'</p>' +
'<p>File Name : '+e.parameters.filename+'</p>' +
'<p><a href='+file.getUrl()+'>Resume Link</a></p><br />' +
'<p>File Name : '+e.parameters.filename2+'</p>' +
'<p><a href='+file2.getUrl()+'>License</a></p><br />' +
'</body>';
record_data(e,fileUrl,fileUrl2);
MailApp.sendEmail(emailTo, "New Application Recieved","New Application Request Recieved",{htmlBody:html});
return file.getUrl() + file2.getUrl();
} catch (f) {
return ContentService // return json success results
.createTextOutput(
JSON.stringify({"result":"file upload failed",
"data": JSON.stringify(f) }))
.setMimeType(ContentService.MimeType.JSON);
}
}
Form.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form id="uploadForm" action="Insert Web App URL" method="POST">
<input type="hidden" value="" name="fileContent" id="fileContent">
<input type="hidden" value="" name="filename" id="filename">
<input type="hidden" value="" name="fileContent2" id="fileContent2">
<input type="hidden" value="" name="filename2" id="filename2">
<label> Name : </label><input required type="text" value="" name="Name" id="Name"><br><br>
<label> Email : </label> <input required type="text" value="" name="Email" id="Email"><br><br>
<label> Phone Number : </label><input required type="text" value="" name="Phone" id="Phone"><br><br>
<label> Address : </label> <input required type="text" value="" name="Address" id="Address"><br><br>
<label> Postal Code : </label><input type="text" value="" name="Postal" id="Postal"><br><br>
</form>
<label> Resume: <input id="Resume" name="Resume" type="file"/>
<label> License: <input id="License" name="License" type="file"/><br><br>
<input value="Submit" type="button" onclick="UploadFile();" />
<script>
function UploadFile() {
var reader = new FileReader();
var file = document.getElementById('Resume').files[0];
var reader2 = new FileReader();
var file2 = document.getElementById('License').files[0];
reader.onload = function(){
document.getElementById('fileContent').value=reader.result;
document.getElementById('filename').value=file.name;
//document.getElementById('uploadForm').submit();
}
reader2.onload = function(){
document.getElementById('fileContent2').value=reader2.result;
document.getElementById('filename2').value=file2.name;
document.getElementById('uploadForm').submit();
}
reader.readAsDataURL(file);
reader2.readAsDataURL(file2);
}
</script>
</body>
</html>
Usually it'll only upload one of the files (the license), and show a blank untitled file for the other, although it does upload both files correctly every few attempts.

Pass filename from file upload to text field

I have a part of a form where a user can upload a file. I want only the filename to be sent to a text field in the same form. So if user uploaded "C:/Folder/image.jpg", the text field should show "image.jpg". I tried some code myself but I know it's wrong:
function ff_uploadimages_action(element, action)
{var m = data.match(/((*):\/)/(.*)[\/\\]([^\/\\]+\.\w+)$/);
switch (action) {
case 'change':
if (data.match(/((*):\/)/(.*)[\/\\]([^\/\\]+\.\w+)$/).value)
ff_getElementByName('filename').value = m[2].text;
default:;
} // switch
} // ff_uploadimages_action
ff_uploadimages is the field to upload file, and filename is the textfield where name should appear. Any help at all is appreciated! Thanks.

Here's one way to do it
document.getElementById('upload').onchange = uploadOnChange;
function uploadOnChange() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
document.getElementById('filename').value = filename;
}
<input id="upload" type="file" />
<input id="filename" type="text" />
you don't mention jQuery but given it's popularity here's the same solution using jQuery
jQuery:
$('#upload').change(function() {
var filename = $(this).val();
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
$('#filename').val(filename);
});
Demo:
http://jsfiddle.net/pxfunc/WWNnV/4/

HTML:
<input id="upload" type="file" onChange="uploadOnChange(this)" />
<input id="filename" type="text" />
JS:
function uploadOnChange(e) {
var filename = e.value;var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex +1);
}
document.getElementById('filename').value = filename;
}

A shorter way in jQuery would be the following:
HTML
<input type="file" id="inputFile" class="hidden"/>
<input type="text" id="inputDisplayFileName" readonly/>
<button id="buttonChooseFile">Choose file</button>
jQuery
$("#buttonChooseFile").click(funtion()({
$("#inputFile").click();
});
$("#inputFile").change(function(){
var fileName = $("#inputFile").prop('files')[0]["name"];
$("inputDisplayFileName").val(fileName);
});
In this example the default file upload is hidden so that you can style the 'upload file input' as desired. Clicking the button will trigger the original (hidden) file upload. After choosing the file the .onchange() will do the rest of the work, copying the file the 'read only input text'.