Not removing value from multifile

Not removing value from multifile - javascript

I'm running the following to upload and remove any file if clicked:
$(document).on('click','.close',function(){
$(this).parents('span').remove();
})
document.getElementById("usp-files").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
document.getElementById('usp-files').onchange = uploadOnChange;
function uploadOnChange() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
var files = $('#usp-files')[0].files;
for (var i = 0; i < files.length; i++) {
$("#upload_prev").append('<span>'+files[i].name+'<p class="close">X</p></span>');
}
document.getElementById('filename').value = filename;
}
HTML
<input type="hidden" id="uploadFile" placeholder="Add files from My Computer" class="steptextboxq3"/>
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input name="usp-files[]" id="usp-files" type="file" maxlength="999999" data-required="false" placeholder="Upload your images here" class="upload sp-input usp-input-files my_images select-file multiple" multiple="multiple" name="browsefile">
</div>
<input id="filename" type="hidden" />
<div id="upload_prev"></div>
Visually, we can see that it is removing it, but when I then send it to the server, it is saving all the files I have uploaded even tho I have removed them in front end.
jsFiddle here

Related

Problem with Upload file to Google Drive using google script

I used these AttachFileFromJS() before and it work properly but that is in webapp deployment
,but this code has error when run inside modal on google sheet
(I'm not quite sure that make any difference?)
Code.gs
function UploadToDrive(){
var ui = SpreadsheetApp.getUi();
var html = HtmlService.createHtmlOutputFromFile('Upload').setWidth(400).setHeight(300);
ui.showModelessDialog(html," ");
}
function AttachFileFromJS(folderId,fileObj){
var folder = DriveApp.getFolderById(folderId);
if(fileObj.fileName != ''){
var data = Utilities.base64Decode(fileObj.fileData);
var blob = Utilities.newBlob(data, fileObj.mimeType, fileObj.fileName);
var createFile = folder.createFile(blob);
var picId = createFile.getId() ;
return picId ;
}
}
function Uploader(fileObj){
var folderId = '1VaRzewFKEUWL3DJ_uf7z6lIocFqu0P6j';
AttachFileFromJS(folderId,fileObj)
}
Upload.html (show only some part)
<div id="attach" name="attach">
<input type="file" name="file" id="fileInput" onchange="LoadFile(event)" />
<input type="hidden" id="fileData" name="fileData" />
<input type="hidden" id="mimeType" name="mimeType" />
<input type="hidden" id="fileName" name="fileName" />
</div><br>
<div class="form-group">
<button type="button" class="form-control btn btn-primary rounded submit px-3" onclick="UploadFile()" >Upload File</button>
</div>
Javascript
function LoadFile(event)
{
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
console.log(e.target.result);
var fileData = e.target.result.substr(e.target.result.indexOf(",")+1);
var mimeTypeStart = e.target.result.indexOf("data:") + 5;
var mimeTypeEnd = e.target.result.indexOf(";");
var mimeType = e.target.result.substr(mimeTypeStart, mimeTypeEnd - mimeTypeStart);
var fileName = file.name;
document.getElementById("fileData").value = fileData;
document.getElementById("mimeType").value = mimeType;
document.getElementById("fileName").value = fileName;
};
reader.readAsDataURL(file);
}
function UploadFile(){
var File1 = {};
File1.fileData = document.getElementById("fileData").value ;
File1.mimeType = document.getElementById("mimeType").value ;
File1.fileName = document.getElementById("fileName").value ;
google.script.run.Uploader(File1) ;
}

Generate JSON string from form on change to populate business-hours

