Latest code which helps me in solving my problem
$scope.uploadedFiles = []; $scope.upload = function(files) { $scope.uploadedFiles = files; angular.forEach(files, function(file) { if (file && !file.$error) { if($scope.uploadedFiles.indexOf(file) == -1) { $scope.uploadedFiles.push(file); } file.upload = Upload.upload({ url: 'uploader', file: file, userId: $scope.user._id }); file.upload.then(function (response) { $timeout(function () { file.result = response.data.id; }); }, function (response) { if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data; }); file.upload.progress(function (evt) { file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total)); }); } }); console.log($scope.uploadedFiles); } $scope.removeUploadedFile = function(files, idx) { files.splice(idx, 1); console.log($scope.uploadedFiles); $scope.uploadedFiles = files; console.log($scope.uploadedFiles); }
.form-group .btn.btn-default.btn-file i.fa.fa-paperclip | Attach Files input(type='file', ngf-select='upload($files)',accept="text/plain, image/*", ng-model="files", ngf-multiple="true", ngf-max-size='10000000', ngf-keep="true", ngf-keep-distinct="true") p.help-block Max. 1MB br ul#files(ng-repeat="f in files", style='list-style-type: none; padding:0; margin:0;') li div {{f.name}} .pull-right {{f.size | bytes}} #[i.fa.fa-close(ng-click="removeUploadedFile(files, $index)")] div.progress(ng-show="f.progress >= 0") div(style="width:{{f.progress}}%", ng-bind="f.progress + '%'")
I'm using ng-file-upload for handling of file uploads. Everything is working fine except that I'm not able to access files in my controller.
Here is my controller code:
$scope.upload = function(files) {
uploadedFiles = files;
console.log($scope.files);
angular.forEach(files, function(file) {
if (file && !file.$error) {
file.upload = Upload.upload({
url: 'uploader',
file: file,
userId: $scope.user._id
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data.id;
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
});
file.upload.progress(function (evt) {
file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
});
console.log(uploadedFiles);
}
$scope.removeUploadedFile = function(files, idx) {
console.log(files);
files.splice(idx, 1);
uploadedFiles = files;
}
And my html code:
.form-group
.btn.btn-default.btn-file
i.fa.fa-paperclip
| Attach Files
input(type='file', name='attachment', ngf-select='upload($files)',accept="text/plain, image/*", ng-model="files", ngf-multiple="true", ngf-max-size='10000000', ngf-keep="true", ngf-keep-distinct="true")
p.help-block Max. 1MB
br
//- ul(ng-repeat='file in uploadedFiles', style='list-style-type: none; padding:0; margin:0;')
ul#files(ng-repeat='f in files', style='list-style-type: none; padding:0; margin:0;')
li
div
{{f.name}}
.pull-right
{{f.size | bytes}} #[i.fa.fa-close(ng-click="removeUploadedFile(files, $index)")]
div.progress(ng-show="f.progress >= 0")
div(style="width:{{f.progress}}%", ng-bind="f.progress + '%'")
If I print $scope.files
, it prints nothing.
Any pointers where am I doing wrong will be appreciated.
Update:
Why do I need to access $scope.files
? File upload functionalty is working fine but I need to pass uploaded files id to my backend systems for saving that id in my db. Now to do that I need some $scope
variable which contains updated list of files. Since I'm allowing the user to delete the uploaded file, I need some $scope
variable to be updated with the latest list of valid uploaded files. Let me know if it's still unclear.
There was some issues with ngf-keep which is fixed in version 7.0.12. Your original post should work now or you can follow this: https://jsfiddle.net/danialfarid/e7x1xs4a/
<button ngf-select="uploadFiles($files)" ngf-keep="true" multiple>Select Files</button>
$scope.uploadFiles = function(files) {
$scope.files = files;
console.log(files);
angular.forEach(files, function(file) {
if (file && !file.$error) {
file.upload = Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
file: file
});
file.upload.then(function (response) {"success"
}, function (response) {"error"});
file.upload.progress(function (evt) {"progress"});
}
});
}
I guess ng-file-upload updates the scope value after calling ngf-select function.
Althought I don't understand why you want to access $scope.files
in your updload function even though you can access the same value via function parameter. If you insist to use $scope.files
, you could wrap your logic by $timeout.
The sample code is like below.
$scope.upload = function(){
console.log('Outside $timeout :', $scope.files);
$timeout(function(){
console.log('Inside $timeout :', $scope.files);
});
}
When you need to access files
in ngf-select function, I recommend to use simply the function parameter.
When you want to access files
in other function, you can simply access $scope.files
.
edited :
If you want to update files every time you add a new file, you need to set $scope.files
outside the function scope and push new file in $scope.files
array $scope.files.push(file);
:
$scope.files = [];
function uploadFiles(files) {
angular.forEach(files, function (file) {
$scope.files.push(file);
if (file && !file.$error) {
file.upload = Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
file: file
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data;
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
});
file.upload.progress(function (evt) {
file.progress = Math.min(100, parseInt(100.0 *
evt.loaded / evt.total));
});
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.