1

How the get the status of uploaded files when user clicks on cancel while uploading multiple files using ajax call.

This way im calling the ajax request to upload files: 

 var request = $.ajax({
     url: 'files.php',
     type: 'POST',
     data: data,
     cache: false,
     contentType: false,
     processData: false,
     beforeSend: function () {
         $(".progressbar").show();
     },
     xhr: function () {
         var xhr = $.ajaxSettings.xhr();
         if (xhr.upload) {
             xhr.upload.addEventListener('progress', showProgress, false);
         }
         return xhr;
     },
     success: function (data) {
         if (percentComplete <= 100) {
             $('#pb div').animate({
                 width: '100%'
             }, {
                 step: function (now) {
                     $(this).text(Math.round(now) + '%');
                 },
                 duration: 10
             });
         }
         $('#uplcomp').append(data);
     }
 });

If user clicks on cancel button im doing this:

request.abort();

As the above statement just abort the ajax request , im not getting any response like how many files are uploaded, how much mb uploaded etc....

Can anyone help me on this?

urbz
  • 2,663
  • 1
  • 19
  • 29
fedrick
  • 341
  • 2
  • 5
  • 21

1 Answers1

2

I don't think that there is default way for your question. The information you're looking for - how many files are uploaded - is not stored in the XMLHttpRequest object by my knowlegde.

I suppose (but never tried it) that you can create somehting custom for it. High level analysis: keep track of your upload progress server side. Store some info in your database regarding the upload: amount of files to process, amount of files processed, date/time, unique upload/session ID. When you abort the the upload, or it fails you can retrieve the information, based on a unique ID, about the upload process via ajax from your DB and present it in the UI.

Note: If the request has already been sent to the server then the server will process the request even if we abort the request but the client will not wait for/handle the response.

Hope this helps.

Dimitri Zetzsche
  • 187
  • 5
  • is it possible without using db here... atleast is it possible to show the current uploading file using xhr ? – fedrick Jun 20 '14 at 06:54
  • +1 for making me clear that files uploaded are stored in XMLHttpRequest – fedrick Jun 20 '14 at 06:55
  • I don't see a fitting solution without the use of a DB. The info needs to be stored somewhere so you can retrieve it on a later moment. To show the current uploading file: I think the easiest way to do this, is to perform a seperate ajax request for each file which needs to be uploaded. IN this way you know in the client which file you're (not) working. So you can easily present the processing info in the UI. Consider using an existing upload script which does this kind of work for you. I make a lot of use of [Dropzone.js](http://www.dropzonejs.com/) which shows a lot of info about the upload. – Dimitri Zetzsche Jun 20 '14 at 07:03
  • i dont want to use any 3rd party scripts which i dont like.. and due to security issues i m making single ajax request. As there are minor bugs in my code. So in a single ajax request can we make this? if this is possible how can i acheive showing the current uploading filename – fedrick Jun 20 '14 at 07:13
  • I don't see it working in a single request and showing info of the currently uploading file. You must send them 1 by 1 to show the info instead of sending all the files at once. Working secure is off-topic here. You should use HTTPS to encrypt your data. If 1 single call is insecure then multiple calls will also be insecure. In the end it's the same: users will send 1 request with multiple files or will make multiple requests with 1 file. That isn't a mather of working secure but of performance at the client side. Which isn't an issue though, most clientmachines are high-end devices these days – Dimitri Zetzsche Jun 20 '14 at 07:35
  • and also forgot to mention that im using single ajax call because i want to show one progress bar for all the files i.e if we are uploading 3 files at a time need show one progress bar that calculates percentage sum of all the files and display on the screen – fedrick Jun 20 '14 at 07:40
  • Still it's not an issue. You need to refactor your algorithm so it's takes multiple uploads into account, not 1 single request. Your main question was about visualizing the time it took to complete your request. Not the progress of how many files are processed. These are two different things. You need to clarify for youselve which aspects you want to measure: elapsed time or processed amounts. Based on that you need to refactor your code. Again, to safetime and efforts, use 3th party scripts which have proven their existence. Use them as a foundation for your work and remaster them if needed. – Dimitri Zetzsche Jun 20 '14 at 08:02
  • i want conclude this discussion.. so it is not possible to show uploading file name in single ajax request and also it is not possible to get the uploaded status in ajax request after abort , here we need to use db ryt? and want to know if im calling individual ajax request for each file, how can i validate in total size of all files that should not exceed the limit? – fedrick Jun 20 '14 at 08:16
  • I don't think it's possible yes. Indeed, a DB with information about a process should provide more insight. Please keep in mind my note of my answer: the script on the server will keep on processing (=uploading) anyway because the ajax-request initiated it. The ajax abort doesn't stop your server script. Another reason to send them 1-by-1. [You can determine the size of a file via JS.](http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation) If you can do it for 1 you can do it for all the files. So you can perform business logic on that result. Goodl luck. – Dimitri Zetzsche Jun 20 '14 at 08:27
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/55962/discussion-between-prassu-and-dimitri-zetzsche). – fedrick Jun 20 '14 at 08:30
  • I can't, I'm at a secure environment and the chat webpage is blocked. Give it go in you code together with some Google work and it will workout fine. – Dimitri Zetzsche Jun 20 '14 at 08:33
  • We cant trust the values coming from js as you know js is watchable code to users. How can i validate in serverside for fileupload – fedrick Jun 20 '14 at 08:35
  • Lol. If you don't trust JS don't use it then at all... You can validate it with serverside scripting language, you case: PHP. Give it a try. – Dimitri Zetzsche Jun 20 '14 at 08:50
  • see all the drag and drop function will come in js code not in php... i have already dont client side validation in js.. and validating the same in server side too.. if i make individual ajax requests, it is not possible to validate on server side – fedrick Jun 20 '14 at 08:59
  • If you use a drag and drop function (like dropzone) then you can probably set a size limit on a file. If you don't trust the validation. Don't use it: make a form with multiple file uploads and perform a classic `POST`action. Validate your data server side and provide a true/false in you answer in PHP. If you want to use it either agree with the JS or perform *extra* server-side validation on the data being send. You can still determine in PHP if you're going to store the file. We're going of topic here on this question. Try it and come back with a specific problem. in another question. – Dimitri Zetzsche Jun 20 '14 at 09:08