Develop Reference

JavaScript Input File Not Storing Contents When I Add More Content to Upload

Alright so I'm looking so much to this code that I can't figure it out anymore.
So I have a "Select Files" button that I allow users choose multiple files to upload:
<input type="file" multiple id="gallery-photo-add" name="file[]" class="form-control custom-file-input btn btn-info" value="">
Below is the JavaScript. Everything works except this behavior:
I click and select 1 file to send. It does everything right and send it to the preview. If I click to add more files, it resets the input value and remove the ones I added before. Just from the input, not from the previews.
var imagesPreview = function (input) {
if (input.files) {
// remove main principal
$('.no-image').parent().remove();
// get total files sent this time
var filesAmount = input.files.length;
// get existent files in carousel
var totalItens = $('.carousel-inner > .item').length;
// sum all items
var itensSum = (filesAmount + totalItens);
// update total in title
$('.slider-total-items > span').html('(' + itensSum + ')');
var reader = new FileReader();
for (i = 0; i < filesAmount; i++) {
reader.onload = function (event) {
$('.carousel-inner > .item').removeClass('active');
if (input.files[0].type.substr(0, 5) == 'video') {
var html = '<div class="item ' + (i == 0 ? 'active' : '') + '"><video width="320" height="210" controls><source src="' + event.target.result + '"></video></div>';
return
}
if (filesAmount > 1) {
var html = '<div class="item text-center posts-images-edit ' + (i == filesAmount ? 'active' : '') + '"><img src="' + event.target.result + '"></div>';
} else {
var html = '<div class="item text-center posts-images-edit ' + (i == 1 ? 'active' : '') + '"><img src="' + event.target.result + '"></div>';
}
$(html).appendTo('.carousel-inner');
}
if (itensSum > 1) {
$('#galleryControls').removeClass('hide');
}
reader.readAsDataURL(input.files[i]);
}
}
};
$(function () {
$('#gallery-photo-add').on('change', function () {
imagesPreview(this);
});
});
How can I keep all the files selected on the input?
Thanks

This is just how file inputs work. Every change represents a new FileList.
If you want to incrementally build your own list, you'll need to maintain it outside the <input> element
const allFilesSelectedEver = [];
const imagesPreview = (input) => {
allFilesSelectedEver.push(...input.files);
// now use `allFilesSelectedEver` instead of `input.files`
// ...
};

Changing default file name download with JS?

How would I go about changing the name of a clip that is going to be downloaded by the client on a website? Each video clip currently downloaded is a default name how do I go about customising it?
Below is the function for the download button.
// Function to generate the Download button
VideoPlayer.prototype.initDownload = function () {
var downloadBtn = $("button.download"),
downloadToolTipCls = "download_tooltip",
sources = {},
downloadToopTip,
sourcesLength = 0,
sourcesKeys;
// Add each source
if (typeof (firstSrc = this.$video.attr("src")) !== "undefined") {
sources[firstSrc] = this.$video.attr("type");
}
this.$video.find("source").each(function () {
var $this = $(this);
sources[$this.attr("src")] = $this.attr("type");
});
sourcesKeys = Object.keys(sources);
sourcesLength = sourcesKeys.length;
if (sourcesLength === 1) {
downloadBtn.wrap("<a href=\"" + sourcesKeys[0] + "\" download />");
} else if (sourcesLength > 1) {
downloadBtn.after("<span class=\"" + downloadToolTipCls + "\" />");
downloadToopTip = $("." + downloadToolTipCls);
$.each(sources, function (source, type) {
downloadToopTip.append("<a href=\"" + source + "\" download> Type " + type + "</a>");
});
downloadBtn.click(function () {
downloadToopTip.toggle();
});
}
};

Put the name that you want for your file in download attribute download=name

load image automtacily to html page withe javascript(not php)

I need to build a gallery in HTML and load images from a local directory.
I can't use PHP, only JavaScript, HTML, and CSS.
This is my code so far, but it is not working.
$(document).ready(function() {
var dir = "G:\\Arml\\Automation\\System\\Pic\\test\\"; // folder location
var fileextension = ".jpg"; // image format
var i = "1";
$(function imageloop() {
$("<img />").attr('src', dir + i + fileextension).appendTo(".testing");
if (i == 10) {
alert('loaded');
} else {
i++;
imageloop();
};
});
});

1-Could you try to change the variable dir by another name witch could be used by another javascript library
2- give the img width and height like this for example:
$("<img width='100' height='50' />").attr('src', dir + i + fileextension ).appendTo(".testing");

this is the javaScript was work:
$(document).ready(function(){
var dir = "path"; // folder location
var fileextension = ".jpg"; // image format
var i = "1";
$(function imageloop(){
$('.gallary').prepend('<li><img id="' + i + '" alt="description" /><img id="1' + i + '" alt="description" class="preview" /></li>')
if (i==11){
}
else{
$("#"+i).attr('src', dir + i + fileextension );
$("#1"+i).attr('src', dir + i + fileextension );
i++;
imageloop();
};
});
});

Getting values of inputs generated using jQuerys html() function

