Develop Reference

Javascript forEach changes order of FileList on images preview

I have an issue with image upload, you can see demo here.
I have simple html:
<input type="file" id="files" multiple>
<div class="preview"></div>
When user choose images to upload, he can see a preview of what he is uploading.
My js:
$("#files").on("change", previewFiles);
function previewFiles() {
var preview = $('.preview');
var files = $(this)[0].files;
preview.empty();
function readAndPreview(file) {
if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
var reader = new FileReader();
reader.onload = function(event) {
var conta = $('<div></div>').addClass("preview__image");
var img = $('<img>');
img.attr('src', event.target.result);
img.attr('title', file.name);
img.appendTo(conta);
conta.appendTo( preview );
}
reader.readAsDataURL(file);
}
}
if (files) {
[].forEach.call(files, readAndPreview);
}
console.log(files);
}
Actually, everything is working, except an order of images that user chose in preview block.
Try to upload 10 images and open your console, you will see that FileList is as supposed to be, but in preview images are mixed.
I can't understand why forEach() is changing it.
How can I save order inside preview block? It should be the same as in FileList.
Thanks in advance!

The onload handler you're using to pop the images into the container is asynchronous, so it just pops them in as they're loaded and not in the order in which you created them.
To get the order correct, you'll have to either use "await" or create your image containers prior to the images loading, then put those images into their respective containers as they load.

Asp Mvc resize image on client side

I want to enable the user to upload an image ,but i want the image to be resized at the cliet side ,before pass it to the server. So if the image to large it won't take long time.
Is any way to achieve that using JS or any tools ,
BTW I'm coding in Asp Mvc 5.

Changing image size after file select input change event :
<input type="file" id="fileSelect">
<img id="preview">
<script>
document.getElementById('fileSelect').onchange = function(event) {
ImageTools.resize(this.files[0], {
width: 720,
height: 480
}, function(blob, didItResize) {
//it will be true if it resize it, else false and will return the original file as blob
document.getElementById('preview').src = window.URL.createObjectURL(blob);
});
};
</script>
Update :
you need to add refrence for imagetools :
<script src="https://gist.githubusercontent.com/dcollien/312bce1270a5f511bf4a/raw/155b6f5861e844310e773961a2eb3847c2e81851/ImageTools.js"></script>

Change img src when browse and select file

I am trying to capture div content and save it as an image. That div content contains image over an image. The base image will remain the same, and when the user browses and selects an image file it will display over the base image. Now when user will press button I am capturing that div content.
The problem is that the first time, when the default image is over a base image, and press submit button it will capture both image and convert it into a new image.
After that when the user browses and selects a new image it will display over base image, but when pressing button it will generate new image of only base image and the user selected image is not coming on captured image.
<script>
$(function() {
$("#proceed").click(function() {
html2canvas($("#wrap"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
window.open(canvas.toDataURL('image/jpeg'));
}
});
});
});
//display user uploaded image
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>
<input type="file" onchange="loadFile(event)">
<input type="button" value="Capture" id="proceed"/>
<div id="wrap">
<img src="1.png"> //base image
<div id="draggable">
<img id="output" src="admin/images/allproduct/no_image.png" /> //user selected image
</div>
</div>

I have done the same task like yours using AngualrJS. This framework has some advanced features like Directives and Filters.
https://docs.angularjs.org/api/ng/directive/ngSrc
You can manage DOM and everything very easily. Please check that.

Files cannot read by my Ajax after reading

im using an API to pass a whole form including images, textarea, etc.
it uses new FormData($('#form')) to pass the data into server.
everything went smooth except when i did something on <input type="file" id="upload"/>
I made the input to show the image every time the user uploads a new photo.
$(function() {
$("#upload").on("change", function()
{
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
//Showing the images here..
}
}
});
});
But now, when im submitting the form again using Ajax, it cannot read or pass the image. No image passed in the database.
Whenever i comment the line //var files = !!this.files ? this.files : []; its back to normal, but the image is not showing.
i want to ask is there an alternate way to show the image without affecting the <input type="file" tag?
Or if i have to create another <input type="file" with style="display: none;", how can i pass the image from one input with type="file" to another input with also type="file"?

View image selected from file-system on client-side before upload?

I have an input tag on a form for selecting images to upload.
<div id="lowresDemo">
<img src="some-url" />
</div>
<input type="file" id="FileToUpload" name="FileToUpload" />
I've attempted to change the a thumbnail displayed on the form next to the input to affirm to the user that their selection was the intended with the following jquery code:
$('#FileToUpload').change(function () {
$('#lowresDemo img').attr('src', $(this).val());
});
...this doesn't work in any browser, for browser security reasons I beleieve (as I remember from the last time I did something like this years ago).
QUESTION:
Is there a way to present the user's choice of image before they submit the form -- and not just the filepath+name of the value in the input field, but a thumbnail showing the file they've selected?
Or does modern browser security prevent this?

It's possible with the File API (IE does not support the File API)
<input type="file">
<script type="text/javascript">
$(document).ready(function() {
$("input").change(function(e) {
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var img = document.createElement("img");
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
}
reader.readAsDataURL(file);
$("input").after(img);
}
});
});
</script>
Working example: http://jsfiddle.net/ugPDx/

There is no way to perform the operation before uploading the picture.
But think of it in a different way - the user "doesn' care" if the picture is already uploaded - you could show the thumbnail after they've uploaded, and show a confirm checkbox. Gmail does this with their email attachments - as soon as you selected the file to attach, the upload starts. But the user always has the option to uncheck the file, and it won't be included in the email.