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);
}
Related
On click of "Import CSV" button, i want to open a "Open file dialog explorer" and on selecting a file and click on open in the explorer, it should trigger a function call(function addCSVFile()). How do i achieve this?
My .js looks like below:
<input type="button" class="btn-import" id="loadFileXml" value="Import CSV"
onclick="document.getElementById('file').click();"/>
<input type="file" style="display:none;" id="file" name="file"/>
onchange and ng-change i have tried. but both are not working. Please help me on this.
Well I don't know angular js but this simple jquery should work if you don't mind using it...
<script src="https://ajax.googleapis.com/libs/jquery/3.4.1/jquery.min.js"></scipt>
<script type="text/javascript">
$(document).ready(function(){
$("#file").on('change',function(){
//do whatever you want
});
});
</script>
You can also use for attribute of label like this...
<label for="file" class="btn-import" id="loadFileXml">Import File</label>
<input type="file" style="display:none;" id="file" name="file"/>
I found a solution to solve this:
*.html i altered like below
<input type="button" class="btn-import" id="loadFileXml" value="Import CSV"
ng-click="vm.file_changed()"/>
<input type="file" style="display:none;" id="file" name="file" accept=".csv"
script-upload="vm.fileToUpload"/>
*.js
function file_changed() {
$('#file').click();
}
function onScriptSelect(files) {
var filename = files[0].name;
}
I am trying to bind file input type data to the angular.js controller but after submit the data is undefined.
<input type="file" name="image" class="form-control upload " ng-model="image" value="upload">
<input type="submit" ng-click="uploadimage()" value="upload" class="btn btn-default">
angular js controller is
//upload image
$scope.uploadimage = function() {
console.log($scope.image);
}
The file input type is missing from the ng-model directive, so you need to install a package for file uploads with AngularJS.
I am using the angular-file-upload.js .I would like to upload the 2 images in a form, 2 different file uploads and one form submit button.
In my controller:
var uploader = $scope.uploader = $fileUploader.create({
scope: $scope,
url:'upload.php',
autoUpload : true
});
uploader.addToQueue([uploader.queue[0].file]);
uploader.queue[0].upload();
amd my html is:
<input type="file" ng-file-select class="form-control"
ng-model="file_course_thumb_image" accept=".png, .jpg, .jpeg" />
<input type="file" ng-file-select class="form-control"
ng-model="file_course_thumb_image2" accept=".png, .jpg, .jpeg" />
when trying to upload only second file is uploaded ,but not both first and second files.
Any suggestions ..
I have fixed the issue by changes in the angular-file-upload.js #author Danial #version 1.2.8 .In addToQueue function add the condition to empty the queue .
if(this.queue.length == 0) {
this.queue = [] }
which can enable us to uploads multiple images at the time of form submit.
I want to create an file upload button with send some parameters
Here is my code:
it is not working for me.
could you help me?
<pre>
<input type="file" name="file"
onchange="angular.element(this).scope().uploadFile(this.files,project._id, activity._id, action.name, document._id)"/>
</pre>
Insert this HTML into your code where onFileSelect function will be called when file is selected.
<div class="col-xs-2 padding_sm" ng-file-select="onFileSelect($files,$index)"
multiple accept="image/*"></div>
I am an AngularJS newbie, and am having difficulty getting an AngularJS form to work correctly. Chrome Dev Tools tells me my module is not being loaded.
Below is my html; it is a div within a Wordpress template:
<div ng-app="contact" style="float: left;">
<form method="post" name="form" role="form" ng-controller="ContactFormController" ng-submit="form.$valid && sendMessage(input)" novalidate>
<p ng-show="success">Thanks for getting in touch!</p>
<p ng-show="error">Something wrong happened!, please try again.</p>
<legend>Contact</legend>
<fieldset>
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" ng-model="input.name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" ng-model="input.email" required>
</div>
<div>
<label for="messsage">Message:</label>
<textarea id="messsage" name="message" ng-model="input.message" required></textarea>
</div>
<div>
<label for="honeypot">I promise I'm not a bot</label>
<input type="text" id="honeypot" name="honeypot" ng-model="input.honeyPot">
</div>
</fieldset>
<button type="submit" name="submit" value="submit">Submit</button>
</form>
</div>
This is my angular code:
angular.module("contact", [])
.controller("ContactFormController", ['$scope', '$http', function($scope, $http) {
$scope.success = false;
$scope.error = false;
$scope.sendMessage = function( input ) {
$http({
method: 'POST',
url: 'http://alamanceforeducation.org/wp-content/themes/flex/library/scripts/processApplecartForm.php',
data: input,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
.success( function(data) {
if ( data.success ) {
$scope.success = true;
} else {
$scope.error = true;
}
} );
}
}]);
The code is adapted from a tutorial. Can anyone help me out with what I am doing wrong?
There's nothing wrong with your code in terms of the problem you are having. The problem is the order in which you are loading the scripts.
The order should be:
1- angular.js
2- any-angular-dependency.js
3- your-angular-app.js
this is a working copy of your code
I'm not including the form because is just to show you that it doesn't find your angular module because either you are not including it or is not loading correctly from cdn, you might want to download it to have it locally and include the <script src="angular.js"></script> tag
In order to add a new module you need to make sure that:
The JS file is properly loaded on your page together with the other modules and angular.js
The module is properly declared for example: angular.module('myModule').directive(....) is not a module declaration, because doesn't have the dependencies array like this: angular.module('myModule',[]).directive(....)
Add the dependency on the declaration of your app, or add the module as dependency of other which already is a dependency of your app:
angular.module('app',['app.my-directives']).config(...)-
angular.module('app.my-directives',[]).directive('SomeDirective',function(){})
Here I have a full example of a working application using angular-ui-route (I recommend you this routeProvider instead of the default provider, it's more expressive and robust), I hope it works for you, it has 2 states each one with different views, and several modules for directives and factories:
Images Gallery with AngularJS
Images Gallery with AngularJS Live
PS: ignore the web.js file, it's only for deploy the dist folder using Node.JS
I hope this solve your issue, please update the question with the plunker