I have the following html input's
<form id="test" role="form">
<input class="form-control" data-day="monday" type="time" name="open" value="12:00">
<input class="form-control" data-day="monday" type="time" name="close" value="20:00">
<!-- Rest of the weekdays -->
<input class="form-control" data-day="sunday" type="time" name="open" value="12:00">
<input class="form-control" data-day="sunday" type="time" name="close" value="23:00">
</form>
<pre id="output"></pre>
i try to generate a JSON string based on the input (on change)..
The problem with my code is that it update (and only) al the values of the other days when i change sunday.
if i make a change on the other day's nothing happens, i kinda get it why it fails, but breaking my head to long on it now.
function toJSONString(form) {
var daysObj = {}
var hoursObj = {};
var elements = form.querySelectorAll("input[type='time']");
for (var i = 0; i < elements.length; ++i) {
var element = elements[i];
var days = element.dataset.day;
var name = element.name;
var value = element.value;
//if (days) {
//if (name) {
hoursObj[name] = value;
//}
daysObj[days] = hoursObj;
//}
}
return JSON.stringify(daysObj, null, 2);
}
document.addEventListener("DOMContentLoaded", function() {
var form = document.getElementById("test");
var output = document.getElementById("output");
form.addEventListener("change", function(e) {
e.preventDefault();
var json = toJSONString(this);
output.innerHTML = json;
}, false);
});
<form id="test" role="form">
<input class="form-control" data-day="monday" type="time" name="open" value="12:00">
<input class="form-control" data-day="monday" type="time" name="close" value="20:00">
<!-- Rest of the weekdays -->
<input class="form-control" data-day="sunday" type="time" name="open" value="12:00">
<input class="form-control" data-day="sunday" type="time" name="close" value="23:00">
</form>
<pre id="output"></pre>

Use the input event instead of change as a change event only occurs after an input loses focus. input events are triggered every time the input's value changes
form.addEventListener("input",function(){})
You are also using the same hours object for each day. And thus each iteration you are just changing the same object's open and close property.
You need to create a new object for hoursObj after you have set the last property for that object for that day, in your case after setting close
for (var i = 0; i < elements.length; ++i) {
//previous code
//...
if(name=="close"){
hoursObj = {};
}
}
Demo
function toJSONString(form) {
var daysObj = {}
var hoursObj = {}
var elements = form.querySelectorAll("input[type='time']");
for (var i = 0; i < elements.length; ++i) {
var element = elements[i];
var days = element.dataset.day;
var name = element.name;
var value = element.value;
hoursObj[name] = value;
daysObj[days] = hoursObj;
if(name=="close"){
hoursObj = {};
}
}
return JSON.stringify(daysObj);
}
document.addEventListener("DOMContentLoaded", function() {
var form = document.getElementById("test");
var output = document.getElementById("output");
form.addEventListener("input", function(e) {
e.preventDefault();
var json = toJSONString(this);
output.innerHTML = json;
}, false);
});
<form id="test" role="form">
<input class="form-control" data-day="monday" type="time" name="open" value="12:00">
<input class="form-control" data-day="monday" type="time" name="close" value="20:00">
<!-- Rest of the weekdays -->
<input class="form-control" data-day="sunday" type="time" name="open" value="12:00">
<input class="form-control" data-day="sunday" type="time" name="close" value="23:00">
</form>
<pre><code id="output"></code></pre>

First file name value is taken, however, second file name do not show any value in the input textfield

