Develop Reference

Why I get empty file input after submit form?

There is a function that triggers the input file and shows previews:
$(document).on("change", "#Multifileupload", function() {
var MultifileUpload = document.getElementById("Multifileupload");
if (typeof FileReader != "undefined") {
var MultidvPreview = document.getElementById("MultidvPreview");
console.log(MultifileUpload.files);
var images = Array.prototype.slice.call(
MultifileUpload.files,
0,
upload_product_images_comment_total
);
for (
var i = 0; i < images.length &&
upload_product_images_comment_loaded <=
upload_product_images_comment_total; i++
) {
var file = images[i];
var reader = new FileReader();
reader.onload = function(e) {
var img = document.createElement("img");
var span = document.createElement("span");
span.classList.add("remove_image");
span.classList.add("icon-close");
img.src = e.target.result;
img.classList.add("Multifileupload_image");
var position = upload_product_images_comment_loaded + 1;
if (position > upload_product_images_comment_total - 1) {
var li = document.createElement("li");
$(".upload-photo-thumb").hide();
MultidvPreview.prepend(li);
MultidvPreview.children[0].appendChild(img);
MultidvPreview.children[0].appendChild(span);
} else {
MultidvPreview.children[position].appendChild(img);
MultidvPreview.children[position].appendChild(span);
}
upload_product_images_comment_loaded++;
};
reader.readAsDataURL(file);
}
MultifileUpload.value = '';
} else {
alert("This browser does not support HTML5 FileReader.");
}
});
The HTML input is:
<input type="file" id="Multifileupload" multiple="" name="file" size="40" accept=".png, .jpg, .jpeg, .gif">
Problem is when I choose some images and submit form I get empty file field in request:
csrf_mds_token=b2c47be75606853053acbbcf48c6280c&review=wreewrewrewrwrwrwrwr&rating=5&product_id=6&file=&sys_lang_id=1

You can not send files with the GET method, you have to use POST and add enctype="multipart/form-data" to your form tag:
<form method="POST" enctype="multipart/form-data">

Convert each image input to DataUrl or Base64 image while iterating

