Since it requires cordova I guess a code pen will not work. So I went ahead and created a repo for you to check.
REPO => deleted
Just take some pictures with the camera and press start uploading. The view does not update, but if you check the console with chrome inspect the logs show progress is being made. The images will be uploaded to a test API of mine so dont worry about that. I’ve tested it on an android samsung galaxy S7 edge with android 6.0.1.
I hope you can help me because this shit is messing me up
I guess that most probably the problem that you’re observing is caused by this:
however you might also check if something like this will work:
ft.onprogress = e => this.onProgress(e);
I already had a similar problem and it was caused by the fact that the value of this inside the handler was set to the global Window object instead of the object itself.
If the issue that you’re observing is caused by the (unexpected) value of this then the change that I suggested might resolve it. I created a simple (maybe too oversimplified) test to illustrate this. You can check it out in this demo environment.
if you need update DOM you can use native js. No need to clutter up the code.
However, you can read about zone.js with Angular 2 for the DOM forcing update. Google it.
Hi all, i solved case with progress bar for Transfer.upload, with synchronouse upload of lots of files and for each file own progressbar.
Some structure for files to upload:
export interface processedFile {
path?:string, //dir of files lib
size?:number, //size of file
file?:string,
progress?:string, //% of upload
done?:boolean //flag with responce from server about md5 checksum is ok
}
export interface processedFiles extends Array{} //array of files to upload
public processedFiles:processedFiles = [] //array of files to upload
this.uploadTo(this.processedFiles[i], userData) //start to upload file of files array
onProgress(item, progress) { //item - here will be item of files array and progress digit
item.progress = progress; //
}
uploadTo(item:processedFile, userData: AccountData) {
return new Promise((resolve, reject) => {
let fdata: Url = {file:item.file, path:item.path}; // url model
let fileTransfer = new Transfer();
fileTransfer.onProgress((progressEvent: any ) => {
if (progressEvent.lengthComputable) {
let progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
this.onProgress(item, progress) //**here trick, which allow progress to get visibility**
}
});
fileTransfer.upload(this.ops.getFilenameFromURL(fdata), this.vars.premoveexpertpl, {
fileName: fdata.file,
params: {f: "upload", u: userData.username, p: userData.password}
}, true).then((ret) => {
let res: FileUploadResult = <FileUploadResult>ret;
let url:Url = this.ops.getFileNameFromPath(res.headers['file']);