Couldn't get a value to second file input field.
Example below:
$(".upload").live("change",function(){
var filename = document.getElementsByClassName('upload')[0].value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
document.getElementsByClassName('filename')[0].value = filename;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<input class="upload" type="file"/>
<input class="filename" type="text" />
<input class="upload" type="file"/>
<input class="filename" type="text" />

Try this:
$('input[type="file"]').live("change",function(){
var filename = $(this)[0].value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
$(this).next('.filename').val(filename);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<input class="upload" type="file"/>
<input class="filename" type="text" />
<input class="upload" type="file"/>
<input class="filename" type="text" />
<input class="upload" type="file"/>
<input class="filename" type="text" />
<input class="upload" type="file"/>
<input class="filename" type="text" />

You are only getting the value of the first input by doing getElementsByClassName('upload')[0]. Just add getElementsByClassName('upload')[1]. Here you go:
$(".upload").live("change",function(){
var filename = document.getElementsByClassName('upload')[0].value;
var filename1 = document.getElementsByClassName('upload')[1].value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
filename1 = filename1.substring(lastIndex + 1);
}
document.getElementsByClassName('filename')[0].value = filename;
document.getElementsByClassName('filename')[1].value = filename1;
});

If you are doing it in pure javascript without jquery, as your jsfiddle was not using jquery.
$(".upload").live("change",function(e){
var filename = e.currentTarget.value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
e.currentTarget.nextElementSibling.value = filename;
});

$(".upload").live("change",function(){
var filename = $(this)[0].value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
$(this).next('.filename').val(filename);
});

How to upload multiple files through one upload button

When I am executing it not all of my files are uploaded but just one of them.
JavaScript
function upload() {
document.getElementById("uploading").innerHTML="uploading....";
var myfile=document.getElementById("fileinput").files[0];
//alert(myfile.size);
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
parseContents(contents);
//document.getElementById("cont").innerHTML=fileContent;
document.getElementById("uploading").innerHTML="<h3>File uploaded: "+myfile.name;
}
r.readAsText(myfile);
}
HTML
<body onload="initialize()">
<div id="container1"><h>MY TRANSIT PLANNER</h></div>
<h3 style="text-decoration:underline;">choose a file for input:</h3>
<input type="file" id="fileinput" multiple="multiple"onchange="upload()"/>
<br>
<div style="color: black" id="uploading"></div>
<script src="https://maps.googleapis.com/maps/api/js?"async defer></script>
<input type="button" id="btn-sgtd" type="text" value="SAVE GTD" onclick="writetofile()"/>
<h3 style="text-decoration:underline;">Choose files to Segment: </h3>
<form action="files.php" method="POST" enctype="multipart/form-data">
<input type="file" name="my_file[]" multiple="multiple"><br>
<br>
<input type="submit" value="SEGMENT" class="button"><br>
</form>
<div id="map"></div>
</body>

you should do loop
function upload() {
for (var i = 0; i < document.getElementById("fileinput").files.length; i++)
{
document.getElementById("uploading").innerHTML="uploading....";
var myfile=document.getElementById("fileinput").files[i];
//alert(myfile.size);
var r = new FileReader();
r.onload = function(e)
{
var contents = e.target.result;
parseContents(contents);
//document.getElementById("cont").innerHTML=fileContent;
document.getElementById("uploading").innerHTML="<h3>File uploaded: "+myfile.name;
}
r.readAsText(myfile);
}
}

try this will help you
function upload() {
document.getElementById("uploading").innerHTML="uploading....";
var myfile=document.getElementById("fileinput").files[0];
//alert(myfile.size);
var r = new FileReader();
r.onload = function(e) {
if(!e.target.files) return;
var files = e.target.files;
for(var i=0; i < files.length; i++) {
var f = files[i];
document.getElementById("uploading").innerHTML="<h3>File uploaded: "+f;
}
}

Cannot get file type input to clear

So i've looked at the other questions and I am too far along in my page to try something else. I have an input type of file and I am trying to clear it when the user decides that they do not want to use it. I have some other functionality that is set to show the file name, size, etc... based on the FILE API but for some reason I cannot get the input to clear. I am trying a few different ways to clear it but still nothing. Anyone see what I am doing wrong. I have a jQuery check to check the value of the input and it never clears. The only thing I can think of is that I am using the standard hide the input and using a link so I can actually style the file input button.
Here is the FIDDLE:
JS FIDDLE
Here is the HTML:
<div>
<label id="huf1-label">fileGroup 1</label>
<input type="file" id="fileElem" accept="image/*" style="display:none"
onchange="handleFiles(this.files)" name="file">
<a href="#" id="fileSelect" class="c1-button right gray" tabindex="0">Select
File to
Upload<span class="icon-checkmark"></span> </a>
</div>
<div>
<label id="huf1Btn-label">
<div class="fileInfoContainer">
<ul>
<li>
<div id="fileList" class="fileInfoContainer">
</div>
</li>
</ul>
</div>
</label>
<button id="removeFile1" class="c1-button red left-icon"
aria-controls="huf1">
<span class="icon-remove"></span><b> Cancel</b>
<span class="hidden">fileGroup 1</span>
</button>
<div class="filename"></div>
Here is the script:
window.URL = window.URL || window.webkitURL;
//BEGIN - fileSelect1 and handleFile
var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem"),
fileList = document.getElementById("fileList");
fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault(); // prevent navigation to "#"
}, false);
function handleFiles(files) {
if (!files.length) {
fileList.innerHTML = "<p></p>";
} else {
$('#fileList').empty().append();
var list = document.createElement("ul");
for (var i = 0; i < files.length; i++) {
var li = document.createElement("li");
list.appendChild(li);
var info = document.createElement("span");
info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
li.appendChild(info);
}
fileList.appendChild(list);
$("#removeFile1").click(function (event) {
event.preventDefault();
$("#fileList").empty();
$("#removeFile1").find('b').html('Cancel');
$('#fileElem').each(function() {
$(this).val();
});
document.getElementById("fileElem").value = "";
document.getElementById("fileSelect").value = "";
console.log('#fileList' + 'was deleted');
console.log('#fileElem' + 'was deleted I hope');
// console.log($(this)+'#fileList'.val());
});
}
};
$("#fileElem").change(function(){
if (this.val == "" ) {
$("#removeFile1").find('b').html('Cancel');
} else {
$("#removeFile1").find('b').html('Remove this file');
}
});
$(function() {
$("input:file").change(function (){
var fileName = $(this).val();
$(".filename").html(fileName);
});
});

I Corrected It this is the answer Try this....
The problem you are facing is this error...
Uncaught ReferenceError: handleFiles is not defined
So I canged it like this...
HTML
<div>
<label id="huf1-label">fileGroup 1</label>
<input type="file" id="fileElem" accept="image/*" style="display:none"
name="file">
<a href="#" id="fileSelect" class="c1-button right gray" tabindex="0">Select
File to
Upload<span class="icon-checkmark"></span> </a>
</div>
<div>
<label id="huf1Btn-label">
<div class="fileInfoContainer">
<ul>
<li>
<div id="fileList" class="fileInfoContainer">
</div>
</li>
</ul>
</div>
</label>
<button id="removeFile1" class="c1-button red left-icon"
aria-controls="huf1">
<span class="icon-remove"></span><b> Cancel</b>
<span class="hidden">fileGroup 1</span>
</button>
<div class="filename"></div>
</div>
SCRIPT
window.URL = window.URL || window.webkitURL;
//BEGIN - fileSelect1 and handleFile
var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem"),
fileList = document.getElementById("fileList");
fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault(); // prevent navigation to "#"
}, false);
$("#fileElem").change(function() {
var files=this.files;
if (!files.length) {
fileList.innerHTML = "<p></p>";
} else {
$('#fileList').empty().append();
var list = document.createElement("ul");
for (var i = 0; i < files.length; i++) {
var li = document.createElement("li");
list.appendChild(li);
var info = document.createElement("span");
info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
li.appendChild(info);
}
fileList.appendChild(list);
$("#removeFile1").click(function (event) {
event.preventDefault();
$("#fileList").empty();
$("#removeFile1").find('b').html('Cancel');
$('#fileElem').each(function() {
$(this).val();
});
document.getElementById("fileElem").value = "";
document.getElementById("fileSelect").value = "";
console.log('#fileList' + 'was deleted');
console.log('#fileElem' + 'was deleted I hope');
// console.log($(this)+'#fileList'.val());
});
}
});
$("#fileElem").change(function(){
if (this.val == "" ) {
$("#removeFile1").find('b').html('Cancel');
} else {
$("#removeFile1").find('b').html('Remove this file');
}
});
$(function() {
$("input:file").change(function (){
var fileName = $(this).val();
$(".filename").html(fileName);
});
});
JSFIDDLE LINK HERE
This is the Link for updated JSFIDDLE...

Develop Reference

JavaScript is the programming language of the Web.

Not removing value from multifile - javascript

Related

Problem with Upload file to Google Drive using google script

Generate JSON string from form on change to populate business-hours

First file name value is taken, however, second file name do not show any value in the input textfield

How to upload multiple files through one upload button

Cannot get file type input to clear

Categories

Resources