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.
Related
I have the following form with two labels:
<form method="POST" action='/process' enctype="multipart/form-data">
<div>
<label for="file" class="upload-button"><i class="far fa-file-image"></i></label>
<label for="file" class="upload-button"><i class="fas fa-angry"></i></label>
<input type="file" id="file" name="file" accept=".jpg, .jpeg, .png" style="display: none; visibility: none;" onchange="$('form').submit();">
</div>
</form>
I would like the input to remain as it is currently written if the first label is clicked, but for a 'capture="user"' attribute to be added if the second label is clicked. Is there an easy way of achieving this?
First, give the second label a unique class:
<label for="file" class="upload-button second"><i class="fas fa-angry"></i></label>
Then, select it, and add to it a click event listener that gives the <input /> tag a "capture"="user" attribute using attr() method:
$(".second").click(function() {
$("input").attr("capture", "user");
});
Running sample: inspect the input tag to see the change
$(".second").click(function() {
$("input").attr("capture", "user");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<form method="POST" action='/process' enctype="multipart/form-data">
<div>
<label for="file" class="upload-button"><i class="far fa-file-image"></i></label>
<label for="file" class="upload-button second"><i class="fas fa-angry"></i></label>
<input type="file" id="file" name="file" accept=".jpg, .jpeg, .png" onchange="$('form').submit();">
</div>
</form>
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.
I am trying to create a text box wherein the user will send in the parameters and I have to display the text box on the page..
I will be having a text box where a user can submit the value eg:padding or text color and I have to display the text accordingly on an image displayed
The below code is to display the image which we get and to show the text on it :-
<fieldset class="ng-binding">
<legend>Upload on form submit</legend>
Username:
<input type="text" name="userName" ng-model="username" size="39" required="">
<i ng-show="myForm.userName.$error.required">*required</i>
<br> Profile Picture:
<input type="file" ngf-select="" ng-model="picFile" name="file" ngf-accept="'image/*'" required="">
<i ng-show="myForm.file.$error.required">*required</i>
<br> Profile Picture1:
<input type="file" ngf-select="" ng-model="picFile1" name="file" ngf-accept="'image/*'" required="">
<i ng-show="myForm.file.$error.required">*required</i>
<br>
<button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)">Submit for pic one</button>
<button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile1)">Submit for pic two</button>
<img ngf-src="picFile" class="col-md-12 col-xs-6 thumb img img-responsive" style="position:relative">
<div ng-if="picFile" class="internal" style ="margin:250px 0 0 250px;position:absolute">this is the internal working for file</div>
<img ngf-src="picFile1" class="col-md-12 col-xs-6 thumb img img-responsive">
<span class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%" ng-bind="picFile.progress + '%'" class="ng-binding"></div>
</span>
<span ng-show="picFile.result">Upload Successful</span>
</fieldset>
I tried to control with the help of ng-model but not helping so far..Please help..
Thanks
I have an issue while trying to implement ng-file-upload of Angular.js and my problem is i am not getting any validation message while uploading wrong file.My explaining my code below.
<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate>
<div class="input-group bmargindiv1 col-md-12" ng-show="status==1">
<div ng-class="{ 'myError': billdata.bannerimage.$touched && billdata.bannerimage.$invalid }">
<div class="image-upload text-center">
<label for="imagefile1">
<img ng-src="{{attchImage1}}" style="cursor:pointer;width:auto; height:160px; border:1px #666 solid"/>
</label>
<input type="file" data-size="lg" name="bannerimage" id="imagefile1" ng-model="file" ngf-pattern="image/*" accept="image/*" ngf-max-size="2MB" ngf-min-height="100" ngf-resize="{width:100, height:100}" custom-on-change="uploadFile" ngf-select="onFileSelect($file);" >
<div class="input-group bmargindiv1 col-md-12">
<label for="imagefile1" >
<span style="color:#00F; font-style:italic; cursor:pointer"> Click here to upload Image </span>
<input type="hidden" name="someData" ng-model="imageData" />
</label>
</div>
</div>
</div>
</div>
<div class="help-block" ng-messages="billdata.bannerimage.$error" ng-if="billdata.bannerimage.$touched">
<p ng-message="maxSize" style="color:#F00;">File is too large.Max size is 2 mb.</p>
<p ng-message="minHeight" style="color:#F00;">Minimum height should be 100px</p>
</div>
</form>
Here when i am uploading the wrong file size(i.e-min-height<100px) the validation error message should display but its not coming at all.Please help me to resolve this issue.
Can any one give me proper example for changing uploaded file in JSP?
This is my JSP Page code.
<div class="action">
<input type="file" name="files[0]" id="file0" style="float: left" required>
<input type="button" id="btnZoomIn" value="+" style="float: left">
<input type="button" id="btnZoomOut" value="-" style="float: left">
<input type="button" id="btnCrop" value="Crop" style="float: left">
<input type="submit" value="Upload File" style="float: right" />
</div>
<div class="cropped">
</div>
Using JS and CSS i am cropping uploaded image ...
JS
document.querySelector('#btnCrop').addEventListener('click',
function() {
var img = cropper.getDataURL();
document.querySelector('.cropped').innerHTML = '<img name="img123" src="'+img+'">';
})
this cropper.getDataURL() will provide me cropped image but now i am unable to set this image to uploaded file like as a file0 or files[0] to pass it to my servlet. How can i do so?