I currently have the following html which consists of 3 buttons (1 hidden). I have a button which triggers a hidden button which is used to select a file to upload and I have a third button which is used to call upload and send the data to the server. I would like to change this so that after selecting a file, the file is automatically uploaded. I am having issues triggering the upload button when a file is selected (and then I will hide the upload button once I have the automatic upload functionality working). I have tried using the onchange event to accomplish this but with no success
<div class="col-xs-12" style="margin-top:250px">
<div class="col-xs-4" align="center" style="padding-left:290px">
<button class="btn btn-default" ng-click="newProject()">New Project</button>
</div>
<form class="col-xs-4" align="center"
ng-controller="CsvImportController" style="display: inline-block;padding-left:200px" id="csvForm">
<a href="#" class="btn btn-default btn-file"
onclick="document.getElementById('fileBrowser').click(); return false;">Select
CSV File</a>
<button id="submitCsv" class="btn btn-default" ng-click="upload()">Upload</button>
</form>
<div class="col-xs-4" align="center" style="padding-left:110px">
<a class="btn btn-default">Browse
Projects</a>
</div>
</div>
<br>
<br>
<input id="fileBrowser" style="visibility: hidden;"
class="btn btn-default btn-file" type="file" id="file" file-input="files" onchange="document.getElementById('submitCsv').click(); return false;"/>
See this answer for some libraries that will handle all the upload functionality for you as well as provide some other nice features.
onchange will not work on <input type="file"/> as it will not register a change when you select a file. ng-click will not work also as it will trigger when the input is first clicked, not when a file is selected.
You also can't apply any styles to an <input type="file" /> either, so I get what you're trying to do here, but <input type="file" /> does not offer much functionality which is really unfortunate.
You also have 2 ids defined on your hidden input. Make sure there is only one id so that you can call it correctly.
Related
I am new in angular JS, working with existing project on angular 1.2.16
please check the code sample
<form role="form" name="UserCreateForm"
novalidate class="biocheck-form">
<div class="row">
<div class="col-xs-4"> <input class="input-forms" placeholder="Usuario" aa-field-group="UserCreate.data.username" type="text" aa-label="Usuario"
required maxlength="20"> </div>
<div class="col-xs-4"> <input class="input-forms" placeholder="ejemplo#mail.com" aa-field-group="UserCreate.data.email" type="email"
aa-label="Email" required> </div>
<div class="col-xs-4"> <input class="input-forms" placeholder="" aa-field-group="UserCreate.data.newPassword" type="password" aa-label="Contraseña"
required> </div>
</div>
Rol
</div> <button type="submit" class="btn btn-primary pull-right" aa-submit-form="UserCreate.on.doUserCreate()"> Guardar </button> <button class="btn btn-cancel pull-right" ng-click="UserCreate.on.toUserList()"> Cancelar </button> </form>
I want to check debug the next flow of the code. If anything is unclear please comment.
I want to check how it is save the data in DB this project used yii for handling server side request.
Thanks
If i understand correctly you need to open the developer tools in your browser, go to the Source tab and find the js file that holds the function on your ng-click. Then put a breakpoint there and click the button. The browser should stop in the breakpoint and with F10 you can go line by line to your code.
I have an Angular directive that includes a form with a datepicker. I am trying to create a function to keep the button click from calling submit on the form. I can not determine where to find the .opened attribute. When I was performing the open with ng-click everything worked. Below is sample code.
HTML:
<form ng-submit="editAlert.$valid && vm.handleSubmit()" name="editAlert" id="editAlert" class="buffer-bottom" novalidate>
<div class="form-group">
<label class="control-label" for="effectiveDate">Effective Date</label>
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="MM-dd-yyyy" is-open="dpEffectiveDate.opened" ng-model="alertMsg.effectiveDateFmt" name="effectiveDate" id="effectiveDate">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="vm.openDateHandler($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
<p class="help-block" ng-show="editAlert.effectiveDate.$error.endBeforeStart">Effective date must be before expire date.</p>
</div>
</form>
I also tried passing dpEffectiveDate into the openDateHandler function.
Below is my Typescript function
openDateHandler = ($event) => {
$event.preventDefault();
//dpDate.opened = !dpDate.opened;
}
How do I access the .opened attribute?
If all you are trying to do is prevent the submit behaviour, simply add 'type="button"' to your button element.
<button type="button" class="btn btn-default" ng-click="vm.openDateHandler($event)">
By default, a button inside a form will act as a submit button unless it's given a different type.
You shouldnt need to mess with the opened state of a date picker to prevent a form submitting.
I need some help.i need to display multiple image and when also user will select the image it will push into array.I am explaining my code below.
<div class="input-group bmargindiv1 col-md-12" ng-repeat="mul in mulImage">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Image{{$index+1}}:</span>
<div>
<div ng-class="{'myError': billdata.upload_{{$index}}.$touched && billdata.upload_{{$index}}.$invalid }">
<input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}" ng-model="mul.image" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-min-height="400" ngf-resize="{width: 400, height:400}" ngf-select="onFileSelect1('upload_{{$index}}',mul.image);">
<div style="clear:both;"></div>
<input type="text" id="hidn_{{$index}}" ng-model="attach_{{$index}}" style="display:none" />
</div>
</div>
<span class="input-group-btn" ng-show="mulImage.length>0">
<img ngf-thumbnail="mul.image" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;">
<input type="button" class="btn btn-success" name="plus" id="plus" value="+" ng-click="addNewImageRow(mulImage);" ng-show="$last"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-" ng-show="mulImage.length>1" ng-click="deleteNewImageRow(mulImage,$index);">
</span>
</div>
</div>
Here i am using ng-file-upload to upload the multiple image by plus button.When user will select the image from local drive the the images are displaying.But there is an additional case i have some image name i need to display those first and if user will select more it can be also possible.
$scope.mulImage=[];
$scope.mulImage.push({'image':null});
$scope.addNewImageRow=function(mulImage){
mulImage.push({'image':null});
}
$scope.deleteNewImageRow=function(mulImage,index){
mulImage.splice(index,1);
console.log('file',$scope.mulImage[0]['image'].name);
}
The above is my controller side code.
var arr=["10lx18i3ciyhkt9_de021b24.jpg", "ajqgis4v1wi2j4i_a6d6c48a.jpg", "7pxknunjop9cnmi_silu nana.jpg"]
Suppose i have the above images before.When the page will refresh the first 3 images will display to user like upload/10lx18i3ciyhkt9_de021b24.jpg and 3 image row also will create.if user wants to add/delete it can be also possible.Please help me.
Can anyone please suggest me How to implement a POP UP function in Angular + Node js?
I want to implement a login which should pop up when the user clicks login button.
Thanks
Depends on what CSS framework you are using. I often use Bootstrap, and the ui-bootstrap directives. This allows easy modal dialog display.
This is dummy html with bootstrap content that will trigger pop up on button click. You will notice I've placed ng-click directive on the login button, so you should just create angular function on your controller that is combined with this view.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modalExample">Login modal</button>
<div class="modal fade modalExample" tabindex="-1" role="dialog" aria-labelledby="myModallable">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form>
<div class="form-group">
<input type="email" class="form-control" ng-model="username" placeholder="Username" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" ng-model="password" />
</div>
<div class="form-group">
<button class="btn btn-default" ng-click="login(username,password)">Login</button>
</div>
</form>
</div>
</div>
</div>
This will handle your problem on the client side, and related to Node.js I suppose you will have some api controller that will listen for the request that you can send from angular factory that represents service.
Several ways of doing this either with jQuery or angular.js.
ngDialog plugin is available you can go through it if you want popup with pure angular.
I have a form which is dynamically generating the fields, I am using ng-form for this. The form has an ng-repeat for input fields and the main form has a 'Save' button.
i.e when one of the input fields is dirty and has content, the save button should be enabled and should be disabled otherwise.
Here is my HTML Code :
<form class="form-horizontal" name="$parent.fSForm" novalidate ">
<fieldset class="form-group pl-sm" ng-repeat="fs in list track by $index">
<ng-form name="innerForm">
<div class="col-md-5">
<input type="text" class="form-control" autocomplete="off" name="fsl" ng-change="fileChanged()" ng-model="fs.path" placeholder="Add new here">
</div>
</ng-form>
</fieldset>
<a class="prop-toggle ng-binding" href="" ng-click="addNew()">Add More</a>
</form>
</div>
<div class="footer">
<span>
<button type="button" class="btn" ng-click="close()">Cancel</button>
</span>
<span>
<button type="submit" class="btn btn-primary" ng-click="save()" ng-disabled="fSForm.$error.fooname">Save</button>
</span>
</div>
So for my save button to be disabled when the form loads initially how should I go about validating that with an ng-form present? The save should be enabled when one of the input fields has some text in it. not sure how we can handle ng-disabled with ng-form within a form save button