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>
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
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.
ui-bootstrap seems not to render my images.
-When using regular <img ng-source =""> The images rendering just fine like they suppose to.
- When using angular ui Carousel they seem not to render for me. I get nothing. I'm not sure what the issue is at this point here is a snippet of my code.
<div style="height: 305px">
<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="image in selectedBridgeImages">
<img ng-src="{{getImage(image.Base64String)}}"/>
<div>
{{image.Id}}
</div>
</uib-slide>
</uib-carousel>
</div>
and here is everything I use in my angular controller
$scope.selectedBridgeImages = [];
$scope.getImage = function (data) {
return 'data:image/JPEG;base64,' + data;
}
$scope.selectBridge = function (selectedBridge) {
bridgeService.getBridgeDetails(selectedBridge.BridgeID).then(bridgeDetailsThen);
$scope.isBridgeSelected = true;
$scope.selectedBridge = selectedBridge;
}
var bridgeDetailsThen = function (response) {
$scope.selectedBridgeImages = response.data.Picture;
}
and a C# service call here
[HttpGet]
[Route("api/Bridge/GetBridgeDetails/{bridgeId}")]
public IHttpActionResult GetBridgeDetails(int bridgeId)
{
try
{
using (_iBridge)
{
var details = _iBridge.GetBridgeDetailses(bridgeId);
foreach (var picture in details.Picture) { picture.Base64String = Convert.ToBase64String(picture.PictureBytes); }
return Ok(details);
}
}
catch
{
return NotFound();
}
}
I was facing the same problem. First, I tried to wrap uib-carousel and uib-slide inside 'div' tags: after that I was able to see the carousel's arrows, but still no images. I found out later that the problem was the 'index' atribute of uib-slide: it seems you are supposed to provide an index, even if you don't use it for anything. Try this modified version of your code:
<div style="height: 305px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="image in selectedBridgeImages track by $index" index="$index">
<img ng-src="{{getImage(image.Base64String)}}" />
<div>
{{image.Id}}
</div>
</div>
</div>
Currently I have a image gallery like this:
<div class="slider">
<img ng-repeat="image in gallery" class="img-responsive" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{image}}" ng-click="open($index)"/>
<a class="arrow prev" ng-click="showPrev()"></a>
<a class="arrow next" ng-click="showNext()"></a>
<ul class="navigator">
<li ng-repeat="image in gallery" ng-class="{'active':isActive($index)}">
<img src="{{image}}" ng-click="showPhoto($index);" class="img-responsive" />
</li>
</ul>
</div>
My image gallery functions look like this:
// initial image index
$scope._Index = 0;
// if a current image is the same as requested image
$scope.isActive = function (index) {
return $scope._Index === index;
};
// show prev image
$scope.showPrev = function () {
$scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.gallery.length - 1;
};
// show next image
$scope.showNext = function () {
$scope._Index = ($scope._Index < $scope.gallery.length - 1) ? ++$scope._Index : 0;
};
// show a certain image
$scope.showPhoto = function (index) {
$scope._Index = index;
};
When I click on a image my 'open' function will run:
$scope.open = function (index) {
$scope.modalInstance = $modal.open({
templateUrl: 'templates/hotelmodal.html',
controller: 'HotelCtrl',
size: 'lg',
scope:$scope
});
};
And a modal will pop-up:
<div class="modal-header">
<h3 class="modal-title">Billedfremviser</h3>
</div>
<div class="modal-body">
<div ng-cloak class="slider">
<img ng-init="$index = 1" ng-repeat="image in gallery" class="img-responsive" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{image}}"/>
<a class="arrow prev" ng-click="showPrev()"></a>
<a class="arrow next" ng-click="showNext()"></a>
<ul class="navigator">
<li ng-repeat="image in gallery" ng-class="{'active':isActive($index)}">
<img src="{{image}}" ng-click="showPhoto($index);" class="img-responsive" />
</li>
</ul>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="close()">Luk billedfremviser</button>
</div>
As you can see my main gallery site and the content of the modal is almost the same.
The only purpose of the modal is to show the image in a larger size - which is working perfectly.
My only problem is, that I want the modal to show the same image as the main gallery site when it opens.
I've tried to use the following on the modal ng-repeat - just for test purpose:
ng-init="$index = 1"
But it just mess up ng-repeat.
As you can see I inject $index in my open function - but again.. I don't know how to use the number in the in the modal ng-repeat.
Your help will be greatly appreciated!
The only thing i needed to do was:
// initial image index
if (!$scope._Index) {
$scope._Index = 0;
}
Hereafter the $scope._Index im using to determine the active picture, will not be set to 0 when the modal opens with the same controller. The picture will then be the same in the modal as on the main page.
I don't think this is the best way to do it, but it's working great.