I am trying to show the input file name in a readonly text box.
As can be seen this is different from the custom input file of HTML.
So, I tried this.
<input type="text" readonly ng-model="name">.
<input style="display: none" id="upload" type="file" accept=".csv" onchange="angular.element(this).scope().fileNameChange(this)">
<button type="button" ng-click="clickUpload()">Browse</button>
$scope.fileNameChange = function(e) {
$scope.name=e.files[0].name
}
$scope.clickUpload = function(){
angular.element('#upload').trigger('click');
};
With this logic, say I first select 'inputFile1.csv', nothing is shown in the textbox.
Then I select another file 'inputFile2.csv', now 'inputFile1.csv' is shown in textbox.
Where am I going wrong? Also, is this the best way to implement this functionality?
Try this:
<input type="text" readonly ng-model="name">.
<input style="display: none" id="upload" type="file" accept=".csv" onchange="angular.element(this).scope().fileNameChange(this)">
<button type="button" ng-click="clickUpload()">Browse</button>
$scope.fileNameChange = function(e) {
// let the DOM process before letting angular do its thing
$timeout(function() {
$scope.name=e.files[0].name
});
}
$scope.clickUpload = function(){
angular.element('#upload').trigger('click');
};
I'm new to Angular.js and I would like to know how to upload an image within my ng-submit form. It works perfectly for the next based fields but with the file it only gives me the 'choose file' button without displaying it after hitting the submit button.
<form ng-submit="addartikel()">
<input type="text" placeholder="Bezeichnung" ng-model="newartikel.name" />
<input type="text" placeholder="Kategorie" ng-model="newartikel.kategorie" />
<input type="text" placeholder="Preis" ng-model="newartikel.preis" />
<input type="file" placeholder="Bild" ng-model="newartikel.thumb" />
<input type="submit" value="Artikel hinzufügen" />
As for the controller:
webShop.controller('InventarController', ['$scope', '$http', function($scope, $http){
$scope.addartikel = function(){
$scope.inventar.push({
name: $scope.newartikel.name,
kategorie: $scope.newartikel.kategorie,
preis: parseInt($scope.newartikel.preis),
thumb: $scope.newartikel.thumb,
available: true
});
Your help would be greatly appreciated :)
Use Angular File Upload.It is available in https://github.com/nervgh/angular-file-upload
I am trying to submit a form, but the values are always empty.
my HTML:
<form novalidate name="creditCardForm" id="creditCardForm" method="POST">
<input type="hidden" name="EPS_MERCHANT" value="{{credit.data.merchantId}}">
<input type="hidden" name="EPS_TIMESTAMP" value="{{credit.data.currentGMTTimestamp}}">
<input type="hidden" name="EPS_TYPE" value="{{credit.data.epsType}}">
<div class="text-center">
<button class="btn btn-primary" ng-click="credit.save()">Save</button>
</div>
</form>
and my js part:
function save(){
document.getElementById("creditCardForm").setAttribute("action", this.data.crnUrl)
document.forms["creditCardForm"].submit()
}
and from inspection, these fields all have values
but from the request, these fields are all empty:
update my question:
because this is a special form post that it will call NAB bank api to verify something, so I cannot put each fields into an object and do a ajax/$resource/$http call.
thanks
That's a not angular way to submit the form via action attribute. Use ng-submit form attribute and make a $http.post request async.
<form novalidate name="creditCardForm" id="creditCardForm"
ng-submit="saveCredit(creditCardForm)">
<!-- no input hidden -->
<div class="text-center">
<button class="btn btn-primary">Save</button>
</div>
</form>
And you dont need hidden inputs in this way.
If I get your question and your requirement correct. You should be using following way:
<form novalidate name="creditCardForm" id="creditCardForm" method="POST">
<input type="hidden" name="EPS_MERCHANT" ng-model="credit.data.merchantId">
<input type="hidden" name="EPS_TIMESTAMP" ng-model="credit.data.currentGMTTimestamp">
<input type="hidden" name="EPS_TYPE" ng-model="credit.data.epsType">
<div class="text-center">
<button class="btn btn-primary" ng-click="credit.save(credit.data)">Save</button>
</div>
</form>
This is assuming that credit is the alias for your controller.
I have tried to keep your ways of ng-click to call a method on controller. However with forms in angular, you can do the same via ng-submit directive also.
In your controller you will have something like:
$scope.save = function(data){
//use data here as you like
//data.merchantId and other fields
}
If you are using alias form, then use:
//vm or any other name you have for your `this` instance
vm.save = function(){
// use data here as you like
}
I want to try to fix your problem. The first thing that you have to do is add ng-model and ng-value in your form. For example:
view:
<form novalidate name="creditCardForm" id="creditCardForm" ng-submit="save()">
<input type="hidden" ng-model="credit_card.eps_merchant" name="eps_timestamp" ng-value="{{credit.data.merchantId}}">
<input type="hidden" ng-model="credit_card.eps_timestamp" name="eps_timestamp" ng-value="{{credit.data.currentGMTTimestamp}}">
<input type="hidden" ng-model="credit_card.eps_type" name="eps_type" ng-value="{{credit.data.epsType}}">
<div class="text-center">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
For the next you can create controller. For example:
angular controller:
angular.module('cartApp')
.controller('AddCreditCartCtrl', [
'$scope',
'$location',
'$http',
function($scope, $location, $http) {
$scope.credit_card = {};
$scope.credit.data = {
merchantId: 'your-merchant-id',
currentGMTTimestamp: 'your-currentGMTTimestamp',
epsType: 'your-epsType'
}
$scope.save = function () {
$http.post('/yourUrl', {credit_card: $scope.credit_card}).then(function(res){
// Successfully create data
},
function(response) {
// Failed to create data
});
}
}]);
I hope this can help you. :)
thanks every body above. just want to share the root cause
I have a directive called <credit-card></credit-card>, and inside this directive, I have the form, with both name and id to be creditCardForm, so when this directive is used in several places, and in the controller I use document.forms["creditCardForm"], js did not know which is the target form, and this results in empty values in the request
hope it can help someone with same problem
I am using ng-file-upload for uploading files. But am getting 5 popups for uploading files. How to resolve this. Below am giving am codes please check,
Html Code
<div class="" id="clickToUpload" ng-click="uploadFile()">Upload new file</div>
<input type="file" style="display:none" ng-model="picFile" name="file" class="uploadFile" onchange= "angular.element(this).scope().fileNameChanged(this)" />
controller.js
$scope.uploadOpgsFile = function(){
angular.element(document.querySelectorAll(".uploadFile")).click();
};
$scope.fileNameChanged = function(element){
console.log(element.files);
}
I have inputs in a web page without the form tag (useless to me).
How can I get their validity status inside the HTML ? This
<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myInput.$valid">
doesn't work.
I'm afraid that won't work without wrapping it in a form as you need to access those fields via the form's controller.
<form name="myForm">
<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myForm.myInput.$valid">
</form>
Should work.
If you're unable to use the form tag for any reason, you'll have to wire that up manually.