I want to Upload image file before upload i want to show preview of image, but i found issue like i am trying to upload image it is changing only in first grid view.
i want
If someone can point me in the right direction, than would be great! Thanks!
I am using Code like this:
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$('#myImg').attr('src', e.target.result);
};
<div ng-repeat 1 to 4>
<div class="col-md-4 col-4-custom">
<img id="myImg" src="http://imagepath" width=600px height=250px class="img-full" alt="Image not found" >
</div>
<label type='file' for="file-input1" id="file-input1" ng-file-select ng-model="files">
</div>
Related
Hi Here I have to upload single/multiple files in angular js . I have used the below link for uploading files. In this they have uploaded the images but instead I have to upload pdf and image.
<div class="container">
<div ng-controller="MyCtrl" class="row">
<button class="btn btn-primary pull-right" ng-hide="images.length == 0" ng-click="clearAll()">Clear All</button>
<h3 ng-bind="name"></h3>
<input type="file" ng-click="$event = $event" ng-model="display" multiple onchange="angular.element(this).scope().upload(event)" accept="image/png, image/jpeg, image/gif" />
<div class="row">
<div class="col-md-12"> <span ng-repeat='img in images'> <a href="#" ng-click="setImage($index)">
<img ng-src="{{img}}"
alt="Generic placeholder thumbnail" style="max-height:100px;" class="thumbnail"/>
</a>
</span>
</div>
</div>
<img ng-src="{{display}}" ng-hide="!display" />
<h4>You have upload {{images.length}} images this session.
</h4>
</div>
</div>
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope) {
$scope.name = "Select Files to Upload";
$scope.images = [];
$scope.display = $scope.images[$scope.images.length - 1];
$scope.setImage = function (ix) {
$scope.display = $scope.images[ix];
}
$scope.clearAll = function () {
$scope.display = '';
$scope.images = [];
}
$scope.upload = function (obj) {
var elem = obj.target || obj.srcElement;
for (i = 0; i < elem.files.length; i++) {
var file = elem.files[i];
var reader = new FileReader();
reader.onload = function (e) {
$scope.images.push(e.target.result);
$scope.display = e.target.result;
$scope.$apply();
}
reader.readAsDataURL(file);
}
}
})
Thanks in advance.
In this I can able to see the selected images on clicking choose file. But, if it is PDF format i cant able to see the image. Pls provide the solution for PDF.
You can use javascript and PDF.JS.
Example like this:
How to Convert PDF to Image (JPEG / PNG) with Javascript using PDF.JS
You have to excuse me, I do not use Angular that often. I need to implement a solution in which I can upload files from dynamically generated input fields.
The catch is that I cannot use any directives (this is due to the framework I am using in which AngularJS is implemented).
My current code for creating fields:
$scope.addNewFile = function() {
var newFileNo = $scope.files.length + 1;
$scope.files.push({'id': 'file' + newFileNo});
};
$scope.removeFile = function() {
var lastFile = $scope.files.length - 1;
$scope.files.splice(lastFile);
};
And here is the code for uploading files (not correct, because of static id and name values:
$scope.uploadFile = function() {
var file = document.getElementById('file').files[0],
r = new FileReader;
r.onloadend = function (e) {
var data = e.target.result;
console.log('data');
console.log(data);
// http.post
};
r.readAsArrayBuffer(file);
};
And here is my HTML:
<div data-ng-repeat="file in files">
<div class="row top-buffer">
<div class="col-lg-10">
<input type="file"
ng-model="file.name"
name="file"
class="form-control"
id="file">
</div>
<div class="col-lg-2 text-right">
<div class="btn btn-primary" ng-click="uploadFile()">Upload</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-lg-11"></div>
<div class="col-lg-1 text-right">
<div class="glyphicon glyphicon-plus" aria-hidden="true" ng-click="addNewFile()"></div>
<div class="glyphicon glyphicon-minus" aria-hidden="true" ng-click="removeFile()"></div>
</div>
</div>
I can't really understand how I can get the values of dynamically generated file fields... any help appreciated!
There is no ng-model for <input type=file, but you can achieve what you want setting the id dynamically with ng-attr:
<div ng-repeat="file in files">
{{file.id}}:
<input type="file"
ng-attr-name="{{file.id}}"
ng-attr-id="{{file.id}}">
</div>
On uploadFile() you can post them:
$scope.uploadFile = function() {
$scope.files.forEach(function(file) {
// $http.post: document.getElementById(file.id).files[0])
});
};
Example on Fiddle: https://jsfiddle.net/virgilioafonsojr/92nw4j4f/1/
I hope it helps.
Writing an uploader properly is a very difficult task. A major problem with an upload component/directive is getting it to work in Internet Explorer; because it can only be used once in IE. Another problem is that IE will not let you programmatically "press" the button, it must be a real mouse click.
There are upload libraries out there for AngularJs, just google. However if you are intent on doing it yourself then you can use my git repo as an example of how it should be done. Just use the jwtUploader and jwtUploaderButton directives.
https://github.com/smylydon/SEPE-7WCM0033-0206-FRONTEND/tree/master/client/app
I am trying to download images from firebase storage into an ng-repeat. The syntax i am using i got from here and also from here.
.controller('tryCtrl', function($scope,$firebaseStorage,$firebaseArray){
$scope.user = 'OPD0wmF3syajsD94ANBBEQgzWPz2';
const rootRef = firebase.database().ref();
const ref = rootRef.child('UserData' + '/' + $scope.user);
var list = $firebaseArray(ref);
$scope.listOFProducts = list;
$scope.getImageUrl = function(Image){
var storageRef = firebase.storage().ref($rootScope.user + '/' + Image);
var storage = $firebaseStorage(storageRef);
return storage.$getDownloadURL().then(function(url) {
$scope.url = url;
console.log($scope.url);
return url;
})
};
})
Here is my html
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-3" ng-repeat="items in details.Products">
<div class="spacer" ng-init=""></div>
<a class="button" data-toggle="modal" data-target="#myModal" ng-click="open(items)">
<img ng-src="{{getImageUrl(items.Image)}}" class="img-responsive">
</a>
<p>{{items.Price}}</p>
</div>
<img ng-src="{{url}}">
My challenge is that the returned url does not display any image. The url attached to scope however displays all the image; changing from one image to another within about a second of each image. Conosole.log($scope.url) shows the download url constantly changing. I will be grateful if someone can help me figure this out.
You could directly bind the url, since you have the image in the scope variable,
<img ng-src="url" class="img-responsive">
HTML:
<div class="row"
ng-if="dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" >
<div class="file-upload-wrapper">
<div class="file-upload">
<img class="file-image" ng-src="{{imageSource}}" ng-if="imageSource"/>
<input type="file" file-model="image" name="file" class="file"/>
</div>
<div class="file-upload-text"> Upload Picture</div>
</div>
<div class="file-restriction-info">
Maximum 5 Images can be attached.<br/>
File size below 10MB. File Format jpeg & png
</div>
<div class="file-tags">
<ul>
<li ng-repeat="image in files | filter :'image'" >
<div class="file-tag-baloon">
<span>
<a ng-click="getImage(image.id);">{{image.filename}}</a>
</span>
<span><a ng-click="removeImage(image.id)">x</a></span>
</div>
</li>
</ul>
</div>
</div>
JS:
$scope.dataLoading = false;
$scope.uploadVideo = function( file ){
var json = {
"request": {
"service":{
"servicetype":servicetype,
"functiontype": "1012",
"session_id": session_id
},
"data":{
"rolename":rolename
}
}
};
console.log(JSON.stringify(json));
FileService.uploadFile( json, file ).then(function(res){
$scope.dataLoading = true;
console.log(JSON.stringify(res));
if( res && res.status.code == 0 ) {
$scope.getVideo( res.data.mediaids[0] );
$scope.getAll();
} else FlashService.Error(res.status.message, true);
});
Need to load dataloading image till response comes from the backend .I am using loading for video upload request. Since video uploading time is more. It will be good , if I use dataloading. Now I am unable to trigger the dataloading part. Need assistance
<div class="row" ng-class="{visible: dataLoading, hidden: !dataLoading}" src="TOO LONG FOR ME TO COPY PASTE IT GOD DAMMIT">
in your controller, don't change anything (except, set your dataLoading to false once you've done loading)
in your CSS file :
.visible {
display: block;
}
.hidden {
display: none;
}
For this things I recommend using 'angular-busy'.
https://github.com/cgross/angular-busy
With this angular module you can add the promise to a scope object. This scope object you bind to the cg-busy directive which then shows a loading gif until the promise is resolved.
controller.js
$scope.uploadPromise = FileService.uploadFile(json, file).then(.....
view.html
<div cg-busy="uploadPromise">Successfully uploaded!!</div>
<!-- It shows a loading icon until the promise 'uploadPromise' is resolved. Then this <div> will be shown -->
It is also possible to add your own gif or svg.
I am using image picker plugin to select images and display it as a slide. The view part doesnt work. I am getting only img icon and not the images. I have used base64 plugin to convert to base64. I am working on this for more than a week. Any suggestions would be appreciated.
contoller.js
$scope.photoData = [];
$cordovaImagePicker.getPictures(options).then(function(results) {
function successFunc(base64) {
console.log('photoData: ' + base64);
}
for (var i = 0; i < results.length; i++) {
$scope.photoData.push(results[i]);
window.plugins.Base64.encodeFile(results[i], successFunc);
console.log(results[i]);
}
if (!$scope.$$phase) {
$scope.$apply();
}
}, function(err) {
// An error occured. Show a message to the user
});
};
html
<div class="list">
<div class="item">
<ion-slide-box>
<ion-slide ng-repeat="item in photoData">
<img ng-src="data:image/jpg;base64,{{item}}" style="max-width: 100%">
</ion-slide>
</ion-slide-box>
</div>
</div>