so I'm still learning JavaScript and am having an issue with something I am working on. When trying to enter something into two separate text inputs it will only default to the gotError function, nothing is being inserted into the Web SQL and then read back to the list.
The JavaScript:
function openDb() {
db = openDatabase('DName', '1', 'NameV', 2 * 1024 * 1024);
//(Database Name, Version, Display Name, Size )
db.transaction(function (tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS Logs (id unique, person TEXT, place TEXT)");
});
}
document.addEventListener('init', function(event) {
if(event.target.id == 'mylist') {
openDb();
storeItems();
}
});
function gotError() {
alert('Something went wrong.');
}
function gotSuccess() {
storeItems()
}
function storeItems()
{
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM Logs", [], listItems, gotError);
});
}
function listItems(rs)
{
var output = '';
var list = document.getElementById('tList');
for(i = 0; i < rs.rows.length; i++)
{
stuff = person && place;
var row = rs.rows.stuff(i);
output += "ons-list-item>" + row.stuff +
"<div class=\"right\"> <ons-button><ons-icon icon=\"trash\"></ons-icon></ons-button></div>" +
"</ons-list-item>";
}
list.innerHTML = output;
}
function addItem()
{
var textbox = document.getElementById("person", "place");
var value = textbox.value;
db.transaction(function(tx)
{
tx.executeSql("INSERT INTO Logs (person,place) VALUES (?,?)", [value], gotSuccess, gotError)
});
textbox.value = "";
fn.load("mylist.html");
}
The HTML:
<template id="mylist.html">
<ons-page id='mylist'>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
My List
</div>
</ons-toolbar>
<div>
<ons-input type="text" class="select-input--underbar" id="person" placeholder="Enter person here . . ."></ons-input>
<ons-input type="text" class="select-input--underbar" id="place" placeholder="Enter place here . . ."></ons-input>
<ons-button modifier="large" onclick="addItem()">Add Item</ons-button>
</div>
<ons-list id='tList'>
<ons-list-header>Listed Items:</ons-list-header>
<ons-list-item>
</ons-list-item>
</ons-list>
</ons-page>
</template>
</ons-page>
</template>
Originally the code was supposed to insert have two text inputs that would need to be filled out, a button would be pressed to add them to the list, then display the db contents for person and place. Then each time the page was opened or closed it would re-read the contents of the db and redisplay them on the list.
This is an error:
stuff = person && place;
Because:
You are declaring stuff as a global variable (error in strict mode).
person and place are undeclared
Probably this error is being catch'ed and then gotError is executed. Probably you would have seen that if declared the function with an argument:
function gotError(error) {
console.error('Something went wrong:', error);
}
I am working on a school project, and I need to create a program that will calculate the commission of our companies employees. So far I have a place where I can upload a data file and put it into a table. I want to add a button that will calculate the sales commission for each employee and add a new column to the table with the calculated sales commission.
data file:
Name,Sales,Commission,Region
Billy Bradshaw,$33611,20%,North
Twanna Beagle,$44250,20%,East
Gloria Saling,$49278,20%,West
Theola Spargo,$75021,20%,South
Giovanni Armas,$59821,20%,East
Cristal Smith,$44597,20%,West
Ashley Morris,$55597,20%,North
Tiffaney Kreps,$40728,20%,South
Arnold Fultz,$49674,20%,East
Sherman Sallee,$23780,20%,North
Shawana Johnson,$58365,20%,West
Kathrine Mosca,$67489,20%,North
Karren Mahmoud,$53382,20%,East
Venus Grasser,$33572,20%,West
Rickey Jones,$28522,20%,East
Verona Strauch,$41865,20%,North
Elvis Yearta,$25314,20%,South
Jonathan Lee,$22823,20%,West
Sommer Cottle,$45660,20%,East
Elsa Laverty,$49386,20%,North
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sales Commission Calculator</title>
<h1>Sales Commission Calculator</h1>
<p>Please select the Employee Sales Database</p>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid rgb(155, 155, 155);
border-collapse: collapse;
}
tr:nth-child(even) {
background: #4ac5fd;
}
table td
{
padding: 5px;
}
</style>
</head>
<body>
<script>
function Upload() {
var fileUpload = document.getElementById("fileUpload");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test(fileUpload.value.toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var table = document.createElement("table");
var rows = e.target.result.split("\n");
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split(",");
if (cells.length > 1) {
var row = table.insertRow(-1);
for (var j = 0; j < cells.length; j++) {
var cell = row.insertCell(-1);
cell.innerHTML = cells[j];
}
}
}
var dvCSV = document.getElementById("dvCSV");
dvCSV.innerHTML = "";
dvCSV.appendChild(table);
}
reader.readAsText(fileUpload.files[0]);
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid CSV file.");
}
}
</script>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" onclick="Upload()" />
<input type="button" id="Calculate Commission" value="Calculate Commission" oneclick=""/>
<hr />
<div id="dvCSV">
</div>
</body>
</html>
Make a button that will add a column to my table with the calculates sales commission numbers.
Thanks for being up-front about it being for a school project. We've all been there, so let me walk you through it a little bit.
You need to have the button you have call a function, which you already have. Fix your typo and then assign a new function to the onclick attribute:
<input type="button" id="Calculate Commission" value="Calculate Commission" onclick="calculateCommissions()" />
Then you'll need to create that function... Ultimately, overall idea, is we want that function to look at each row (so, we'll probably want a loop, to loop over the rows in the table)... pull out that row's "sales" and "commission %" and multiply them together... then, before we let the loop move on to the next row, add that final commission score to the end of the current row.
function calculateCommissions() {
// Get an array full of the rows
// Note the use of the spread operator, we need to convert the NodeList type to an Array type
var allRows = [...document.getElementsByTagName('tr')];
// Now let's loop over that array and look at each row individually
allRows.forEach( eachRow => {
// For the current row, we need to pull out the "sales" and "commission %" values
var sales = Number(eachRow.childNodes[1].innerText.slice(1));
var percentCommission = Number(eachRow.childNodes[2].innerText.substr(0, eachRow.childNodes[2].innerText.indexOf('%')));
// Do the math...
var commission = Math.round(sales * percentCommission / 100)
// And now, we want to add that commission as an additional column
// Note that since we're also going to be looping over the header...
// ... let's add a column header "Commission"
var tableCellToAppend = document.createElement('td')
tableCellToAppend.innerText = commission ? `$${commission}` : 'Commission';
eachRow.appendChild(tableCellToAppend)
})
}
Of course in the real world project, you would need to have error handling galore. Real users never upload perfect csv files. Welcome to SO.
I have a Lightning component that listens for an Updated Account event and retrieves the associated Contacts and Users. It then displays which Account the Contacts are for with a total of Contacts and Users, and creates an SLDS Card with repeating Tiles.
It was working fine until I changed the header to say 'Loading' while the Contacts were loading. I added two new Attributes (one to hold the loading status and one to hold the total of Contacts and Users) and added the logic to update these attributes. Somehow this broke it, and I can't figure out how it's breaking.
According to the console and debug logs, everything is fine. The Contacts and Users are being retrieved properly from the Apex Controller, and these values are being written to the Attributes. Nothing is being updated, however.
ContactTable.cmp
<header class="slds-media slds-media--center slds-has-flexi-truncate">
<div class="slds-media__body">
<h2>
<span class="slds-text-heading--large">
<aura:if istrue="{!v.accountName}">
Contacts For {!v.accountName}: {!v.contactsLoadingStatus}
<aura:set attribute="else">
Contacts: - Please Select a Clinic -
</aura:set>
</aura:if>
</span>
</h2>
</div>
</header>
.........
(Contacts Tile Iterator)
.........
<aura:if istrue="{!v.contacts.length > 0}">
<h2 style="padding-left: 1.5rem;"><span class="slds-text-heading--medium">Contacts</span></h2>
<div class="slds-card__body--inner slds-grid slds-wrap" style="margin-bottom: 30px; height: 20rem; overflow: auto; border: 1px solid rgba(128, 128, 128, 0.32); border-radius: 10px;">
<aura:iteration items="{!v.contacts}" var="singleContact">
<c:ContactTableContactCard singlecontact="{!singleContact}" />
</aura:iteration>
</div>
</aura:if>
ContactTableController.js
handleUpdateAccountEvent: function(component, event, helper){
helper.updateAccount(component, event);
component.set('v.selectedContacts', null);
component.set('v.total', 0);
console.log('Account ID: ' + component.get('v.accountID'));
console.log('Account Name: ' + component.get('v.accountName'));
if(component.get('v.accountID')){
console.log('Grabbing contacts and team members');
component.set('v.contactsLoadingStatus', 'Loading...');
helper.setContacts(component, helper);
helper.setTeamMembers(component, helper);
}
else{
component.set('v.contacts', null);
component.set('v.teamMembers', null);
}
},
ContactTableHelper.js
setContacts: function (component, helper) {
var action = component.get("c.getContacts");
var accountID = component.get("v.accountID");
action.setParams({'accountId':accountID});
action.setCallback(this, function(response){
if(component.isValid()){
var state = response.getState();
if(state === 'SUCCESS'){
var contacts = response.getReturnValue();
component.set("v.contacts", contacts);
var total = component.get("v.total");
total += contacts.length;
component.set("v.total", total);
component.set("v.contactsLoadingStatus", total + " Records");
contacts = component.get('v.contacts');
console.log('Grabbing contacts.... Done');
console.log('contacts:');
console.log(contacts);
}
else{
console.log('There was an issue in retrieving the contacts.');
console.log(state);
if(state === 'ERROR'){
var errors = response.getError;
for(var i = 0; i < errors.length; i++){
console.log(errors[i].message);
}
}
}
}
});
$A.enqueueAction(action);
console.log('Grabbing contacts....');
},
updateAccount: function(component, event){
var accountID = event.getParam("accountID");
component.set("v.accountID", accountID);
var accountName = event.getParam("accountName");
component.set("v.accountName", accountName);
console.log('finished updateAccount');
},
I left out setTeamMembers because it is the same, more or less, as setContacts.
Relevant Console log:
finished updateAccount
Account ID: 001F0000013YX5DIAW
Account Name: ~NAME~.
Grabbing contacts and team members
Grabbing contacts....
Grabbing team members....
Grabbing contacts.... Done
contacts:
[Object, Object, Object]
Grabbing team members.... Done
teamMembers:
[Object, Object, Object, Object, Object, Object]
I figured it out. I used my IDE's code formatter which changed
<aura:if isTrue="">
to
<aura:if istrue="">
So if anyone else runs into this issue, check your spelling.
For a task I need to display a list of albums' titles and all the songs. But I'm stuck only getting the first song to display for each album. How do I display them all? I assume I need to change the index value but I'm not sure how to write it to get all the values. My code is below.
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
<script>
function loadDoc() {
// This function will load the xml file and connect it to the webpage
var xhttp = new XMLHttpRequest();
// This is used to exchange data with the server, allowing for parts of the page to change without reloading the page
xhttp.onreadystatechange = function() {
// This defines a function to be called when the readystate property changes
if (this.readyState == 4 && this.status == 200) {
// This states that if the request is finished (readystate == 4) and the status returned is ok (this.staus == 200)
extractSongs(this);
// This runs the function to display the data from the xml file
}
};
xhttp.open("GET", "CDLibrary.xml", true);
// This gets the xml file
xhttp.send();
// This sends a request to the server
}
function extractSongs(xml) {
// This function will extract and display data from the xml file
var i;
var xmlDoc = xml.responseXML;
// This returns the document containg a response to my request
var table="<tr><th>Artist</th><th>Title</th></tr>";
// This sets up the table
var CdList = xmlDoc.getElementsByTagName("CD");
// This creates an array of the data from the xml file
for (i = 0; i <CdList.length; i++) {
// This will loop through the array by the number of cds in the array
table += "<tr><td>" +
CdList[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
"</td><td>" +
CdList[i].getElementsByTagName("track")[0].childNodes[0].nodeValue +
"</td></td>" ;
// These display the elements by the tag name and generate them as table data
}
document.getElementById("CdCollection").innerHTML = table;
// This gets the table from the html and makes it equal to the table from the javascript
}
</script>
</head>
<body>
<h1>My CD Collection</h1>
<button type="button" onclick="loadDoc()">Get my collection</button>
<br><br>
<table id="CdCollection"></table>
</body>
I'm guessing you need a 2nd for loop for the for the title/track:-
for (i = 0; i < CdList.length; i++) {
var titleCount = CdList[i].getElementsByTagName("title").length;
for (j = 0; j < titleCount; j++){
// This will loop through the array by the number of cds in the array
table += "<tr><td>" +
CdList[i].getElementsByTagName("title")[j].childNodes[0].nodeValue +
"</td><td>" +
CdList[i].getElementsByTagName("track")[j].childNodes[0].nodeValue +
"</td></td>";
// These display the elements by the tag name and generate them as table data
}
}
I'm building a drag-and-drop-to-upload web application using HTML5, and I'm dropping the files onto a div and of course fetching the dataTransfer object, which gives me the FileList.
Now I want to remove some of the files, but I don't know how, or if it's even possible.
Preferably I'd like to just delete them from the FileList; I've got no use for them. But if that's not possible, should I instead write in checks in code that interacts with the FileList? That seems cumbersome.
If you want to delete only several of the selected files: you can't. The File API Working Draft you linked to contains a note:
The HTMLInputElement interface
[HTML5] has a readonly FileList
attribute, […]
[emphasis mine]
Reading a bit of the HTML 5 Working Draft, I came across the Common input element APIs. It appears you can delete the entire file list by setting the value property of the input object to an empty string, like:
document.getElementById('multifile').value = "";
BTW, the article Using files from web applications might also be of interest.
Since JavaScript FileList is readonly and cannot be manipulated directly,
BEST METHOD
You will have to loop through the input.files while comparing it with the index of the file you want to remove. At the same time, you will use new DataTransfer() to set a new list of files excluding the file you want to remove from the file list.
With this approach, the value of the input.files itself is changed.
removeFileFromFileList(index) {
const dt = new DataTransfer()
const input = document.getElementById('files')
const { files } = input
for (let i = 0; i < files.length; i++) {
const file = files[i]
if (index !== i)
dt.items.add(file) // here you exclude the file. thus removing it.
}
input.files = dt.files // Assign the updates list
}
ALTERNATIVE METHOD
Another simple method is to convert the FileList into an array and then splice it.
But this approach will not change the input.files
const input = document.getElementById('files')
// as an array, u have more freedom to transform the file list using array functions.
const fileListArr = Array.from(input.files)
fileListArr.splice(index, 1) // here u remove the file
console.log(fileListArr)
This question has already been marked answered, but I'd like to share some information that might help others with using FileList.
It would be convenient to treat a FileList as an array, but methods like sort, shift, pop, and slice don't work. As others have suggested, you can copy the FileList to an array. However, rather than using a loop, there's a simple one line solution to handle this conversion.
// fileDialog.files is a FileList
var fileBuffer=[];
// append the file list to an array
Array.prototype.push.apply( fileBuffer, fileDialog.files ); // <-- here
// And now you may manipulated the result as required
// shift an item off the array
var file = fileBuffer.shift(0,1); // <-- works as expected
console.info( file.name + ", " + file.size + ", " + file.type );
// sort files by size
fileBuffer.sort(function(a,b) {
return a.size > b.size ? 1 : a.size < b.size ? -1 : 0;
});
Tested OK in FF, Chrome, and IE10+
If you are targeting evergreen browsers (Chrome, Firefox, Edge, but also works in Safari 9+) or you can afford a polyfill, you can turn the FileList into an array by using Array.from() like this:
let fileArray = Array.from(fileList);
Then it's easy to handle the array of Files like any other array.
Since we are in the HTML5 realm, this is my solution. The gist is that you push the files to an Array instead of leaving them in a FileList, then using XHR2, you push the files to a FormData object. Example below.
Node.prototype.replaceWith = function(node)
{
this.parentNode.replaceChild(node, this);
};
if(window.File && window.FileList)
{
var topicForm = document.getElementById("yourForm");
topicForm.fileZone = document.getElementById("fileDropZoneElement");
topicForm.fileZone.files = new Array();
topicForm.fileZone.inputWindow = document.createElement("input");
topicForm.fileZone.inputWindow.setAttribute("type", "file");
topicForm.fileZone.inputWindow.setAttribute("multiple", "multiple");
topicForm.onsubmit = function(event)
{
var request = new XMLHttpRequest();
if(request.upload)
{
event.preventDefault();
topicForm.ajax.value = "true";
request.upload.onprogress = function(event)
{
var progress = event.loaded.toString() + " bytes transfered.";
if(event.lengthComputable)
progress = Math.round(event.loaded / event.total * 100).toString() + "%";
topicForm.fileZone.innerHTML = progress.toString();
};
request.onload = function(event)
{
response = JSON.parse(request.responseText);
// Handle the response here.
};
request.open(topicForm.method, topicForm.getAttribute("action"), true);
var data = new FormData(topicForm);
for(var i = 0, file; file = topicForm.fileZone.files[i]; i++)
data.append("file" + i.toString(), file);
request.send(data);
}
};
topicForm.fileZone.firstChild.replaceWith(document.createTextNode("Drop files or click here."));
var handleFiles = function(files)
{
for(var i = 0, file; file = files[i]; i++)
topicForm.fileZone.files.push(file);
};
topicForm.fileZone.ondrop = function(event)
{
event.stopPropagation();
event.preventDefault();
handleFiles(event.dataTransfer.files);
};
topicForm.fileZone.inputWindow.onchange = function(event)
{
handleFiles(topicForm.fileZone.inputWindow.files);
};
topicForm.fileZone.ondragover = function(event)
{
event.stopPropagation();
event.preventDefault();
};
topicForm.fileZone.onclick = function()
{
topicForm.fileZone.inputWindow.focus();
topicForm.fileZone.inputWindow.click();
};
}
else
topicForm.fileZone.firstChild.replaceWith(document.createTextNode("It's time to update your browser."));
I have found very quick & short workaround for this. Tested in many popular browsers (Chrome, Firefox, Safari);
First, you have to convert FileList to an Array
var newFileList = Array.from(event.target.files);
to delete the particular element use this
newFileList.splice(index,1);
I know this is an old question but it's ranking high on search engines in regards to this issue.
properties in the FileList object cannot be deleted but at least on Firefox they can be changed. My workaround this issue was to add a property IsValid=true to those files that passed check and IsValid=false to those that didn't.
then I just loop through the list to make sure that only the properties with IsValid=true are added to FormData.
This is extemporary, but I had the same problem which I solved this way. In my case I was uploading the files via XMLHttp request, so I was able to post the FileList cloned data through formdata appending. Functionality is that you can drag and drop or select multiple files as many times as you want (selecting files again won't reset the cloned FileList), remove any file you want from the (cloned) file list, and submit via xmlhttprequest whatever was left there. This is what I did. It is my first post here so code is a little messy. Sorry. Ah, and I had to use jQuery instead of $ as it was in Joomla script.
// some global variables
var clon = {}; // will be my FileList clone
var removedkeys = 0; // removed keys counter for later processing the request
var NextId = 0; // counter to add entries to the clone and not replace existing ones
jQuery(document).ready(function(){
jQuery("#form input").change(function () {
// making the clone
var curFiles = this.files;
// temporary object clone before copying info to the clone
var temparr = jQuery.extend(true, {}, curFiles);
// delete unnecessary FileList keys that were cloned
delete temparr["length"];
delete temparr["item"];
if (Object.keys(clon).length === 0){
jQuery.extend(true, clon, temparr);
}else{
var keysArr = Object.keys(clon);
NextId = Math.max.apply(null, keysArr)+1; // FileList keys are numbers
if (NextId < curFiles.length){ // a bug I found and had to solve for not replacing my temparr keys...
NextId = curFiles.length;
}
for (var key in temparr) { // I have to rename new entries for not overwriting existing keys in clon
if (temparr.hasOwnProperty(key)) {
temparr[NextId] = temparr[key];
delete temparr[key];
// meter aca los cambios de id en los html tags con el nuevo NextId
NextId++;
}
}
jQuery.extend(true, clon, temparr); // copy new entries to clon
}
// modifying the html file list display
if (NextId === 0){
jQuery("#filelist").html("");
for(var i=0; i<curFiles.length; i++) {
var f = curFiles[i];
jQuery("#filelist").append("<p id=\"file"+i+"\" style=\'margin-bottom: 3px!important;\'>" + f.name + "<a style=\"float:right;cursor:pointer;\" onclick=\"BorrarFile("+i+")\">x</a></p>"); // the function BorrarFile will handle file deletion from the clone by file id
}
}else{
for(var i=0; i<curFiles.length; i++) {
var f = curFiles[i];
jQuery("#filelist").append("<p id=\"file"+(i+NextId-curFiles.length)+"\" style=\'margin-bottom: 3px!important;\'>" + f.name + "<a style=\"float:right;cursor:pointer;\" onclick=\"BorrarFile("+(i+NextId-curFiles.length)+")\">x</a></p>"); // yeap, i+NextId-curFiles.length actually gets it right
}
}
// update the total files count wherever you want
jQuery("#form p").text(Object.keys(clon).length + " file(s) selected");
});
});
function BorrarFile(id){ // handling file deletion from clone
jQuery("#file"+id).remove(); // remove the html filelist element
delete clon[id]; // delete the entry
removedkeys++; // add to removed keys counter
if (Object.keys(clon).length === 0){
jQuery("#form p").text(Object.keys(clon).length + " file(s) selected");
jQuery("#fileToUpload").val(""); // I had to reset the form file input for my form check function before submission. Else it would send even though my clone was empty
}else{
jQuery("#form p").text(Object.keys(clon).length + " file(s) selected");
}
}
// now my form check function
function check(){
if( document.getElementById("fileToUpload").files.length == 0 ){
alert("No file selected");
return false;
}else{
var _validFileExtensions = [".pdf", ".PDF"]; // I wanted pdf files
// retrieve input files
var arrInputs = clon;
// validating files
for (var i = 0; i < Object.keys(arrInputs).length+removedkeys; i++) {
if (typeof arrInputs[i]!="undefined"){
var oInput = arrInputs[i];
if (oInput.type == "application/pdf") {
var sFileName = oInput.name;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
return false;
}
}
}else{
alert("Sorry, " + arrInputs[0].name + " is invalid, allowed extensions are: " + _validFileExtensions.join(" or "));
return false;
}
}
}
// proceed with the data appending and submission
// here some hidden input values i had previously set. Now retrieving them for submission. My form wasn't actually even a form...
var fecha = jQuery("#fecha").val();
var vendor = jQuery("#vendor").val();
var sku = jQuery("#sku").val();
// create the formdata object
var formData = new FormData();
formData.append("fecha", fecha);
formData.append("vendor", encodeURI(vendor));
formData.append("sku", sku);
// now appending the clone file data (finally!)
var fila = clon; // i just did this because I had already written the following using the "fila" object, so I copy my clone again
// the interesting part. As entries in my clone object aren't consecutive numbers I cannot iterate normally, so I came up with the following idea
for (i = 0; i < Object.keys(fila).length+removedkeys; i++) {
if(typeof fila[i]!="undefined"){
formData.append("fileToUpload[]", fila[i]); // VERY IMPORTANT the formdata key for the files HAS to be an array. It will be later retrieved as $_FILES['fileToUpload']['temp_name'][i]
}
}
jQuery("#submitbtn").fadeOut("slow"); // remove the upload btn so it can't be used again
jQuery("#drag").html(""); // clearing the output message element
// start the request
var xhttp = new XMLHttpRequest();
xhttp.addEventListener("progress", function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
}, false);
if ( xhttp.upload ) {
xhttp.upload.onprogress = function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
var percent = done / total;
jQuery("#drag").html(Math.round(percent * 100) + "%");
};
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var respuesta = this.responseText;
jQuery("#drag").html(respuesta);
}
};
xhttp.open("POST", "your_upload_handler.php", true);
xhttp.send(formData);
return true;
}
};
Now the html and styles for this. I'm quite a newbie but all this actually worked for me and took me a while to figure it out.
<div id="form" class="formpos">
<!-- Select the pdf to upload:-->
<input type="file" name="fileToUpload[]" id="fileToUpload" accept="application/pdf" multiple>
<div><p id="drag">Drop your files here or click to select them</p>
</div>
<button id="submitbtn" onclick="return check()" >Upload</button>
// these inputs are passed with different names on the formdata. Be aware of that
// I was echoing this, so that's why I use the single quote for php variables
<input type="hidden" id="fecha" name="fecha_copy" value="'.$fecha.'" />
<input type="hidden" id="vendor" name="vendorname" value="'.$vendor.'" />
<input type="hidden" id="sku" name="sku" value="'.$sku.'"" />
</div>
<h1 style="width: 500px!important;margin:20px auto 0px!important;font-size:24px!important;">File list:</h1>
<div id="filelist" style="width: 500px!important;margin:10px auto 0px!important;">Nothing selected yet</div>
The styles for that. I had to mark some of them !important to override Joomla behavior.
.formpos{
width: 500px;
height: 200px;
border: 4px dashed #999;
margin: 30px auto 100px;
}
.formpos p{
text-align: center!important;
padding: 80px 30px 0px;
color: #000;
}
.formpos div{
width: 100%!important;
height: 100%!important;
text-align: center!important;
margin-bottom: 30px!important;
}
.formpos input{
position: absolute!important;
margin: 0!important;
padding: 0!important;
width: 500px!important;
height: 200px!important;
outline: none!important;
opacity: 0!important;
}
.formpos button{
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 508px;
height: 35px;
margin-left: -4px;
border-radius: 4px;
transition: all .2s ease;
outline: none;
}
.formpos button:hover{
background: #149174;
color: #0C5645;
}
.formpos button:active{
border:0;
}
I hope this helps.
Thanks #Nicholas Anderson simple and straight , here is your code applied and working at my code using jquery.
HTML .
<input class="rangelog btn border-aero" id="file_fr" name="file_fr[]" multiple type="file" placeholder="{$labels_helpfiles_placeholder_file}">
<span style="cursor: pointer; cursor: hand;" onclick="cleanInputs($('#file_fr'))"><i class="fa fa-trash"></i> Empty chosen files</span>
JS CODE
function cleanInputs(fileEle){
$(fileEle).val("");
var parEle = $(fileEle).parent();
var newEle = $(fileEle).clone()
$(fileEle).remove();
$(parEle).prepend(newEle);
}
There might be a more elegant way to do this but here is my solution. With Jquery
fileEle.value = "";
var parEle = $(fileEle).parent();
var newEle = $(fileEle).clone()
$(fileEle).remove();
parEle.append(newEle);
Basically you cleat the value of the input. Clone it and put the clone in place of the old one.
If you have the luck to be sending a post request to the database with the files and you have the files you want to send in your DOM
you can simply check if the file in the file list is present in your DOM, and of course if it's not you just don't send that element to de DB.
I realize this is a pretty old question, however I am using an html multiple file selection upload to queue any number of files which can be selectively removed in a custom UI before submitting.
Save files in a variable like this:
let uploadedFiles = [];
//inside DOM file select "onChange" event
let selected = e.target.files[0] ? e.target.files : [];
uploadedFiles = [...uploadedFiles , ...selected ];
createElements();
Create UI with "remove a file":
function createElements(){
uploadedFiles.forEach((f,i) => {
//remove DOM elements and re-create them here
/* //you can show an image like this:
* let reader = new FileReader();
* reader.onload = function (e) {
* let url = e.target.result;
* // create <img src=url />
* };
* reader.readAsDataURL(f);
*/
element.addEventListener("click", function () {
uploadedFiles.splice(i, 1);
createElements();
});
}
}
Submit to server:
let fd = new FormData();
uploadedFiles.forEach((f, i) => {
fd.append("files[]", f);
});
fetch("yourEndpoint", {
method: "POST",
body: fd,
headers: {
//do not set Content-Type
}
}).then(...)
I mix the solutions of many developers and reach to this solution.
It change the original array list after deletion which means if we want to save the images then we can do so.
<script>
var images = [];
function image_select() {
var image = document.getElementById('image').files;
for (i = 0; i < image.length; i++) {
images.push({
"name" : image[i].name,
"url" : URL.createObjectURL(image[i]),
"file" : image[i],
})
}
document.getElementById('container').innerHTML = image_show();
}
function image_show() {
var image = "";
images.forEach((i) => {
image += `<div class="image_container d-flex justify-content-center position-relative">
<img src="`+ i.url +`" alt="Image">
<span class="position-absolute" onclick="delete_image(`+ images.indexOf(i) +`)">×</span>
</div>`;
})
return image;
}
function delete_image(e) {
images.splice(e, 1);
document.getElementById('container').innerHTML = image_show();
const dt = new DataTransfer()
const input = document.getElementById('image')
const { files } = input
for (let i = 0; i < files.length; i++) {
const file = files[i]
if (e !== i)
dt.items.add(file);
}
input.files = dt.files;
console.log(document.getElementById('image').files);
}
</script>
*******This is html code ******
<body>
<div class="container mt-3 w-100">
<div class="card shadow-sm w-100">
<div class="card-header d-flex justify-content-between">
<h4>Preview Multiple Images</h4>
<form class="form" action="{{route('store')}}" method="post" id="form" enctype="multipart/form-data">
#csrf
<input type="file" name="image[]" id="image" multiple onchange="image_select()">
<button class="btn btn-sm btn-primary" type="submit">Submit</button>
</form>
</div>
<div class="card-body d-flex flex-wrap justify-content-start" id="container">
</div>
</div>
</div>
</body>
******* This is CSS code ********
<style>
.image_container {
height: 120px;
width: 200px;
border-radius: 6px;
overflow: hidden;
margin: 10px;
}
.image_container img {
height: 100%;
width: auto;
object-fit: cover;
}
.image_container span {
top: -6px;
right: 8px;
color: red;
font-size: 28px;
font-weight: normal;
cursor: pointer;
}
</style>
You may wish to create an array and use that instead of the read-only filelist.
var myReadWriteList = new Array();
// user selects files later...
// then as soon as convenient...
myReadWriteList = FileListReadOnly;
After that point do your uploading against your list instead of the built in list. I am not sure of the context you are working in but I am working with a jquery plugin I found and what I had to do was take the plugin's source and put it in the page using <script> tags. Then above the source I added my array so that it can act as a global variable and the plugin could reference it.
Then it was just a matter of swapping out the references.
I think this would allow you to also add drag & drop as again, if the built in list is read-only then how else could you get the dropped files into the list?
:))
I solve it this way
//position -> the position of the file you need to delete
this.fileImgs.forEach((item, index, object) => {
if(item.idColor === idC){
if(item.imgs.length === 1){
object.splice(index,1) }
else{
const itemFileImgs = [...item.imgs];
itemFileImgs.splice(position,1)
item.imgs = [...itemFileImgs]
}
}});
console.log(this.fileImgs)
In vue js :
self.$refs.inputFile.value = ''
I just change the type of input to the text and back to the file :D