How to get complete file select event in angularjs
It currently looks like what the brand listing page looks like.
when the user clicks the "Select Image" button, I set updateMode = 1, making the delete / unload button visible.
The problem is that the user sometimes does not select the image after clicking the download button, but instead cancels the cancellation in the file selection window. this time also the delete and load button becomes visible. I want to avoid this.
Also when the user clicks on delete, I want the input text to go blank.
This is my HTML.
<tr ng-repeat="b in Brands | filter:SearchText |orderBy:'name'">
<td>
<span data-ng-hide="editMode">{{b.name}}</span>
<input type="text" data-ng-show="editMode" data-ng-model="b.name" data-ng-required />
<input type="text" data-ng-show="editMode" data-ng-model="b.image" data-ng-required />
<br><br>
<input type="text" ng-model="b.files[0].name" readonly="readonly">
<button ngf-select ng-model="b.files" class="btn btn-success btn-sm" ng-click="uploadMode=1">
<span class="glyphicon glyphicon-picture"></span> Pick Image
</button>
<button data-ng-hide="!uploadMode" class="btn btn-danger btn-sm" ng-click="uploadMode=0">
<span class="glyphicon glyphicon-trash"></span> Delete
</button>
<button data-ng-hide="!uploadMode" class="btn btn-info btn-sm" ng-click="upload(b.files, b.image)">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
</td>
<td><img src="http://localhost/{{ b.image }}" alt="" border=3 height=75 width=75><br><br>
</td>
and this is the file upload code.
$scope.upload = function (files, path) {
//alert ('upload');
//alert (path);
//alert (files);
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
Upload.upload({
url: '/cgi-bin/upload.pl',
fields: {
'FilePath': path
},
file: file
}).progress(function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
$scope.log = 'progress: ' + progressPercentage + '% ' +
evt.config.file.name + '\n' + $scope.log;
}).success(function (data, status, headers, config) {
$timeout(function() {
$scope.log = 'file: ' + config.file.name + ', Response: ' + JSON.stringify(data) + '\n' + $scope.log;
});
})
.error(function (data, status, headers, config) {
alert ('Error');
});
}
}
};
what changes should I make to get the above functionality. please, help.
source to share
You need to use ngf-change
the ng-file-upload plugin available
Instead, ng-click
change it to ngf-change
in your HTML markup
<button ngf-select ng-model="b.files" ngf-change="fileSelected($files, $event, b)">
<span class="glyphicon glyphicon-picture"></span> Pick Image
</button>
Pass the ng-repeat object as the third parameter to the function fileSelected
and in the controller it will define it as
$scope.fileSelected = function(files, events, b) {
if (files.length) {
b.uploadMode = true;
} else {
b.uploadMode = false;
}
};
Here we check if the file is an object empty or not (Note: ngf-change is called when the file selection dialog is opened and when the file is selected successfully) and set the uploadMode parameter to true or false.
For the functionality of the delete file, create a function that is called by clicking the Delete button and traverses the ng-repeat object
<button ng-if="b.uploadMode" ng-click="removefile(b)">
<span class="glyphicon glyphicon-trash"></span> Delete
</button>
There is a function defined in the controller removefile
where you delete the files object
$scope.removefile = function(b) {
delete b.files;
b.uploadMode = false;
};
See a working demo at http://plnkr.co/edit/zmZwiqJOLVILaCmc4uBQ?p=preview
source to share