Only post data can not get the progress well

[seemtim]

hi,danialfarid
Your uploader is quite cool.
But when i use it to post a big data without any file or form data like this.

$upload.upload({
  url : 'xxx',
  method : 'POST',
  data : {
    image_name : 'xxx',
    image_base64 : 'this is a big image base64 string'
  }
}).progress(function(evt) {
  console.log(evt.loaded);
  console.log(evt.total);
});

the console shows that the evt.total is a right size.
but the evt.loaded also reached as big as the evt.total at the same time,no matter how slow i set my upload network speed.

so i can not get the right progress.

how to make it work well?

[danialfarid]

You are supposed to set your file as $upload.upload({..., file: myFile, ...}) rather than data.
If you want to send the file content use $upload.http() see #88

[seemtim]

Thanks danialfarid's reply~ but...

i try the #88 ‘s sample in my project like this

var fileReader = new FileReader();
fileReader.onload = function(e){
$upload.http({
    url: 'xxx',
    headers: {'Content-Type': oFile.type},
    data: e.target.result
  }).progress(function(evt) {
    console.log(evt.loaded);
    console.log(evt.total);
  })
};
fileReader.readAsArrayBuffer(_b64toBlob(oFile.base64.split(',')[1], oFile.type));

i convert the base64 to a blob and upload it(with a low network speed).
but the console also tell me twice right now, like this

174449     console.log(evt.loaded);
174449     console.log(evt.total);
174449     console.log(evt.loaded);
174449     console.log(evt.total);

i used chrome lastest. and the scripts tag is so

<script src='http://xxx/bower_components/danialfarid-angular-file-upload/dist/angular-file-upload-html5-shim.min.js'></script>
<script src='http://xxx/bower_components/angular/angular.min.js'></script>
<script src='http://xxx/bower_components/danialfarid-angular-file-upload/dist/angular-file-upload.min.js'></script>

what's wrong with me ~~

[danialfarid]

It might be that your server does not support progress response.
Try a simple file upload without converting the file and using $upload.upload() like demo or readme and see if the progress works there. If it works then it won't be your server issue.

If you see the demo page and select the second option for how to upload, it will actually use $upload.http() and it does report the progress event.

[seemtim]

I try the simple demo like the readme, just upload a file,
but it also response twice 100%.

we used nginx at the frontend, and unicorn at the backend.

I think that the progress event is also depended on the server configuration.
hope i can find a reference like #207

[nschurmann]

Happens the same here, a workaround is to set the method to PUT, in that way the progress callback is executed for me. I use a node.js with express 4.0 backend API.

[psahni]

I am using express.js as backend, and progress block is not getting called. I am uploading file directly to amazon s3

 scope.upload = upload.upload({
                        url: 'https://' + s3Params.bucket + '.s3.amazonaws.com/',
                        method: 'POST',
                        data: {
                            'key' : 'uploads/'+ Math.round(Math.random()*10000) + '$$' + file.name,
                            'acl' : 'public-read',
                            'Content-Type' : file.type,
                            'AWSAccessKeyId': s3Params.AWSAccessKeyId,
                            'success_action_status' : '201',
                            'Policy' : s3Params.s3Policy,
                            'Signature' : s3Params.s3Signature
                        },
                        file: file,
                        headers: { "x-amz-server-side-encryption": 'AES256', 'Content-Type' : 'multipart/form-data'}
                    }).progress(function(evt){
                        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                        file.progress =  parseInt(100.0 * evt.loaded / evt.total);
                    }).success(function(){

})

[danialfarid]

For amazon S3 upload the demo page now has the option for S3 upload and the progress bar is working. You can try it out and if it works on your S3 bucket then compare your code with the demo see which parts you are doing differently.

[edamron]

Hello.

I'm experiencing this same issue. I'll drop some additional code in below, but as a general question, if I'm uploading data to an internal file service API created in .NET by one of my colleagues, is there something he needs to do on his end to support me getting these events?

More specifically, here's the code I have, with some app-specific particulars removed. First, the scope function containing the call to $upload.upload:

$scope.upload = $upload.upload({
url: baseUrl,
method: 'PUT',
headers: {'Content-Type': undefined},
file: file
});

In this case, baseUrl contains the full API end-point I'm posting to, 'Content-Type' is set to what my colleague told me to set it to (which works, sans progress updates), and the file object passed to me in a drag/drop event.

Next, my scope function that handles the promise:

$scope.upload.then(function(data) {
$timeout(function() {
// file was uploaded successfully
if (debug) {
$log.debug('file upload success: ' + data.data.meta.Alias.Key + ')');
}

    // process the return data as necessary...
});

}, function(response) {
console.log('There was a problem uploading your document.');
}, function(evt) {
// Math.min is to fix IE which reports 200% sometimes
console.log('file upload percent: ' + parseInt(100.0 * evt.loaded / evt.total));
});

Of course, I'm hoping the function(evt) will occasionally give me an update, but never once have I received one.

Any assistance with this is appreciated.

[danialfarid]

Yes there might be special configuration on the server needed to enable progress event.