My button :
<button class="btn btn-success btn-sm mr-1 mark-complete-btn " id="<%=photo.id %>">
Like <span id="likes-count-<%=photo.id %>"><%= photo.likes_count %></button>
I am using : document.getElementById('likes-count-' + currentElement).textContent++;
But above code giving nothing. I want to be the above span value increase by one. I did any mistake?
You need to update the text of the element. You are also trying to increase a string, not a number. Thirdly, this is not going to update the value on your server, so hopefully you are makings some sort of Ajax/Fetch call to update the backend.
function updateServer(id) {
/*
const data = {
liked: id
};
fetch('https://example.com/profile', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
*/
}
document.querySelectorAll('.mark-complete-btn').forEach(function(btn) {
function update() {
var span = btn.querySelector("span");
var cnt = Number(span.textContent) + 1;
span.textContent = cnt;
updateServer(btn.id);
btn.childNodes[0].nodeValue = "Liked ";
btn.removeEventListener("click", update);
}
btn.addEventListener("click", update);
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-success btn-sm mr-1 mark-complete-btn" id="photo1">
Like <span id="likes-count-photo1>">1</span></button>
<button class="btn btn-success btn-sm mr-1 mark-complete-btn" id="photo2">
Like <span id="likes-count-photo2>">3</span></button>
I think you are looking for something like this:
(function(window) {
all_btns = document.getElementsByTagName("button");
for(i=0; i< all_btns.length; i++){
btn = all_btns[i];
btn.onclick = function(){
this.childNodes[1].textContent++;
}
}
})(this);
<button id="123">
Like <span id="likes-count">8</span>
</button>
https://jsfiddle.net/yo687rvx/1/
Related
Attempting to post a comment on a portrait correctly using a JavasScript Frontend with a Rails backend. The comment is posting, however on the frontend its showing it incorrectly. When the user creates a comment, the comment does show however it always shows on the first portrait comment section when its posted. However once you re-fresh the page it shows under the correct portrait. I assume this is something to do with the way I am posting it to my backend in my POST. This is what my current portraits code looks like used to build the portraits...
const buildPortrait = (portrait) => {
let div = document.createElement('div')
div.className = 'card'
div.id = portrait.id
div.innerHTML = `
<i class="far fa-window-close fa-1x" id="delete"></i>
<img src= ${portrait.attributes.img_url} class="profile" alt="Avatar" >
<div class="container">
<h5 class='description'>Caption: ${portrait.attributes.description}</h5>
<form data-portrait=${portrait.id} class="comment-form">
<input
class="comment-input"
type="text"
name="comment"
placeholder="Add a comment..."
/>
<button class="comment-button" type="submit">Post</button>
</form>
<div class="likes-section">
<button class="like-button"> ${portrait.attributes.like} likes ♥</button>
</div>
</div>
`
cardContainer.appendChild(div)
listenForLikes(portrait)
commentSection(portrait)
listenForComment(portrait)
listenForEditComment(portrait)
listenForDelete(portrait)
}
Below is the code I am attempting to use to build the comment and the have the POST correctly...
//create comments
function commentSection(portrait){
const newUl = document.createElement('ul')
newUl.className = 'comments'
portrait.attributes.comments.map(comment => {
let li = document.createElement('li')
li.textContent = comment.content
newUl.appendChild(li)
const editBtn = document.createElement('button')
// editBtn.className = 'edit-button'
editBtn.dataset.commentId = comment.id
editBtn.innerHTML = `
<i class="fas fa-pen-square"></i>`
// li.appendChild(editBtn)
})
const currentCard= document.getElementById(portrait.id)
const description = currentCard.querySelector('.description')
description.after(newUl)
}
//event listen for comments
function listenForComment(portrait){
const portraitComment = document.getElementById(portrait.id)
const commentForm = portraitComment.querySelector('.comment-form')
commentForm.addEventListener('submit', (e)=> {
e.preventDefault()
postComments(e)
commentForm.reset()
})
}
//fetch comments
function postComments(e){
console.log()
data = {
content: e.target[0].value,
portrait_id: e.target.dataset.portrait
}
console.log(data)
fetch(`http://localhost:3000/comments`,{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: "application/json"
},
body: JSON.stringify(data)
})
.then(res => res.json())
.then(json => {
const ul = document.querySelector('ul')
const li = document.createElement('li')
li.textContent = json["data"].attributes.content
console.log(ul)
ul.appendChild(li)
})
}
Any advice is gratefully appreciated!!
Thanks!!
I am trying, on button click, to get the JSON version of my View Model from the value attribute or data attribute, and send it to my controller where it updates the model. Then with the new model send that to the view and have the process repeat if a button is clicked again.
The problem I am having is that the model reverts back to the original one, whenever my JS code tries to grab the updated model. It never can grab the update model that is passed into the view.
I would appreciate it if anyone could help me solve this problem!
Index.cshtml
#model BlujayProject.Models.ViewModels.IndexVM
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blujay Truck Control</title>
<script src="https://kit.fontawesome.com/c263a03295.js"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous" />
<link rel="stylesheet" href="/css/indexStyles.css" />
</head>
<body>
#{
BlujayProject.Models.ViewModels.IndexVM viewModelObject = #Model;
var jsonVMO = Json.Serialize(viewModelObject);
}
<div class="text-center">
<img class="responsiveLogo" src="~/images/BluJaySolutionsLogo.png" />
</div>
<div class="row text-center m-5">
<div class="col-6 border rounded-left p-5 mainBorderStyles">
<img src="/images/redLight.png" class="responsiveSemi" />
</div>
<div class="col-6 border rounded-right p-5 mainBorderStyles">
<img src="/images/Semi.png" class="responsiveSemi" />
</div>
</div>
<div class="row text-center">
<div class="col-6 btn-group-lg">
<button class="btn btn-danger btn-lg trafficButton" value=#jsonVMO id="redLight" onclick="getID(this.id);">
Red
</button>
<button class="btn btn-warning btn-lg trafficButton" value=#jsonVMO id="yellowLight" onclick="getID(this.id);">
Yellow
</button>
<button class="btn btn-success btn-lg trafficButton" value=#jsonVMO id="greenLight" onclick="getID(this.id);">
Green!
</button>
<button class="btn btn-outline-success btn-lg trafficButton" value=#jsonVMO id="greenLTurn" onclick="getID(this.id);">
Left Turn
</button>
</div>
<div class="col-6 btn-group-lg">
<button class="btn btn-primary btn-lg truckButton" type="submit" data-test=#jsonVMO value=#jsonVMO id="leftTurn" onclick="getID(this.id);">
Turn Left
</button>
<button class="btn btn-success btn-lg truckButton" type="submit" data-test=#jsonVMO value=#jsonVMO id="moveForward" onclick="getID(this.id);">
Drive
</button>
<button class="btn btn-danger btn-lg truckButton" type="submit" data-test=#jsonVMO value=#jsonVMO id="jackKnifeToStop" onclick="getID(this.id);">
Stop!
</button>
<button class="btn btn-primary btn-lg truckButton" type="submit" data-test=#jsonVMO value=#jsonVMO id="rightTurn" onclick="getID(this.id);">
Turn Right
</button>
</div>
</div>
<div hidden>
<div class="text-center mt-5">
<h2>#Model.vehicleStrategy.StateDescription.Replace("_", " ")</h2>
</div>
<div class="text-center">
<h2>#Model.signalStrategy.StateDescription.Replace("_", " ")</h2>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script>
// Get the current year for the copyright
$("#year").text(new Date().getFullYear());
</script>
<script src="/js/indexScript.js"></script>
</body>
HomeController.cs
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using BlujayProject.Models;
using BlujayProject.Models.ViewModels;
using BlujayProject.Models.VehicleInterfaces;
using BlujayProject.Models.Interfaces.SigInterfaces;
namespace BlujayProject.Controllers
{
public class HomeController : Controller
{
private readonly ILogger<HomeController> _logger;
Vehicle semiTruck;
Signal trafficLight;
IndexVM indexVM;
public HomeController(ILogger<HomeController> logger)
{
indexVM = new IndexVM();
semiTruck = new SemiTruck();
trafficLight = new TrafficLight();
_logger = logger;
}
public IActionResult Index(/*IndexVM indexVM*/)
{
indexVM = InitializeIndexView(indexVM);
trafficLight = new TrafficLight();
return View(indexVM);
}
#region Privacy View and Other Action Methods
public IActionResult Privacy()
{
return View();
}
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
public IActionResult Error()
{
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
#endregion
[HttpPost]
public ActionResult GetTruckButtonCommands(IndexVM indexVM)
{
if(ValidateSemiTruckResponse(indexVM))
{
indexVM.vehicleStrategy = PerformVehicleCommand(indexVM.StateOfAction, semiTruck);
}
return View("Index", indexVM);
}
[HttpPost]
public ActionResult GetTrafficLButtonCommands(IndexVM indexVM)
{
indexVM.signalStrategy = PerformSignalCommand(indexVM.StateOfAction, trafficLight);
return View("Index", indexVM);
}
#region State Changes and Operation Logic
public VehicleStrategyModel PerformVehicleCommand(string vehicleCommand, Vehicle vehicle)
{
switch (vehicleCommand)
{
case "rightTurn":
vehicle.performRightTurnAct();
break;
case "leftTurn":
vehicle.performLeftTurnAct();
break;
case "moveForward":
vehicle.performDriveAct();
break;
case "jackKnifeToStop":
vehicle.performStopAct();
break;
}
vehicle.VehicleStrategyModel.StateDescription = vehicle.VehicleStrategyModel.StateDescription.Replace(" ", "_");
return vehicle.VehicleStrategyModel;
}
public SignalStrategyModel PerformSignalCommand(string signalCommand, Signal signal)
{
switch (signalCommand)
{
case "greenLight":
signal.performGoAct();
break;
case "greenLTurn":
signal.performSideShiftAct();
break;
case "yellowLight":
signal.performSlowShiftAct();
break;
case "redLight":
signal.performStopAct();
break;
}
signal.SignalStrategyModel.StateDescription = signal.SignalStrategyModel.StateDescription.Replace(" ", "_");
return signal.SignalStrategyModel;
}
public bool ValidateSemiTruckResponse(IndexVM indexVM)
{
string signalState = indexVM.signalStrategy.State;
string semiTruckCommand = indexVM.vehicleStrategy.State;
if (signalState == "greenLight" && semiTruckCommand == "moveforward")
{
//Generate Error
return false;
}
if(signalState == "greenLTurn" && semiTruckCommand != "leftTurn")
{
//Generate an error
return false;
}
if (signalState != "greenLTurn" && semiTruckCommand == "leftTurn")
{
//Generate an error
return false;
}
if (indexVM.StateOfAction == "moveForward")
{
if(semiTruckCommand == "moveForward")
{
return false;
}
}
if(indexVM.StateOfAction == "jackKnifeToStop")
{
if (semiTruckCommand == "jackKnifeToStop")
{
return false;
}
}
return true;
}
#endregion
public IndexVM InitializeIndexView(IndexVM indexVM)
{
if (indexVM.IsInitialized != true)
{
IndexVM indexVMInit = new IndexVM();
VehicleStrategyModel vehicleStrategyModel = new VehicleStrategyModel();
SignalStrategyModel signalStrategyModel = new SignalStrategyModel();
indexVMInit.vehicleStrategy = vehicleStrategyModel;
indexVMInit.signalStrategy = signalStrategyModel;
if (indexVMInit.signalStrategy.State == null)
{
indexVMInit.signalStrategy.State = "greenLight";
indexVMInit.signalStrategy.StateDescription = "This_light_is_green!";
}
if (indexVMInit.vehicleStrategy.State == null)
{
indexVMInit.vehicleStrategy.State = "neutral";
indexVMInit.vehicleStrategy.StateDescription = "The_vehicle_is_Ready_to_Go!";
}
indexVMInit.IsInitialized = true;
return indexVMInit;
}
return indexVM;
}
}
}
IndexScript.js
var truckImage, elementIDn, jsObject;
function updateValues(value) {
$(`#leftTurn`).val(value);
$(`#leftTurn`).data('value', value.val);
}
// This is a function I created to get the id of the HTML tag so that I wouldn't have to write duplicate code
function getID(id) {
/*console.log(id);*/
elementID = id;
return id;
}
$(document).ready(function () {
$('.truckButton').click(function () {
/* console.log($(`#${elementID}`).data("test"));
jsObject = $(`#${elementID}`).data("test");
$(`#${elementID}`).data('test', jsObject); */
jsObject = JSON.parse($(`#${elementID}`).val());
/*jsObject = JSON.parse(document.getElementById(`${elementID}`).getAttribute("value"));*/
//adjusting JavaScrpt objects has to be lower case when converting to .NET Model
jsObject.stateOfAction = `${elementID}`;
console.log(jsObject);
$.ajax({
type: 'POST',
dataType: 'application/json; charset=utf-8',
url: '/Home/GetTruckButtonCommands',
data: jsObject,
/*success: setTimeout(function () {// wait for 5 secs(2)
location.reload(); // then reload the page.(3)
}, 2000),*/
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
return false;
});
});
$(document).ready(function () {
$('.trafficButton').click(function () {
/*var jsObject = JSON.parse($("#willWork").val());*/
jsObject = JSON.parse(document.getElementById(`${elementID}`).value);
//adjusting JavaScrpt objects has to be lower case when converting to .NET Model
jsObject.stateOfAction = `${elementID}`;
console.log(jsObject);
$.ajax({
type: 'POST',
dataType: 'application/json; charset=utf-8',
url: '/Home/GetTrafficLButtonCommands',
data: jsObject,
success: function (response) {
response ? alert("It worked!") : alert("It didn't work.");
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
return false;
});
});
The relevant Javascript follows below, but in short, the archive button works while the delete button does not. I've already tried moving the event handler to a different file which the HTML calls using script tags to see if that makes a difference, but it doesn't seem to, although I'm unsure if it's broken in the same way. Additionally, the actual functions associated with each event handler are practically the same, so it seems reasonable to rule out that the function itself causes the problem. Why are the two buttons performing differently?
const mongo = require('mongodb');
const config = require('../../javascripts/config.js'); //databaseAddress can now be found at config.databaseAddress()const mongo = require('mongodb');
const MongoClient = mongo.MongoClient;
const url = config.databaseAddress();
$(document).ready(function () {
$('#navbar-userSearch').addClass('active');
$('.archive-button').click(function () {
var id = $(this).attr('id').split('-').slice(-1)[0] ;
console.log('id', id);
var username = $('#username-' + id).val();
var csrf = $('#csrf').val();
var action = $(this).attr('id').split('-')[0];
console.log('username', username);
$.ajax({
url: '/'+action+'/'+username,
type: 'PUT',
data: {username: username, _csrf: csrf},
success: function(data) {
if (data.success) {
addMessage(data.message, true);
if (typeof data.redirect === 'string') {
setTimeout(function(){
window.location = data.redirect;
}, 2500);
}
} else {
addMessage(data.message, false);
}
},
error: function(err) {
addMessage('A network error might have occurred. Please try again.', false);
}
});
});
$('.delete-button').click(function() {
console.log("stop pushing my buttons");
var id = $(this).attr('id').split('-').slice(-1)[0] ;
console.log('id', id);
var username = $('#username-' + id).val();
console.log('username', username);
MongoClient.connect(url, { useNewUrlParser: true }, (err, client) => {
const db = client.db("paxpopulidb");
const id_query = {_id: id};
const username_query = db.collection("users").find(id_query, {_id: 0, username: 1});
const username = username_query.username;
if (username) {
if (username === "superadmin"){
console.log("You cannot delete the superadmin account.");
} else {
db.collection("registrations").deleteOne(username_query);
db.collection("users").deleteOne(username_query);
db.collection("schedules").deleteOne(username_query);
console.log("Deleted " + username + " from database.");
}}})
})});
The HTML uses Handlebars for templating and is as follows:
{{#each users}}
<div class='col-xs-12 col-ms-6 col-sm-4 col-md-3 col-lg-4 user-container tile-container' id='user-container-{{_id}}'>
<div class='tile user-tile' name="user-{{_id}}" data-id='{{_id}}'>
<div class='tile-icon' style='float: left'><img class='icon' src="/images/user.gif"></img></div>
<div class='user-header tile-header'>
<a data-toggle="modal" data-target='#user-modal-{{_id}}'>
<h4 class='tile-title'>{{#if fullName}}{{fullName}}{{else}}{{firstName}} {{lastName}}{{/if}}</h4>
</a>
<p class='tile-subtitle'>{{role}}<h class='small-text'>{{#if archived}}(archived){{/if}}</h></p>
</div>
</div>
<div id="user-modal-{{_id}}" class="user-item-modal modal fade" role="dialog">
<div class="modal-messages"></div>
<div class="modal-dialog modal-xs">
<div class="modal-content">
<div class="modal-header modal-title">
<button type="button" class="close" data-dismiss="modal">×</button>
{{#if fullName}}{{fullName}}{{else}}{{firstName}} {{lastName}}{{/if}}'s Profile
</div>
<div class="modal-body">
{{> profileTable}}
</div>
</div>
</div>
</div>
<div>
<input id='username-{{_id}}' type="hidden" value="{{username}}"></input>
<input id='requestToken-{{_id}}' type="hidden" value="{{requestToken}}"></input>
<input id='csrf' type="hidden" name="_csrf" value="{{csrfToken}}">
<center>
{{#isRegularUser role}}
<button id='registration-button-{{_id}}' class='btn btn-info btn-hg registration-button'>View/Edit Registration</button>
<button id='schedule-button-{{_id}}' class='btn btn-info btn-hg schedule-button'>View/Edit Schedule</button>
{{/isRegularUser}}
{{#ifNot archived}}
<button id='archive-button-{{_id}}' class='btn btn-warning btn-hg archive-button'>Deactivate</button>
{{else}}
{{/ifNot}}
{{#isRegularUser role}}
<button id='delete-button-{{_id}}' class='btn btn-danger btn-hg delete-button'>Delete User</button>
{{/isRegularUser}}
</center>
</div>
</div>
{{/each}}
In short, the above makes a small box with appropriate buttons for each user depending on their role attribute, but the only working button so far is archive-button (no event handlers exist for the other two yet) However, the delete-button actually displays, it's just that clicking it does nothing.
Your bracketing is wrong. You have the delete button event handler inside the archive button click handler. So the delete handler isn't added until you click on an archive button (and if you click on archive multiple times, the delete buttons will execute their code multiple times).
You would see this if you'd indented your code correctly (every programming editor has options to automate this for you).
It should be:
$(document).ready(function() {
$('#navbar-userSearch').addClass('active');
$('.archive-button').click(function() {
var id = $(this).attr('id').split('-').slice(-1)[0];
console.log('id', id);
var username = $('#username-' + id).val();
var csrf = $('#csrf').val();
var action = $(this).attr('id').split('-')[0];
console.log('username', username);
});
$('.delete-button').click(function() {
console.log("stop pushing my buttons");
var id = $(this).attr('id').split('-').slice(-1)[0];
console.log('id', id);
var username = $('#username-' + id).val();
console.log('username', username);
});
});
I have a number of buttons generated from a for loop as follows and the id = like:
<button type="submit" id = "like" class="btn btn-custom btn-sm like"><span id="tx-like">Like</span></button>
I have a script that changes the "like" to "unlike" and "unlike" to "like", it gets element by Id:
$( function() {
$('#like').click( function() {
var t = $("#tx-like").html();
if(t == 'Like'){
$("#tx-like").html("Unlike");
}else{
$("#tx-like").html("Like");
}
} );
} );
This is only functional on the first button since it taking the id. How I can get it functional on all buttons that are generated dynamically?
As said in comments above, you should not have multiple IDs in the same page.
You could use classes instead, but even if it would work, there is a better approach which is to use data-attributes.
// Retrieves all your elements using the `data-like` attribute.
const likes = document.querySelectorAll('[data-like]');
// For each element as `el`
likes.forEach(el => {
el.addEventListener('click', () => {
// Get its `data-like` value.
const { like } = el.dataset;
// If the value is 'false':
if (like === 'false') {
el.innerText = 'Dislike';
el.dataset.like = 'true';
return;
}
// Else...
el.innerText = 'Like';
el.dataset.like = 'false';
});
});
/* You can easily customize your elements according to their current state. */
.like[data-like="true"] {
border: solid 1px green;
}
.like[data-like="false"] {
border: solid 1px red;
}
<!-- Remove duplicate IDs and use `data-like` instead. -->
<button type="submit" class="btn btn-custom btn-sm like" data-like="false">Like</button>
<button type="submit" class="btn btn-custom btn-sm like" data-like="false">Like</button>
So i'm trying to get this uploader working, This is what i have at the moment
This is my html
<div class="row" ng-repeat="row in fileUploadRows">
<div ng-if="advanced_user" class="btn btn-info btn-sm" style="display:inline-block" ngf-select="uploadinv($file, $index)">Upload Attachment</div>
<p style="display:inline-block;" ng-if="row.fileName">Uploaded file: {{row.fileName}}
<button type="button" ng-click="deleteInvAttachment(event.filenameinv)" class="btn btn-danger btn-sm">
<i class="fa fa-trash-o"></i>
</button>
<button type="button" ng-click="addInvAttachment($index)" class="btn btn-info btn-sm">
<i class="fa fa-plus"></i>
</button>
<button type="button" ng-click="removeInvAttachment(row)" class="btn btn-danger btn-sm">
remove last attachment
</button>
</div>
And this is in my controller
$scope.fileUploadRows = [];
var fileDetails = {
fileName: $scope.event.filenameinv
}
$scope.fileUploadRows.push(fileDetails);
$scope.counter = 1;
$scope.addInvAttachment = function(index) {
var fileDetails = {
fileName: ''
}
$scope.fileUploadRows.push(fileDetails);
$scope.counter++;
}
$scope.removeInvAttachment = function(row) {
$scope.fileUploadRows.splice(row, 1);
}
Now what I've got at the moment works to an extent, I can click the plus button and it'll load a blank upload button on the html side, As well as a blank fileName in the {{fileUploadRows}} Now the issue i have is when i try and upload a new file. It replaces the old file (as well as the old string etc)
Heres my uploader
$scope.uploadinv = function (file, index) {
if (file && $scope.advanced_user) {
Upload.upload({
url: '',
data: {file: file}
}).then(function (resp) {
sweetAlert({title: "Attachment Saved", type: "success"});
}, function (resp) {
sweetAlert({title: "Attachment Not Saved", type: "error"});
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
$scope.event.filenameinv = evt.config.data.file.name
});
}
};
So how would i go about saving each file into the array?
Thanks
I strongly recommend you to use ng-file-upload : https://github.com/danialfarid/ng-file-upload
Very complete, supports drag and drop, image resizing, and many more.
It seems you might be using it (i noticed Upload service and the ngf-select directive)
If you are, check out ngf-change, and try binding your file input with ng-model, for $scope accessibility.