var toPush = []
for(var i = 1; i <= myVariable; i++){
var variable1 = document.getElementById('q' + i).value;
var var2 = document.getElementById(i + 'x').value;
var var3 = document.getElementById(i + 'y').value;
var var4 = document.getElementById(i + 'z').value;
var var5 = document.getElementById(i + 'd1').value;
var var6 = document.getElementById('xy' + i).value;
var file = document.getElementById("fileup" + i);
var twofour = [var2, var3, var4, var5];
let reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload = function () {
pictureURL = reader.result;
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
toPush.push({"variable1": variable1, "twofour": twofour, "pictureURL": pictureURL}
}
The application can add X many inputs by appending them do div. When it comes to pushing the data, I want to have the file input, which is the only image input, be read as DataURL, so it can show be used as a source to an image preview. I don't know if it is because of the iteration, but the pictureURL variable pushes as empty: in the database I got "pictureURL": "".
Is there any way around it?
Thank you in advance.

There are multiple issues with this code. The reason that you're not receiving the pictureUrl is because you're reading it before it's ready.
FileReader reads the file asynchronously. It provides us a callback onload that is executed when it has read the file. We get the content of the file as reader.result only when this callback is executed. You have to rewrite your code to process the content of the file when it's either FileReader.onload or FileReader.onerror are executed.
See the working example below. I have removed unnecessary code. You can run the code by clicking on Run code snippet button at the bottom of the post
function showIcons() {
let files = document.querySelector('#files').files;
if(files.length) {
document.querySelector('#show-icons-error').textContent = "";
} else {
document.querySelector('#show-icons-error').textContent = 'No files have been selected';
}
let imageIcons = document.querySelector('#image-icons');
imageIcons.innerHTML = '';
let imageUrlArr = [];
for(var i = 0; i < files.length; i++) {
let imageIconHolder = document.createElement('img');
imageIconHolder.classList.add('image-icon');
imageIconHolder.setAttribute('image-index', i);
imageIcons.appendChild(imageIconHolder);
let file = files[i];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
pictureURL = reader.result;
imageIconHolder.src = pictureURL;
imageUrlArr[i] = pictureURL;//Setting ith image, not pushing.
};
reader.onerror = function (error) {
console.log(`Error loading image at index : ${i}, error: ${error}`);
imageUrlArr[i] = error;//Error for ith image
};
}
}
.image-icon {
width: 10em;
display: block;
min-height: 5em;
}
<html>
<body>
<label for="files" class="btn">Select Images</label>
<input id="files" type="file" value="Select File" accept="image/*" multiple="multiple">
<br/>
<br/>
<div>
<button id="show-icons" onclick="showIcons()">Show Icons</button>
<span id='show-icons-error' style="color: red; font-weight: bold;"></span>
</div>
<br/>
<div id="image-icons">
</div>
</body>
</html>

How can I set the order of loading files in the form for input type="file" multiple?

There is a drag file preview area in which I set the key attribute to the pictures. I want, depending on this attribute, to specify the order in which these files appear on the site. How can I pass this attribute on form?
$("#fileUpload").change(function() {
handleFiles(this.files);
});
function handleFiles(files) {
for (let i = 0; i < files.length; i++) {
const file = files[i];
const img = document.createElement("img");
let elements = [];
img.classList.add("obj");
img.id = i + 1;
img.file = file;
$(img).attr('key', i + 1);
elements = '<li><span class="img-move">' + (i + 1) + '</span><div class="img-wrapper draggable-element d-' + (i + 1) + '"><span class="img-delete"><i class="fa fa-close "></i></span></div></li>';
$('#images').append(elements);
const reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
$(`.img-wrapper.d-${i + 1}`).append(img);
reader.readAsDataURL(file);
}
}
This is my code for the preview area.

Preview images of 2 or more multiple input file

I have 2 image fields and I want to display a preview before submitting the form. In the form below, it works by displaying multiple images, but I want each input to show its images separately as:
Input1
Input 1 images
Input 2
Input2 images
How do I do this?
<input id="fileupload" type="file" name="img_slide" multiple>
<div id="dvPreview">
<input id="fileupload2" type="file" name="img_capa" multiple>
<div id="dvPreview2">
<script>
window.onload = function () {
var fileUpload = document.getElementById("fileupload");
fileUpload.onchange = function () {
if (typeof (FileReader) != "undefined") {
var dvPreview = document.getElementById("dvPreview");
dvPreview.innerHTML = "";
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
for (var i = 0; i < fileUpload.files.length; i++) {
var file = fileUpload.files[i];
if (regex.test(file.name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
var img = document.createElement("IMG");
img.height = "100";
img.width = "100";
img.src = e.target.result;
dvPreview.appendChild(img);
dvPreview.appendChild(textbox);
}
reader.readAsDataURL(file);
} else {
alert(file.name + " is not a valid image file.");
dvPreview.innerHTML = "";
return false;
}
}
} else {
alert("This browser does not support HTML5 FileReader.");
}
}
};

I tried this and works for me. Code:
<pre>Please enter your files:<input class="fileupload" type="file" name="img_slide" multiple>
<div id="dvPreview"></div></pre>
<input class="fileupload" type="file" name="img_capa" multiple>
<div id="dvPreview2"></div>
window.onload = function () {
var fileUpload = document.getElementsByClassName("fileupload");
for(var i = 0; i < fileUpload.length; i++){
fileUpload[i].onchange = showImgOnChange;
}
}
var showImgOnChange = function () {
if (typeof (FileReader) != "undefined") {
var dvPreview = this.nextElementSibling;
dvPreview.innerHTML = "";
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
for (var i = 0; i < this.files.length; i++) {
var file = this.files[i];
if (regex.test(file.name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
var img = document.createElement("IMG");
img.height = "100";
img.width = "100";
img.src = e.target.result;
dvPreview.appendChild(img);
dvPreview.appendChild(textbox);
}
reader.readAsDataURL(file);
} else {
alert(file.name + " is not a valid image file.");
dvPreview.innerHTML = "";
return false;
}
}
} else {
alert("This browser does not support HTML5 FileReader.");
}
}
Now i will explain that code:
i use a single class for every input of that type. Using that class i get all the elements input and at every input i assign onchange the function showImgOnChange (just a trick to associate the same function on change to multiple elements). After that, in the function, to generalize this:
var dvPreview = document.getElementById("dvPreview");
I used this:
var dvPreview = this.nextElementSibling;
This takes the next element to the this element in the DOM. Otherwise you can associate a class to divs wich you would display the images and search for the next elements to this having that class.
Hope it helps

How to load image from directory, then show onclick

I am trying to have a function which has functions that do the following.
One function to store the files i get with input into the parent functions loadedimages array(loadimages).
One function to show those files in the correct component(showLoadedImages).
And one function to make the correct img file appear on the correct component.
The last function is what i want it to be like(it does not work).
The other two seem ok.
The problem i have is how to make the last function work while using the loadedimages array. You can change what i store in the array , i wouldnt mind.
Here is the JS code:
function imgviewer() {
"use strict";
var loadedimages = [];
var lidivs = [];
function loadimages() {
var files = document.getElementById("images").files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
alert('THERE IS NO IMAGE IN THIS DIRECTORY.');
break;
}
loadedimages.push(file);
}
}
function showLoadedImages(elem) {
loadimages();
var ld = loadedimages;
//var files = getLoadedImages(); //filelist obj
for (var i = 0; i < ld.length; i++) {
var file = ld[i];
var reader = new FileReader();
reader.onload = (function(file) {
return function(e) {
// Render thumbnail.
var span = document.createElement(
'span');
span.innerHTML = [
'<img class="tile" src="',
e.target.result,
'" title="', encodeURI(
file.name), '">'
].join('');
document.getElementById(elem).insertBefore(
span, null);
lidivs.push(span);
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
}
function showImage(index, elem) {
var chosenFile = loadedimages[index];
document.getElementById(elem).src = chosenFile;
}
document.getElementById('images').addEventListener('change', function(){
showLoadedImages("main");
}, false);
}
And some HTML
<form name="uploadForm">
<input id="images" type="file" webkitdirectory mozdirectory directory name="myFiles"
multiple/>
<span id="list"></span>
</form>
<div id="sidebar1"><img id="willchange" src="images/railaythailand.jpg" width="1200" height="832" alt=""/></div>
<div id="main"></div>
When i call showLoadedImages("main") the images are shown in main div. I want to be able to click those images so that they appear on "willchange" .

This does what you asked for. There are a number of other issues with your code that you might want to address, starting with the images are not thumbnails at all (and shrunken images take just as long to load as the original), but perhaps I'm missing something.
"use strict";
var loadedimages = [];
var lidivs = [];
function loadimages() {
var files = document.getElementById("images").files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
continue;
}
loadedimages.push(file);
}
loadedimages.length || alert('THERE IS NO IMAGE IN THIS DIRECTORY.');
}
function showLoadedImages(elem) {
loadimages();
var ld = loadedimages;
//var files = getLoadedImages(); //filelist obj
for (var i = 0; i < ld.length; i++) {
var file = ld[i];
var reader = new FileReader();
reader.onload = (function(file) {
return function(e) {
// Render thumbnail.
var span = document.createElement(
'span');
span.innerHTML = [
'<img data-index="',
lidivs.length,
'" class="tile" src="',
e.target.result,
'" title="', encodeURI(
file.name), '">'
].join('');
span.addEventListener("click", foo );
document.getElementById(elem).insertBefore(
span, null);
lidivs.push(span);
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
}
function showImage(index, elem) {
document.getElementById(elem).src = lidivs[index].children[0].src;
}
function foo(event) {
showImage(event.target.dataset.index, "willchange");
}
function show() {
showLoadedImages("list");
}
function init() {
document.getElementById("images").addEventListener("change", show, false);
}
document.addEventListener( "DOMContentLoaded", init, false );
<body>
<form name="uploadForm">
<input id="images" type="file" webkitdirectory mozdirectory directory name="myFiles"
multiple/>
<span id="list"></span>
</form>
<div id="sidebar1"><img id="willchange" src="images/railaythailand.jpg" width="1200" height="832" alt=""/></div>
</body>