I have problem with angular directive, generally I would like upload files from multiple inputs using in every input[file] directive fileModal. I would like that every selected file will be push to objApply but problem is that only one file is push to array just selected. Could you help me how push multiple files to this array?
.directive('fileModel', ['$parse', function($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var objApply = [];
var parsedFile = $parse(attrs.fileModel);
var parsedFileSetter = parsedFile.assign;
element.bind('change', function() {
scope.$apply(function() {
objApply.push(element[0].files[0]);
parsedFileSetter(scope, objApply);
});
});
}
};
}])
<input type="file" name="file" file-model="file.upload"
class="newQuizImgQuestion">
<input type="file" name="file" file-model="file.upload"
class="newQuizImgQuestion">
I am attempting to access the form inside my directive for validation purposes, so I'd like access to $setPristine, however, I can't seem to figure out how to get the form if it's created using a templateUrl.
I have a plunker detailing the issue here: http://plnkr.co/edit/Sp53xzdTbYxL6DAue1uV?p=preview
I'm getting an error:
Controller 'form', required by directive 'testDirective', can't be found!
Here is the relevant Plunker code:
.js:
var app = angular.module("myApp", []);
app.directive("testDirective", function() {
return {
restrict: 'E',
scope: {},
templateUrl: "formTemplate.html",
require: "^form", // <-- doesn't work
link: function (scope, element, attrs, ctrl) {
console.log(ctrl);
scope.open = function() {
// Would like to have access to the form here
// ctrl.$setPristine();
}
},
controller: function($scope) {
$scope.firstName = "Mark";
$scope.save = function(form) {
console.log(form);
}
}
}
})
formTemplate.html:
<form name="testForm" ng-click="save(testForm)">
<input type="text" ng-model="firstName" />
<br>
<input type="submit" value="Save" />
</form>
How can I attach the form in formTemplate.html to the isolated scope of my directive?
http://plnkr.co/edit/41hhRPKoIsZ9C8Y9Yi87?p=preview
Try this in your directive:
var form1 = element.find('form').eq(0);
formCtrl = form1.controller('form');
console.log(formCtrl);
this should grab the controller for the form.
I want to compile a third-party api (uploadcare) to a directive.
The api will return the data info after uploaded in async then I want to do something with the return data in my controller but I have to idea how to pass the return data from directive to controller. Below is my code.
in js
link: function (scope, element, attrs) {
//var fileEl = document.getElementById('testing');
var a = function() {
var file = uploadcare.fileFrom('event', {target: fileEl});
file.done(function(fileInfo) {
//scope.$apply(attrs.directUpload)
//HERE IS MY PROBLEM.
//How can I get the fileInfo then pass and run it at attrs.directUpload
}).fail(function(error, fileInfo) {
}).progress(function(uploadInfo) {
//Show progress bar then update to node
console.log(uploadInfo);
});
};
element.bind('change', function() {a()});
}
in html
<input type="file" direct-upload="doSomething()">
in controller
$scope.doSomething = function() {alert(fileInfo)};
AngularJS allows to execute expression in $parent context with specified values, in your case doSomething().
Here's what you need to do that:
In directive definition, mark directUpload as expression:
scope: {
directUpload: "&"
}
In done callback, call:
scope.directUpload({fileInfo: fileInfo})
Update markup:
<input type="file" direct-upload="doSomething(fileInfo)">
To summorize: scope.directUpload is now a callback, which executes expression inside attribute with specifeid values. This way you can pass anything into controller's doSomething.
Read $compile docs for detailed explanation and examples.
Example you might find useful:
angular
.module("app", [])
.directive("onDone", function ($timeout) {
function link (scope, el, attr) {
$timeout(function () {
scope.onDone({
value: "something"
});
}, 3000)
}
return {
link: link,
scope: {
onDone: "&"
}
}
})
.controller("ctrl", function ($scope) {
$scope.doneValue = "nothing";
$scope.done = function (value) {
$scope.doneValue = value;
};
})
<body ng-controller="ctrl">
Waiting 3000ms
<br>
<div on-done="done(value)">
Done: {{doneValue}}
</div>
</body>
You can pass through an object to the scope of the directive using = within the directive to do two way data binding. This way you can make updates to the data within the directive on the object and it will be reflected in it's original location in the controller. In the controller you can then use $scope.watch to see when the data is changed by the directive.
Something like
http://plnkr.co/edit/gQeGzkedu5kObsmFISoH
// Code goes here
angular.module("myApp",[]).controller("MyCtrl", function($scope){
$scope.something = {value:"some string"}
}).directive("simpleDirective", function(){
return {
restrict:"E",
scope:{someData:"="},
template:"<button ng-click='changeData()'>this is something different</button>",
link: function(scope, iElem, iAttrs){
scope.changeData=function(){
scope.someData.value = "something else";
}
}
}
});
I am new to angular. I am trying to read the uploaded file path from HTML 'file' field whenever a 'change' happens on this field. If i use 'onChange' it works but when i use it angular way using 'ng-change' it doesn't work.
<script>
var DemoModule = angular.module("Demo",[]);
DemoModule .controller("form-cntlr",function($scope){
$scope.selectFile = function()
{
$("#file").click();
}
$scope.fileNameChaged = function()
{
alert("select file");
}
});
</script>
<div ng-controller="form-cntlr">
<form>
<button ng-click="selectFile()">Upload Your File</button>
<input type="file" style="display:none"
id="file" name='file' ng-Change="fileNameChaged()"/>
</form>
</div>
fileNameChaged() is never calling. Firebug also doesn't show any error.
I made a small directive to listen for file input changes.
View JSFiddle
view.html:
<input type="file" custom-on-change="uploadFile">
controller.js:
app.controller('myCtrl', function($scope){
$scope.uploadFile = function(event){
var files = event.target.files;
};
});
directive.js:
app.directive('customOnChange', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var onChangeHandler = scope.$eval(attrs.customOnChange);
element.on('change', onChangeHandler);
element.on('$destroy', function() {
element.off();
});
}
};
});
No binding support for File Upload control
https://github.com/angular/angular.js/issues/1375
<div ng-controller="form-cntlr">
<form>
<button ng-click="selectFile()">Upload Your File</button>
<input type="file" style="display:none"
id="file" name='file' onchange="angular.element(this).scope().fileNameChanged(this)" />
</form>
</div>
instead of
<input type="file" style="display:none"
id="file" name='file' ng-Change="fileNameChanged()" />
can you try
<input type="file" style="display:none"
id="file" name='file' onchange="angular.element(this).scope().fileNameChanged()" />
Note: this requires the angular application to always be in debug mode. This will not work in production code if debug mode is disabled.
and in your function changes
instead of
$scope.fileNameChanged = function() {
alert("select file");
}
can you try
$scope.fileNameChanged = function() {
console.log("select file");
}
Below is one working example of file upload with drag drop file upload may be helpful
http://jsfiddle.net/danielzen/utp7j/
Angular File Upload Information
URL for AngularJS File Upload in ASP.Net
https://github.com/geersch/AngularJSFileUpload
AngularJs native multi-file upload with progress with NodeJS
http://jasonturim.wordpress.com/2013/09/12/angularjs-native-multi-file-upload-with-progress/
ngUpload - An AngularJS Service for uploading files using iframe
http://ngmodules.org/modules/ngUpload
This is a refinement of some of the other ones around, the data will end up in an ng-model, which is normally what you want.
Markup (just make an attribute data-file so the directive can find it)
<input
data-file
id="id_image" name="image"
ng-model="my_image_model" type="file">
JS
app.directive('file', function() {
return {
require:"ngModel",
restrict: 'A',
link: function($scope, el, attrs, ngModel){
el.bind('change', function(event){
var files = event.target.files;
var file = files[0];
ngModel.$setViewValue(file);
$scope.$apply();
});
}
};
});
The clean way is to write your own directive to bind to "change" event.
Just to let you know IE9 does not support FormData so you cannot really get the file object from the change event.
You can use ng-file-upload library which already supports IE with FileAPI polyfill and simplify the posting the file to the server. It uses a directive to achieve this.
<script src="angular.min.js"></script>
<script src="ng-file-upload.js"></script>
<div ng-controller="MyCtrl">
<input type="file" ngf-select="onFileSelect($files)" multiple>
</div>
JS:
//inject angular file upload directive.
angular.module('myApp', ['ngFileUpload']);
var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
$scope.onFileSelect = function($files) {
//$files: an array of files selected, each file has name, size, and type.
for (var i = 0; i < $files.length; i++) {
var $file = $files[i];
Upload.upload({
url: 'my/upload/url',
data: {file: $file}
}).then(function(data, status, headers, config) {
// file is uploaded successfully
console.log(data);
});
}
}
}];
I've expanded on #Stuart Axon's idea to add two-way binding for the file input (i.e. allow resetting the input by resetting the model value back to null):
app.directive('bindFile', [function () {
return {
require: "ngModel",
restrict: 'A',
link: function ($scope, el, attrs, ngModel) {
el.bind('change', function (event) {
ngModel.$setViewValue(event.target.files[0]);
$scope.$apply();
});
$scope.$watch(function () {
return ngModel.$viewValue;
}, function (value) {
if (!value) {
el.val("");
}
});
}
};
}]);
Demo
Similar to some of the other good answers here, I wrote a directive to solve this problem, but this implementation more closely mirrors the angular way of attaching events.
You can use the directive like this:
HTML
<input type="file" file-change="yourHandler($event, files)" />
As you can see, you can inject the files selected into your event handler, as you would inject an $event object into any ng event handler.
Javascript
angular
.module('yourModule')
.directive('fileChange', ['$parse', function($parse) {
return {
require: 'ngModel',
restrict: 'A',
link: function ($scope, element, attrs, ngModel) {
// Get the function provided in the file-change attribute.
// Note the attribute has become an angular expression,
// which is what we are parsing. The provided handler is
// wrapped up in an outer function (attrHandler) - we'll
// call the provided event handler inside the handler()
// function below.
var attrHandler = $parse(attrs['fileChange']);
// This is a wrapper handler which will be attached to the
// HTML change event.
var handler = function (e) {
$scope.$apply(function () {
// Execute the provided handler in the directive's scope.
// The files variable will be available for consumption
// by the event handler.
attrHandler($scope, { $event: e, files: e.target.files });
});
};
// Attach the handler to the HTML change event
element[0].addEventListener('change', handler, false);
}
};
}]);
This directive pass the selected files as well:
/**
*File Input - custom call when the file has changed
*/
.directive('onFileChange', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var onChangeHandler = scope.$eval(attrs.onFileChange);
element.bind('change', function() {
scope.$apply(function() {
var files = element[0].files;
if (files) {
onChangeHandler(files);
}
});
});
}
};
});
The HTML, how to use it:
<input type="file" ng-model="file" on-file-change="onFilesSelected">
In my controller:
$scope.onFilesSelected = function(files) {
console.log("files - " + files);
};
I recommend to create a directive
<input type="file" custom-on-change handler="functionToBeCalled(params)">
app.directive('customOnChange', [function() {
'use strict';
return {
restrict: "A",
scope: {
handler: '&'
},
link: function(scope, element){
element.change(function(event){
scope.$apply(function(){
var params = {event: event, el: element};
scope.handler({params: params});
});
});
}
};
}]);
this directive can be used many times, it uses its own scope and doesn't depend on parent scope. You can also give some params to handler function. Handler function will be called with scope object, that was active when you changed the input.
$apply updates your model each time the change event is called
The simplest Angular jqLite version.
JS:
.directive('cOnChange', function() {
'use strict';
return {
restrict: "A",
scope : {
cOnChange: '&'
},
link: function (scope, element) {
element.on('change', function () {
scope.cOnChange();
});
}
};
});
HTML:
<input type="file" data-c-on-change="your.functionName()">
Working Demo of "files-input" Directive that Works with ng-change1
To make an <input type=file> element work the ng-change directive, it needs a custom directive that works with the ng-model directive.
<input type="file" files-input ng-model="fileList"
ng-change="onInputChange()" multiple />
The DEMO
angular.module("app",[])
.directive("filesInput", function() {
return {
require: "ngModel",
link: function postLink(scope,elem,attrs,ngModel) {
elem.on("change", function(e) {
var files = elem[0].files;
ngModel.$setViewValue(files);
})
}
}
})
.controller("ctrl", function($scope) {
$scope.onInputChange = function() {
console.log("input change");
};
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<h1>AngularJS Input `type=file` Demo</h1>
<input type="file" files-input ng-model="fileList"
ng-change="onInputChange()" multiple />
<h2>Files</h2>
<div ng-repeat="file in fileList">
{{file.name}}
</div>
</body>
Too complete solution base on:
`onchange="angular.element(this).scope().UpLoadFile(this.files)"`
A simple way to hide the input field and replace it with a image, here after a solution, that also require a hack on angular but that do the job [TriggerEvent does not work as expected]
The solution:
place the input-field in display:none [the input field exist in the DOM but is not visible]
place your image right after
On the image use nb-click() to activate a method
When the image is clicked simulate a DOM action 'click' on the input field. Et voilà!
var tmpl = '<input type="file" id="{{name}}-filein"' +
'onchange="angular.element(this).scope().UpLoadFile(this.files)"' +
' multiple accept="{{mime}}/*" style="display:none" placeholder="{{placeholder}}">'+
' <img id="{{name}}-img" src="{{icon}}" ng-click="clicked()">' +
'';
// Image was clicked let's simulate an input (file) click
scope.inputElem = elem.find('input'); // find input in directive
scope.clicked = function () {
console.log ('Image clicked');
scope.inputElem[0].click(); // Warning Angular TriggerEvent does not work!!!
};
Another interesting way to listen to file input changes is with a watch over the ng-model attribute of the input file. Of course, FileModel is a custom directive.
Like this:
HTML -> <input type="file" file-model="change.fnEvidence">
JS Code ->
$scope.$watch('change.fnEvidence', function() {
alert("has changed");
});
Hope it can help someone.
I have done it like this;
<!-- HTML -->
<button id="uploadFileButton" class="btn btn-info" ng-click="vm.upload()">
<span class="fa fa-paperclip"></span></button>
<input type="file" id="txtUploadFile" name="fileInput" style="display: none;" />
// self is the instance of $scope or this
self.upload = function () {
var ctrl = angular.element("#txtUploadFile");
ctrl.on('change', fileNameChanged);
ctrl.click();
}
function fileNameChanged(e) {
console.log(self.currentItem);
alert("select file");
}
Angular elements (such as the root element of a directive) are jQuery [Lite] objects. This means we can register the event listener like so:
link($scope, $el) {
const fileInputSelector = '.my-file-input'
function setFile() {
// access file via $el.find(fileInputSelector).get(0).files[0]
}
$el.on('change', fileInputSelector, setFile)
}
This is jQuery event delegation. Here, the listener is attached to the root element of the directive. When the event is triggered, it will bubble up to the registered element and jQuery will determine if the event originated on an inner element matching the defined selector. If it does, the handler will fire.
Benefits of this method are:
the handler is bound to the $element which will be automatically cleaned up when the directive scope is destroyed.
no code in the template
will work even if the target delegate (input) has not yet been rendered when you register the event handler (such as when using ng-if or ng-switch)
http://api.jquery.com/on/
You can simply add the below code in onchange and it will detect change. you can write a function on X click or something to remove file data..
document.getElementById(id).value = "";
In AngularJS, I'm using the approach described here to handle input type=file.
https://groups.google.com/forum/?fromgroups=#!topic/angular/-OpgmLjFR_U
http://jsfiddle.net/marcenuc/ADukg/89/
Markup:
<div ng-controller="MyCtrl">
<input type="file" onchange="angular.element(this).scope().setFile(this)">
{{theFile.name}}
</div>
Controller:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.setFile = function(element) {
$scope.$apply(function($scope) {
$scope.theFile = element.files[0];
});
};
});
As mentioned it's a bit of a hack, but it mostly works for my purposes. What I need however is a way to clear the file input after the upload has finished - ie: from the controller.
I could completely hack it and use jQuery or something to find the input element and clear it, but was hoping for something a little more elegant.
Upon a successful upload, I clear up the input type file elements explicitly from my controller, like so:
angular.forEach(
angular.element("input[type='file']"),
function(inputElem) {
angular.element(inputElem).val(null);
});
The input[type='file'] selector requires jQuery, but everything else is plain Angular.
I would definitely use directive for this kind of task.
http://plnkr.co/edit/xLM9VX
app.directive('fileSelect', function() {
var template = '<input type="file" name="files"/>';
return function( scope, elem, attrs ) {
var selector = $( template );
elem.append(selector);
selector.bind('change', function( event ) {
scope.$apply(function() {
scope[ attrs.fileSelect ] = event.originalEvent.target.files;
});
});
scope.$watch(attrs.fileSelect, function(file) {
selector.val(file);
});
};
});
note: it is using jquery for element creation.
my solution without using $scope.
app.directive('fileChange',['UploadService',function (UploadService) {
var linker = function (element, attrs) {
element.bind('change', function (event) {
var files = event.target.files;
UploadService.upload({'name':attrs['name'],'file':files[0]});
element.val(null); // clear input
});
};
return {
restrict: 'A',
link: linker
};
}]);
It might help you!!
HTML code sample
<input type="file" id="fileMobile" file-model="myFile">
<button type="button" class="btn btn-danger" id="i-agree" ng-click="uploadFile()"> Upload </button>
AngularJs code sample
$scope.uploadFile = function () {
var file = $scope.myFile;
mobileService.uploadBulkFile(file).then(function (resp) {
if (resp !== undefined) {
$('#fileMobile').val('');
}
});
};
You can use ID to reset file field.
<div class="col-md-8">
<label for="files">Select File</label>
<input type="file" id="file_upload" class="form-control">
</div>
After uploading clear it.
var fileElement = angular.element('#file_upload');
angular.element(fileElement).val(null);
Above example working good for me. Will work for you too.
In my case, I broadcast events when a file upload succeeds.
So my directive watches for the broadcast, and clears the selection.
app.directive("fileInput", function( APP_EVENTS ){
return{
require: "ngModel",
link: function postLink( scope, elem, attrs, ngModel ){
elem.on("change", function( e ){
var files=elem[0].files;
ngModel.$setViewValue( files );
});
scope.$on( APP_EVENTS.FILE_UPLOAD_SUCCESS, function( event ){
elem.val( null );
});
}
}
});
It's used like so:
<input type="file" name="myFieldName" ng-model="myModel" file-input/>