I need to upload an image in my AngularJS, NodeJS application.
I have the following element on my page for selecting an image in a form using the Bootstrap File Input plugin:
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail">
<img src="http://www.placehold.it/512x512/EFEFEF/AAAAAA&text=NO+IMAGE" alt="" class="img-responsive" />
</div>
<div class="fileinput-preview fileinput-exists thumbnail">
</div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new">Select image </span>
<span class="fileinput-exists">Change </span>
<input type="file" name="..." >
</span>
Remove
</div>
</div>
The data inside the following div gets changes once an image has been selected:
<div class="fileinput-preview fileinput-exists thumbnail">
</div>
It becomes to something like following:
<div class="fileinput-preview fileinput-exists thumbnail">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAIAAAB7GkOtAAAAA3=...">
</div>
I need the data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAIAAAB7GkOtAAAAA3=... data of the selected image for it to upload to a directory on my server using NodeJS.
Could somebody help me with an AngularJS directive to get that data?
Related
Using Rails 5 with AngularJS and Bootstrap.
I have a directive that generates a form which uses an icon I am getting from ui-icons_444444_25x240.png.
This file is located in app/assets/images, but the system seems to be unable to find it. I get the following error in the console:
angular-animate.self-4159531cc5685b66e6cdfd76c35d196124b4dde2fa449ceca973e3af2b070f66.js?body=1:766 GET http://localhost:3000/assets/images/ui-icons_444444_256x240.png 404 (Not Found)
Here is the directive that is looking for the icons:
function templateConstantsModal(projectName) {
let buttonCaption = "OK";
return `<div class="modal-header">
<h5 class="modal-title bold" id="modal-title">Budget Constants for ${projectName}</h5>
</div>
<div class="modal-body" id="modal-body">
<p class="italic" ng-if="$ctrl.list.length == 0">Click <strong>Add New</strong> to add a budget constant</p>
<div class="container col-sm-12" ng-if="$ctrl.list.length>0">
<div class="row bold">
<div class="col-sm-5">Constant</div>
<div class="col-sm-5">Value</div>
<div class="col-sm-2"></div>
</div>
<div class="row" ng-repeat="obj in $ctrl.list">
<div class="col-sm-5">{{obj.name}}</div>
<div class="col-sm-4">{{obj.value}}</div>
<div class="col-sm-3">
<span class="ui-icon ui-icon-pencil" ng-click=$ctrl.edit(obj.name)></span>
<span class="ui-icon ui-icon-circle-close" ng-click=$ctrl.delete(obj.name) ></span>
</div>
</div>
</div>
</div>
<div class="center">__________________________</div>
<div class = "modal-footer" id="modal-footer">
<button class="btn btn-primary" type="button" ng-click="$ctrl.addNew()">Add new</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>`;
}
The network pane of the Chrome developer tools seems to show the file not found on my local machine, but it is clearly there. I've put copies of an image folder with this .png file in other directories (same directory as the script, public/images etc. but it doesn't seem to be looking there.
The only odd thing I see in the network panel of google dev tools is that the filetyhpe of this .png file is marked "text/html" for some reason, although the file name itself is correct, and the file has the correct image content.
Heres the file tree from the root:
Code that uses the icon:
<div class="col-sm-3">
<span class="ui-icon u**i-icon-pencil"** ng-click=$ctrl.edit(obj.name)></span>
<span class="ui-icon ui-icon-circle-close" ng-click=$ctrl.delete(obj.name) ></span>
</div>
</div>
</div>
I'm not sure this is the way it's supposed to be done, but I was able to solve this problem by a) creating a subdirectory assets/stylesheets/images and putting the file ui-icons_444444_246x240.png inside, and then modificyling application.css to include the directive
*= require_directory ./images
Seems like kind of a hack, but at least it works.
If anybody knows how this is supposed to be done, please advise.
i have simple AngularJS application, i'm trying display images in modal use bootstrap, all photos at page i'm displaying use ng-repeat directive:
<div class="col-md-3" ng-repeat="photo_item in allPhotosOfSingleAlbum">
<img id="myImg" ng-src="../Files/Photos/{{photo_item.link}}" width="250px" height="160px" class="img-rounded" />
</div>
and i have the code of modal:
<div id="imageModal" class="modal">
<span class="close" onclick="document.getElementById('imageModal').style.display='none'">×</span>
<img class="modal-content" id="img01" />
</div>
Tell me please, how i can use it both ng-repeat and modal ?
Thanks for your answers !
Just move your first code where you have ng-repeat in modal and you should be able to show your images there.
<div id="imageModal" class="modal">
<span class="close" onclick="document.getElementById('imageModal').style.display='none'">×</span>
<div class="col-md-3" ng-repeat="photo_item in allPhotosOfSingleAlbum">
<img id="myImg" ng-src="../Files/Photos/{{photo_item.link}}" width="250px" height="160px" class="img-rounded" />
</div>
</div>
I need to set a default image from my local file if profile pic is not set by user and how to set hover to it if the user moves the mouse close to the profile pic field to set the image.
My HTML :
<div class="col-lg-2 vheight1">
<h4>Profile Picture</h4>
<div class="fileinput fileinput-new" onclick='$("#my_profile_pic").click();'>
<div class="fileinput-preview thumbnail" data-provides="fileinput" data-trigger="fileinput" id="profile_pic">
<img ng-if="source" class="thumb" ng-src="{{source}}"/>
</div>
<!-- <div class="hidden-sm hidden-md hidden-lg hidden-xs">
<span>
<span class="fileinput-new" ng-show="!hasFile()">Select image</span>
<span class="fileinput-new" ng-show="hasFile()">Change</span>
</span>
<a href="#" class="btn btn-danger fileinput-new glyphicon glyphicon-trash" data-dismiss="fileinput" ng-show="hasFile()" ng-click="removefile( json, file )" ></a>
</div> -->
</div>
</div>
<input type="file" class="hidden hidden-sm hidden-md hidden-lg hidden-xs" id='my_profile_pic' file-model="photo">
Can anyone please help me.
Replace:
<img ng-if="source" class="thumb" ng-src="{{source}}"/>
with:
<img class="thumb" ng-src="{{source ? source : 'pathtodefault.png'}}"/>
To complete Piyush's answer, you can also do:
<img class="thumb" ng-show="source" ng-src="{{source}}"/>
<img class="thumb" ng-show="!source" src="defaultSrc"/>
I am using the Angular-slick directive and I am having a tiny bit of a problem. I am sure that others may have had similar problems, but I hope someone out there can help me figure this out.
So I have a series of angular directives on my page. Each directive has properties that can be set in order to filter data in the other directives. My Angular-slick directive is bound to data that is coming from a Web API call. On the first load, the directive is perfect and it works fine. But once an action from one of the other directives causes the Angular-slick directive to filter its data (which is just another Web API call that returns similar data as the initial load), the entire the slider gets wacky and out of order. All the slides are displayed vertically.
Here is the code from the template:
<div id="slickContainer" ng-show="ctlr.SectionDataAvailable">
<div id="slickSlider">
<div id="currentDateRange">
<span ng-bind="ctlr.ApiResult.CurrentDateRangeHeaderText"></span>
</div>
<div id="previousDateRange">
<span ng-bind="ctlr.ApiResult.PreviousDateRangeHeaderText"></span>
</div>
<div id="slick">
<slick init-onload="false"
data="ctlr.DataLoaded"
arrows="true"
slides-to-show="3"
slides-to-scroll="3"
infinite="false"
dots="false"
responsive="ctlr.SlickResponsive()">
<div ng-repeat="doubledUpResult in ctlr.ApiResult.DoubledUpResults" id="slickConatiner">
<!--Current Item-->
<div id="currentItemContainer">
<div class="creative-item-heading-container"
ng-show="doubledUpResult.CurrentItem.HasACreative">
<span>{{doubledUpResult.CurrentItem.Headline}}</span><br />
<div ng-show="doubledUpResult.CurrentItem.IsFirstOccurrenceVisible">
<span style="color: #dd4f04;">First Occurrence: </span>
<span>{{doubledUpResult.CurrentItem.FirstPropertyName}}</span>
<span>{{doubledUpResult.CurrentItem.FirstCreativeDateText}}</span>
</div>
<div ng-show="doubledUpResult.CurrentItem.IsLastOccurrenceVisible">
<span style="color: #dd4f04;">Last Occurrence: </span>
<span>{{doubledUpResult.CurrentItem.LastPropertyName}}</span>
<span>{{doubledUpResult.CurrentItem.LastCreativeDateText}}</span>
</div>
<div ng-show="doubledUpResult.CurrentItem.HasACreative">
<span style="color: #dd4f04;">Total: </span>
<span>
{{doubledUpResult.CurrentItem.ActivityTotalText}}{{doubledUpResult.CurrentItem.ActivityFootnoteIndicator}}
</span>
</div>
<div ng-show="doubledUpResult.CurrentItem.IsAdvertiserVisible">
<span style="color: #dd4f04;">{{doubledUpResult.CurrentItem.EntityTypeDescription}}:</span>
<span>
<a ng-click="ctlr.OnEntityLinkClicked(doubledUpResult.CurrentItem)">
{{doubledUpResult.CurrentItem.EntityName}}
</a>
</span>
<span>{{doubledUpResult.CurrentItem.ExtraAdvertiserNote}}</span>
</div>
</div>
<div class="creative-thumbnail"
ng-show="doubledUpResult.CurrentItem.HasACreative">
<kmi-crv-thumbnail creative-id="doubledUpResult.CurrentItem.CreativeIdStr"
creative-type="doubledUpResult.CurrentItem.CreativeType"
size="ctlr.ThumbnailSize"
storage-provider="ctlr.StorageProvider"
base-path="'/KMI/IntelliDrive/ApplUI'"
style="margin: 0 auto; cursor:pointer;"
ng-click="ctlr.OnCreativeClicked(doubledUpResult.CurrentItem)"
is-delayed="'true'"></kmi-crv-thumbnail>
</div>
<div class="creative-item-button-container"
ng-show="doubledUpResult.CurrentItem.HasACreative">
<a ng-click="ctlr.OnCreativeClicked(doubledUpResult.CurrentItem)"
class="top-creatives-button current-item"
ng-show="doubledUpResult.CurrentItem.IsQuickViewVisible"
ng-style="ctlr.GetStyle(doubledUpResult.CurrentItem, 'QuickView')">Quick View</a>
<a ng-click="ctlr.OnViewInLibraryClicked(doubledUpResult.CurrentItem)"
class="top-creatives-button current-item"
ng-show="doubledUpResult.CurrentItem.CanViewInLibrary"
ng-style="ctlr.GetStyle(doubledUpResult.CurrentItem, 'ViewInLibrary')">View in Library</a>
<a ng-click="ctlr.OnAddToCartClicked(doubledUpResult.CurrentItem)"
class="top-creatives-button current-item"
ng-show="doubledUpResult.CurrentItem.CanAddToShoppingCart"
ng-style="ctlr.GetStyle(doubledUpResult.CurrentItem, 'AddToCart')">Add to Cart</a>
</div>
</div>
<!--Previous Item-->
<div id="previousItemContainer">
<div class="creative-item-heading-container"
ng-show="doubledUpResult.PreviousItem.HasACreative">
<span>{{doubledUpResult.PreviousItem.Headline}}</span><br />
<div ng-show="doubledUpResult.PreviousItem.IsFirstOccurrenceVisible">
<span style="color: #dd4f04;">First Occurrence: </span>
<span>{{doubledUpResult.PreviousItem.FirstPropertyName}}</span>
<span>{{doubledUpResult.PreviousItem.FirstCreativeDateText}}</span>
</div>
<div ng-show="doubledUpResult.PreviousItem.IsLastOccurrenceVisible">
<span style="color: #dd4f04;">Last Occurrence: </span>
<span>{{doubledUpResult.PreviousItem.LastPropertyName}}</span>
<span>{{doubledUpResult.PreviousItem.LastCreativeDateText}}</span>
</div>
<div ng-show="doubledUpResult.PreviousItem.HasACreative">
<span style="color: #dd4f04;">Total: </span>
<span>
{{doubledUpResult.PreviousItem.ActivityTotalText}}{{doubledUpResult.PreviousItem.ActivityFootnoteIndicator}}
</span>
</div>
<div ng-show="doubledUpResult.PreviousItem.IsAdvertiserVisible">
<span style="color: #dd4f04;">{{doubledUpResult.PreviousItem.EntityTypeDescription}}:</span>
<span>
<a ng-click="ctlr.OnEntityLinkClicked(doubledUpResult.PreviousItem)">
{{doubledUpResult.PreviousItem.EntityName}}
</a>
</span>
<span>{{doubledUpResult.PreviousItem.ExtraAdvertiserNote}}</span>
</div>
</div>
<div class="creative-thumbnail"
ng-show="doubledUpResult.PreviousItem.HasACreative">
<kmi-crv-thumbnail creative-id="doubledUpResult.PreviousItem.CreativeIdStr"
creative-type="doubledUpResult.PreviousItem.CreativeType"
size="ctlr.ThumbnailSize"
storage-provider="ctlr.StorageProvider"
base-path="'/KMI/IntelliDrive/ApplUI'"
ng-click="ctlr.OnCreativeClicked(doubledUpResult.PreviousItem)"
style="margin: 0 auto; cursor:pointer;"
is-delayed="'true'"></kmi-crv-thumbnail>
</div>
<div class="creative-item-button-container"
ng-show="doubledUpResult.PreviousItem.HasACreative">
<a ng-click="ctlr.OnCreativeClicked(doubledUpResult.PreviousItem)"
class="top-creatives-button previous-item"
ng-show="doubledUpResult.PreviousItem.IsQuickViewVisible"
ng-style="ctlr.GetStyle(doubledUpResult.PreviousItem, 'QuickView')">Quick View</a>
<a ng-click="ctlr.OnViewInLibraryClicked(doubledUpResult.PreviousItem)"
class="top-creatives-button previous-item"
ng-show="doubledUpResult.PreviousItem.CanViewInLibrary"
ng-style="ctlr.GetStyle(doubledUpResult.PreviousItem, 'ViewInLibrary')">View in Library</a>
<a ng-click="ctlr.OnAddToCartClicked(doubledUpResult.PreviousItem)"
class="top-creatives-button previous-item"
ng-show="doubledUpResult.PreviousItem.CanAddToShoppingCart"
ng-style="ctlr.GetStyle(doubledUpResult.PreviousItem, 'AddToCart')">Add to Cart</a>
</div>
</div>
</div>
</slick>
</div>
</div>
</div>
When the action from another directive is fired, all I want to do is make a Web API call, which brings back a new data set that the slider is then rebound to. My problem is I can't figure out how to do the rebinding without breaking the slider.
Thanks.
i'm using angular-gridster for designing dynamic user dashboard. how can we make gridster widget data content responsive while resizing widget callback, can any one suggest me how to make it responsive.
<div id="gridster" >
<div gridster="gridsterOpts">
<ul>
<li gridster-item="widget" ng-repeat="widget in DashboardControls">
<div class="box">
<div class="box-header">
<h3 style="width: 100%;word-break: break-all; table-layout: fixed;">{{widget.ControlobjectName}}</h3>
<div class="box-header-btns pull-right">
<a title="settings" data-toggle="modal" data-target="#widgetSettingModal" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
<a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
</div>
</div>
<div class="box-content">
<div>
<img class="img-responsive" ng-src="{{widget.ThumbnailPath}}" />
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
You'll have to create a custom directive that is embedded into the widgets (or multiple custom directives). This custom directive can contain logic that responds to the data and changes the content of the widgets.