I have a page with a table and when I click edit I change the table elements into inputs using jQuerys html() function.
I then want to have the user edit the values of the inputs and save these to database, problem is when I try and grab the data I get undefined for all the inputs that are created with the html() function.
I am sure it is something to do with this.. Any help would be great! Here is my code:
$('[name="edit"]').click(function(e) {
e.preventDefault();
var data = {
'invoice_number': $(this).attr('data-invoice-number'),
'count': $(this).attr('data-count')
};
var description_text = $('[data-description-' + data.count).text();
var rates_text = $('[data-rates-' + data.count).text();
var quantity_text = $('[data-quantity-' + data.count).text();
console.log(description_text);
$('[data-description-' + data.count + ']').html('<input type="text" name="description" value="' + description_text + '" />');
$('[data-rates-' + data.count + ']').html('<input type="text" name="rates" value="' + rates_text + '" />');
$('[data-quantity-' + data.count + ']').html('<input type="text" name="quantity" value="' + quantity_text + '" />');
$(this).css('display', 'none');
$('[name="save"][data-count=' + data.count + ']').css('display', 'inline-block');
$('[name="cancel"][data-count=' + data.count + ']').css('display', 'inline-block');
});
$('[name="save"]').unbind().bind().click(function(e) {
e.preventDefault();
var data = {
'invoice_number': $('[name="save"]').attr('data-invoice-number'),
'description': $('[name="description"]').val(),
'rates': $('[name="rates"]').val(),
'quantity': $('[name="quantity"]').val(),
};
console.log(data); // this outputs undefined for values above generated using html() method
if (data.description == '') {
append_alert('danger', 'Please enter a <b>Description</b>');
} else if (data.rates == '') {
append_alert('danger', 'Please enter your <b>Rates</b>');
} else if (data.quantity == '') {
append_alert('danger', 'Please enter a <b>Quantity</b>');
} else {
$.post('edit_invoice_item', data, function() {}).done(function() {
append_alert('success', 'Item Edited!');
setTimeout(function() {
location.reload();
}, 2000)
});
}
});
Regards

For dynamically added elements use event delegation
Change
$('[name="edit"]').click(function(e) {
To
$(document).on('click', '[name="edit"]', function(e) {
AND
$('[name="save"]').unbind().bind().click(function(e) {
To
$(document).on('click', '[name="save"]', function(e) {

plupload - limit number of selected files

This is the part of code:
inprogress = false;
function getid(id) {
return document.getElementById(id);
}
var uploader = new plupload.Uploader({
runtimes : 'gears,html5,flash,silverlight,browserplus',
browse_button : 'link-browse',
max_file_size : '100mb',
url : 'site/upload/process.php?dir=<?php echo $uplid; ?>',
flash_swf_url : 'site/upload/plupload.flash.swf',
silverlight_xap_url : 'site/upload/plupload.silverlight.xap',
});
uploader.bind('Init', function(up, params) {
//$('filelist').innerHTML = "<div>Current runtime: " + params.runtime + "</div>";
});
uploader.bind('FilesAdded', function(up, files) {
if(uploader.files.length <= 0){
var element = document.getElementById('standby');
element.parentNode.removeChild(element);
}
if(up.files.length > 4 || uploader.files.length > 4)
{
alert('Only 5 files per upload !');
return false;
}
for (var i in files) {
getid('filelist').innerHTML += '<div class="item" id="' + files[i].id + '"><div class="name">' + files[i].name + '</div><div onclick="removeme(\''+files[i].id+'\')" id="remove-'+files[i].id+'" class="remove"></div><div class="size">[ ' + plupload.formatSize(files[i].size) + ' ]</div><div class="percent"></div></div>';
}
});
uploader.bind('UploadFile', function(up, file) {
getid('submit-form').innerHTML += '<input type="hidden" name="file-' + file.id + '" value="' + file.name + '" />';
});
uploader.bind('UploadProgress', function(up, file) {
getid(file.id).getElementsByTagName('div')[3].innerHTML = '<span>' + file.percent + "%</span>";
});
uploader.bind('StateChanged', function(uploader) {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
window.location = "./dl/<?php echo $uplid; ?>"
}
});
getid('link-upload').onclick = function() {
if(uploader.files.length < 1){
alert('Please select files first.');
return false;
}
inprogress = true;
uploader.start();
return false;
};
uploader.init();
function removeme(id){
if(inprogress) return false;
if(uploader.files.length == 1)
getid('filelist').innerHTML += '<div id="standby"></div>';
var element = document.getElementById(id);
element.parentNode.removeChild(element);
var toremove = '';
for(var i in uploader.files){
if(uploader.files[i].id === id){
toremove = i;
}
}
uploader.files.splice(toremove, 1);
}
I can limit of files being uploaded,
And if I have 4 files selected, and I select 5 more -> it will show error
but if I at first select for example 14 files, they will be shown in "filelist".
How to limit that, or where to put "return false";
Thanks for any help :)

- Working for Pupload v2.0
$("#uploader").pluploadQueue({
runtimes: 'html5,html4',
url: 'upload.php',
max_file_size: '2mb',
unique_names: false,
rename: true,
prevent_duplicates: true,
init : {
FilesAdded: function(up, files) {
var max_files = 12;
plupload.each(files, function(file) {
if (up.files.length > max_files) {
alert('You are allowed to add only ' + max_files + ' files.');
up.removeFile(file);
}
});
if (up.files.length >= max_files) {
$('#pickfiles').hide('slow');
}
},
FilesRemoved: function(up, files) {
if (up.files.length < max_files) {
$('#pickfiles').fadeIn('slow');
}
}
},
resize : {width : 700, height : 700, quality : 90},
filters: [
{
title: "Image files",
extensions: "jpg,jpeg,gif,png"
}
]
});

Expand if(up.files.length > 4 || uploader.files.length > 4) to if(up.files.length > 4 || uploader.files.length > 4 || files.length > 4).

Just use max_file_count: 4 option to limit amount files to upload

in reply to Rob W's answer, up and uploader is the same since it's the uploader instance, hence redundant; and it would be useful to also check (uploader.files.length + files.length) > 4 in order to check if a couple of incoming files would exceed the 4 when taking the already "registered" files into account (e.g. somebody adds 2 files and then 3 files subsequently).
So in conclusion, I would recommend
if(uploader.files.length > 4 || files.length > 4 || (uploader.files.length + files.length) > 4) {