I want to preview 4 pictures before I upload them to my laravel app.
I can see the first preview image when I upload the first picture.
But if I upload a second picture, the first preview image changes to the second picture. But I cannot see the second picture preview in the second preview field.
The same thing happens to the third and the fourth picture. Only the first preview field changes.
How can I show 4 image previews?
html
<div class="image-preview" id="imagePreview">
#if(isset($post))
<img src="" id="image-preview__image">
#else
<img src="../../blog-image/S__3530766.jpg" id="preview">
#endif
</div>
<input type="text" class="name" value="NAME">
<textarea name="profile" cols="20" rows="5" class="profile" value="profile">profile</textarea>
<div class="preview">
<input type="file" id="file" accept="image/*" name="profile_img">
<label for="file" >
Add profile photo
</label>
</div>
<div class="content-image-preview" id="imagePreview">
#if(isset($post))
<img src="" id="image-preview__image">
#else
<img src="../../LPImages/jezael-melgoza-alY6_OpdwRQ-unsplash.jpg" id="preview2">
#endif
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">
Add photo
</label>
</div>
<input type="text" value="TITLE" class="section-title">
<div class="content-image-preview" id="imagePreview">
#if(isset($post))
<img src="" id="image-preview__image">
#else
<img src="../../LPImages/jezael-melgoza-alY6_OpdwRQ-unsplash.jpg" id="preview3">
#endif
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">
Add photo
</label>
</div>
<div class="content-image-preview" id="imagePreview">
#if(isset($post))
<img src="" id="image-preview__image">
#else
<img src="../../LPImages/jezael-melgoza-alY6_OpdwRQ-unsplash.jpg" id="preview4">
#endif
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">
Add photo
</label>
</div>
javascript
const input = document.getElementById("file");
const previewImage = document.getElementById("image-preview__image");
input.addEventListener('change', function(e){
const file = this.files[0];
if (previewImage != null && previewImage.length < 1){
for (var i=0; i<previewImage.length; i+=1){
if(file) {
const reader = new FileReader();
reader.addEventListener("load", function(){
previewImage.setAttribute("src", this.result);
});
previewImage.style.display = "block";
reader.readAsDataURL(file);
} else {
previewImage.setAttribute("src", "");
}
}
}
}
);
In order to access the correct preview element you need a reliable way to query elements further up the DOM in this case - and because the HTML is not constant I modified your original slightly so that various distinct parts were separated using section tags - thus allowing a simple DOM traversal to find the correct preview img tag. In the following you'll note that I have omitted the template tags you were using
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Image previews</title>
</head>
<body>
<form method='post'>
<!--
slightly modified and without templating tags, otherwise essentially the same. ID attributes replaced with class attributes
-->
<section>
<div class="image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<input type="text" class="name" value="NAME">
<textarea name="profile" cols="20" rows="5" class="profile" value="profile">profile</textarea>
<div class="preview">
<input type="file" id="file" accept="image/*" name="profile_img">
<label for="file" >Add profile photo</label>
</div>
</section>
<section>
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo</label>
</div>
</section>
<section>
<input type="text" value="TITLE" class="section-title">
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo</label>
</div>
</section>
<section>
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo </label>
</div>
</section>
</form>
<script>
const findsection=function(n){
while(n && n.tagName.toLowerCase()!='section')n=n.parentNode;
return n;
};
Array.from( document.querySelectorAll('input[type="file"]') ).forEach( input=>{
input.addEventListener('change',function(e){
let section=findsection( e.target );
let file=this.files[0];
let reader = new FileReader();
reader.addEventListener('load', function(){
let img=section.querySelector( 'img.image-preview__image' );
img.src=this.result;
img.width=200;
});
reader.readAsDataURL(file);
})
})
</script>
</body>
</html>
const findsection=function(n){
while(n && n.tagName.toLowerCase()!='section')n=n.parentNode;
return n;
};
Array.from( document.querySelectorAll('input[type="file"]') ).forEach( input=>{
input.addEventListener('change',function(e){
let section=findsection( e.target );
let file=this.files[0];
let reader = new FileReader();
reader.addEventListener('load', function(){
let img=section.querySelector( 'img.image-preview__image' );
img.src=this.result;
img.width=200;
});
reader.readAsDataURL(file);
})
})
<section>
<div class="image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<input type="text" class="name" value="NAME">
<textarea name="profile" cols="20" rows="5" class="profile" value="profile">profile</textarea>
<div class="preview">
<input type="file" id="file" accept="image/*" name="profile_img">
<label for="file" >Add profile photo</label>
</div>
</section>
<section>
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo</label>
</div>
</section>
<section>
<input type="text" value="TITLE" class="section-title">
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo</label>
</div>
</section>
<section>
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo </label>
</div>
</section>
you have multiple IMG elements with the same id image-preview__image.
User different ID for each element then it will work.
<input type="file" id="file" accept="image/*" name="image">
further name can not be same in multiple places.
Related
Here, I can able to upload a file and display an uploaded file name in the info class. But, I've tried to display an uploaded image file name in the below input field image_main_file_name and I failed. Help me to resolve the same.
I can able to display uploaded image file name in info div class as below,
$(input).closest('dd').find('.info').html(fileName);
Help me to display an uploaded image file name in the input field image_main_file_name below,
function setImage(input) {
let $imgBox = $(input).closest('dd').find('.img_box');
var reader = new FileReader();
reader.onload = function(e) {
$imgBox.html($('<img>').attr('src', e.target.result));
let fileName = input.files[0].name;
$(input).closest('dd').find(".folder_box img").attr('src', e.target.result)
$(input).closest('dd').find(".folder_box img").attr('data-file', fileName)
$(input).closest('dd').find('.info').html(fileName);
$("#image_main_file_name").val(fileName);
};
reader.readAsDataURL(input.files[0]);
}
<label class="folder_box inb">
<input type="file" name="background_image_local" class="image_upload"> <img src="" class="hidden">
<p class="folder_img"></p>
</label>
<div class="info">
<input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>
<label class="folder_box inb">
<input type="file" name="background_image_local" class="image_upload"> <img src="" class="hidden">
<p class="folder_img"></p>
</label>
<div class="info">
<input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>
Your code was fine. You just didn't attach a change listener to the file input that calls setImage.
function setImage(input) {
let $imgBox = $(input).closest('dd').find('.img_box');
var reader = new FileReader();
reader.onload = function (e) {
$imgBox.html( $('<img>').attr('src', e.target.result) );
let fileName = input.files[0].name;
$(input).closest('dd').find(".folder_box img").attr('src',e.target.result)
$(input).closest('dd').find(".folder_box img").attr('data-file',fileName)
$(input).closest('dd').find('.info').html(fileName);
$("#image_main_file_name").val(fileName);
};
reader.readAsDataURL(input.files[0]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="folder_box inb">
<input type="file" name="background_image_local" class="image_upload" onchange="setImage(this)"> <img src="" class="hidden">
<p class="folder_img"></p>
</label>
<div class="info">
<input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>
For multiple:
function setImage(input) {
let $imgBox = $(input).closest('dd').find('.img_box');
var reader = new FileReader();
reader.onload = function(e) {
$imgBox.html($('<img>').attr('src', e.target.result));
let fileName = input.files[0].name;
$(input).closest('dd').find(".folder_box img").attr('src', e.target.result)
$(input).closest('dd').find(".folder_box img").attr('data-file', fileName)
$(input).closest('dd').find('.info').html(fileName);
$(input).parent().next().find('#image_main_file_name').first().val(fileName);
};
reader.readAsDataURL(input.files[0]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="folder_box inb">
<input type="file" name="background_image_local" class="image_upload" onchange="setImage(this)"> <img src="" class="hidden">
<p class="folder_img"></p>
</label>
<div class="info">
<input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>
<label class="folder_box inb">
<input type="file" name="background_image_local" class="image_upload" onchange="setImage(this)"> <img src="" class="hidden">
<p class="folder_img"></p>
</label>
<div class="info">
<input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>
set id of the control and then use below jquery syntax to set value.
<input type="text" id="image_main_file_name" name="image_main_file_name"/>
$("#image_main_file_name").val(fileName);
I have four upload buttons with their respective ids.
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-6">
<div class="mainDiv" align="right">
<progress id="uploader" value="0" max="100">0%</progress>
<input type="file" id="fileButton" value="upload" />
</div>
</div>
<div class="col-6">
<div class="mainDiv" align="right">
<progress id="uploader" value="0" max="100">0%</progress>
<input type="file" id="fileButton" value="upload" />
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-6">
<div class="mainDiv" align="right">
<progress id="uploader2" value="0" max="100">0%</progress>
<input type="file" id="fileButton2" value="upload" />
</div>
</div>
<div class="col-6">
<div class="mainDiv" align="right">
<progress id="uploader3" value="0" max="100">0%</progress>
<input type="file" id="fileButton3" value="upload" />
</div>
</div>
</div>
</div>
</div>
I am able to upload to firebase storage through one button with this function
$("#fileButton").on('change', function(e) {
var file = evt.target.files[0];
var storageRef = firebase.storage().ref('img/' + file.name);
var task = storageRef.put(file);
task.on('state_changed', function progress(snapshot) {
var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
uploader.value = percentage;
}, function error(err) {
}, function complete() {
});
})
the function works great but what I want to do is to prevent duplicating functions. I want to use that function for each of the upload input and uploader status.
I tried this but it does not work
$("#fileButton0", "#fileButton1", "#fileButton2", "#fileButton3").on('change'
how could I use the same function for each of the upload and uploader?
here is the jsfiddle
https://jsfiddle.net/dhs8g7fb/
Here is a working code !
const FileBtns = document.querySelectorAll("input[type='file'][id]");
FileBtns.forEach(function(btn) {
btn.addEventListener("change", function(e) {
console.log(this);
var file = e.target.files[0];
var storageRef = firebase.storage().ref('img/' + file.name);
var task = storageRef.put(file);
task.on('state_changed', function progress(snapshot) {
var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
uploader.value = percentage;
}, function error(err) {
//Some error task
}, function complete() {
console.log("we dit");
});
});
});
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-6">
<div class="mainDiv" align="right">
<progress id="uploader0" value="0" max="100">0%</progress>
<input type="file" id="fileButton0" value="upload" />
</div>
</div>
<div class="col-6">
<div class="mainDiv" align="right">
<progress id="uploader1" value="0" max="100">0%</progress>
<input type="file" id="fileButton1" value="upload" />
</div>
</div>
</div><br>
<div class="row">
<div class="col-6">
<div class="mainDiv" align="right">
<progress id="uploader2" value="0" max="100">0%</progress>
<input type="file" id="fileButton2" value="upload" />
</div>
</div>
<div class="col-6">
<div class="mainDiv" align="right">
<progress id="uploader3" value="0" max="100">0%</progress>
<input type="file" id="fileButton3" value="upload" />
</div>
</div>
</div>
</div>
</div>
I'm currently working on a web app I'm stuck on deleting the elements that I have created.
I'm using jQuery to display thumbnail pictures and I'm trying to include a hovering X to the top right corner that will on-click delete the thumbnail and the original file upload before sending the form.
This is my code:
$(document).ready(function() {
// This is where I create the thumbnail:
$('#uploadImage').on('change', function() {
resizeImages(this.files[0], function(dataUrl) {
$('#photo1').val(dataUrl);
document.getElementById("uploadPreview").src = dataUrl;
});
});
// This is where I am attempting to delete it:
$('.hiddenImages .close').on('click', function() {
var id = $(this).closest('.hiddenImages').find('img').data('id');
alert('remove picture: ' + id);
document.getElementById(".hiddenImages").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pictureHolders">
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview" data-id="photo-1" style="width: 100px;
height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview2" data-id="photo-2" style="width: 100px;
height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview3" data-id="photo-3" style="width:
100px; height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview4" data-id="photo-4" style="width: 100px;
height: 100px;" />
</div>
</div>
<div class="inputs">
<div> Photo 1:
<input type="text" id="desc1" name="desc1" />
<input id="uploadImage" type="file" />
</div>
<input type="hidden" class="photos" id="photo1" name="photo1" value="" />
<br/>
<div> Photo 2:
<input type="text" id="desc2" name="desc2" />
<input id="uploadImage2" type="file" />
</div>
<input type="hidden" class="photos" id="photo2" name="photo2" value="" />
<br/>
<div> Photo 3:
<input type="text" id="desc3" name="desc3" />
<input id="uploadImage3" type="file" />
</div>
<input type="hidden" class="photos" id="photo3" name="photo3" value="" />
<br/>
<div> Photo 4:
<input type="text" id="desc4" name="desc4" />
<input id="uploadImage4" type="file" />
</div>
<input type="hidden" class="photos" id="photo4" name="photo4" value="" />
<br/>
</div>
Any help would be appreciated.
You are trying to get a handle to an identifier by using a class name inside getElemlementById
You should be able to simply remove the container of the clcked x, similar to this: $(this).closest('.hiddenImages').remove();
In addition your selector for the click event on the x might need to change as you are removing the container your binding to and as such any new .hiddenImages container will not have that click event bound.
You might need to update $('.hiddenImages .close').on('click', function... to $('.pictureHolders').on('click', '.hiddenImages .close', function...
$(document).ready(function() {
// This is where I create the thumbnail:
$('#uploadImage').on('change', function() {
resizeImages(this.files[0], function(dataUrl) {
$('#photo1').val(dataUrl);
document.getElementById("uploadPreview").src = dataUrl;
});
});
// This is where I am attempting to delete it:
$('.pictureHolders').on('click', '.hiddenImages .close', function() {
$(this).closest('.hiddenImages').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pictureHolders">
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview" data-id="photo-1" style="width: 100px;
height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview2" data-id="photo-2" style="width: 100px;
height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview3" data-id="photo-3" style="width:
100px; height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview4" data-id="photo-4" style="width: 100px;
height: 100px;" />
</div>
</div>
<div class="inputs">
<div> Photo 1:
<input type="text" id="desc1" name="desc1" />
<input id="uploadImage" type="file" />
</div>
<input type="hidden" class="photos" id="photo1" name="photo1" value="" />
<br/>
<div> Photo 2:
<input type="text" id="desc2" name="desc2" />
<input id="uploadImage2" type="file" />
</div>
<input type="hidden" class="photos" id="photo2" name="photo2" value="" />
<br/>
<div> Photo 3:
<input type="text" id="desc3" name="desc3" />
<input id="uploadImage3" type="file" />
</div>
<input type="hidden" class="photos" id="photo3" name="photo3" value="" />
<br/>
<div> Photo 4:
<input type="text" id="desc4" name="desc4" />
<input id="uploadImage4" type="file" />
</div>
<input type="hidden" class="photos" id="photo4" name="photo4" value="" />
<br/>
</div>
$('.hiddenImages .close').on('click', function() {
var id = $(this).closest('.hiddenImages').find('img').data('id');
alert('remove picture: ' + id);
document.getElementById(".hiddenImages").remove();
});
become:
$('.hiddenImages .close').on('click', function() {
var img = $(this).closest('.hiddenImages').find('img');
img.remove()
});
I need one help.I want to display image inside image tag when image will be selected.I am explaining my code below.
<div class="col-md-6 bannerimagefile" ng-controller="imgController">
<form name="form">
<label for="bannerimage" accesskey="B"><span class="required">*</span> Banner Image</label>
<input type="file" class="filestyle" data-size="lg" name="bannerimage" id="bannerimage" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="20MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}">
<label for="bannerimage" accesskey="B" ><span class="required">*</span> View Image</label>
<div style="padding-bottom:10px;">
<img ng-src="{{attachImage}}" border="0" name="bannerimage" style="width:70px; height:70px;">
</div>
<div><input type="button" id="btn" ng-click="submitImage();" value="Upload" /></div>
<div class="clear"></div>
</form>
</div>
My controller file is given below.
var app=angular.module('testImage',['ngFileUpload']);
app.controller('imgController',function($scope,$http){
$scope.submitImage=function(){
console.log('image',$scope.file);
}
});
Here my requirement is when user will select the image it will display inside the image tag which is given in my code using Angular.js.Please help me.
This is my html page.
<div>
<div id="defaultcard" class="container">
<div id="imgspace1" class="container">
<input id="edit" type="button" name="answer" value="Edit" onclick="showDiv()" />
<input id="cancel" type="button" name="answer" value="Cancel" onclick="showBtn()" />
<div id="image_preview">
<img id="previewing" src="" />
</div>
</div>
<div id="imgspace2" class="container">
<input id="edit" type="button" name="answer" value="Edit" onclick="showDiv()" />
<div id="image_preview">
<img id="previewing1" src="" />
</div>
</div>
<div id="imgspace3" class="container">
</div>
<div id="imgspace4" class="container">
</div>
</div>
and this is my js file(image preview part only).
function imageIsLoaded(e)
{
$("#file").css("color","green");
$('#image_preview').css("display", "block");
$('#previewing').attr('src', e.target.result);
$('#previewing').attr('width', '100%');
$('#previewing').attr('height', '100%');
};
});
how can i upload different images to each div. i want know how to pass that div id to this js file.