Comments (3)
I am trying to show progress per file. The events are trackable post submission. Need a way to update the preview template to show % progress.
function onUploadFileProgress(fileObj, event) {
fileObj.uploadFileProgress = ((event.loaded / event.total) * 100);
console.log('UploadProgress -> ' + fileObj.key + ' : ' +
fileObj.uploadFileProgress
);
}
/**
* Upload Files
*/
function uploadFiles() {
angular.forEach($scope.files, function(fileObj) {
var UploadFileAPI = $resource(
vm.uploadPath, {},
{
upload: {
method: 'POST',
isArray: false,
uploadEventHandlers: {
progress: function(event) {
onUploadFileProgress(fileObj, event);
}
},
transformRequest: angular.identity,
headers: {
'Content-Type': undefined,
'FileName': fileObj.lfFile.name,
'FileSize': fileObj.lfFile.size
}
}
}
);
var uploadData = new FormData();
uploadData.append('file', fileObj.lfFile);
var fileData = angular.toJson({
'FileName': fileObj.lfFile.name,
'FileSize': fileObj.lfFile.size
});
uploadData.append('fileData', fileData)
var toast = $mdToast.simple()
.position('top right')
.hideDelay(1000);
UploadFileAPI.upload(uploadData).$promise.then(function(response) {
if (response.file.FileID) {
toast.textContent(response.file.DisplayFileName + ' Uploaded Successfully!');
$mdToast.show(toast);
} else {
toast.textContent('File upload Failed!!!');
$mdToast.show(toast);
}
}, function() {
toast.textContent('File upload Failed!!!');
$mdToast.show(toast);
});
});
}
from angular-material-fileinput.
var lfId = genLfObjId();
var lfFileObj = {
"key":lfId,
"lfFile":lfFile,
"lfFileName":lfFileName,
"lfDataUrl":lfDataUrl,
"counterId" : 'counter'+lfId
};
var elPreview = angular.element(tplPreview);
var fileProgressId = lfFileObj.key + '-uploadFileProgress';
lfFileObj.uploadFileProgress = 0;
scope[lfFileObj.counterId] = 0;
$interval(function() {
scope[lfFileObj.counterId] = lfFileObj.uploadFileProgress;
scope.$digest();
}, 100, 0, false);
var elFooter = angular.element('<div class="lf-ng-md-file-input-frame-footer"><md-progress-linear id="' + fileProgressId + '" md-mode="determinate" value="{{'+lfFileObj.counterId+'}}"></md-progress-linear><div class="lf-ng-md-file-input-frame-caption">' + lfFile.name + '</div></div>');
The above approach new needs a bit of deeper angular skills to improve the hotch-potch $interval code i hacked in.
from angular-material-fileinput.
Hi sillysachin ! thanks a a lot for your precious suggestions !!
I am busy at work recently ... when i have free time i will try to implement this as soon as i can !!
from angular-material-fileinput.
Related Issues (20)
- like ng-change on fileinput HOT 4
- Getting warning when I add angular-material-fileinput in my code
- [FEATURE] Add return check to lfOnFileRemove event HOT 1
- Any update in angular 2
- Error on Load: Trying to load lfNgMdFileinput.html? HOT 1
- Unhandled exception if files is not an array
- Zip file previews binary content
- lf-required with condition
- Convert files to base64 format
- Show preview file without binary data
- Cannot read property 'name' of undefined HOT 2
- onSubmitClick with parameters
- "Adobe PDF Document - Access denied." Pop-up when previewing a PDF on IE11
- "Choose Files" still showing ontop of BROWSE button
- Sketch files freeze the browser
- Add lf-required Conditionally based on value HOT 1
- error when using it with angular 4 HOT 1
- How can use multiple image input on same page ? HOT 1
- Add support for npm HOT 1
- Selecting directories
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-material-fileinput.