0

I am currently working on a project which need an upload file input which I implemented based on some example I saw on this site and it works fine.

function send(file){
var fd = new FormData();

    fd.append(file.name, file);
    $.ajax({
        url: 'upload',
        type: 'POST',
        enctype: "multipart/form-data",
        xhr: function xhr() {
            myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) { 
                myXhr.upload.addEventListener('progress', function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        percentComplete = parseInt(percentComplete * 100, 10);

                        progress.setValue(percentComplete);

                    }
                }, false); 

            }
            return myXhr;
        },

        beforeSend: beforeSend,
        success: onComplete,
        error: onError,
        // Form data
        data: fd,
        //Options to tell jQuery not to process data or worry about content-type.
        cache: false,
        contentType: false,
        processData: false
    });
}

However One thing is not working well and I am curious to know if someone has a great explanation for that. On the java server side my servlet check if the user is allowed to upload files and if not send back a success=false or what ever. The curious thing is that the progress bar is still progressing like if the server will upload it and I got only the error when the progress is finish. That is really strange my expectation was that the progress will not start or should be canceled on error returned. For sure I could check the user right before starting sending but I did a second an put a wrong URL in the ajax for which there is no end point and it still showing the progression until the end which if it is a big file take a while and sometimes freeze the browser. Is there a way to stop the progression earlier as the and of the progress on server error. Would be great to find a solution after a couple of hours googling not founding someone having the same issue Regards JP

Jai
  • 74,255
  • 12
  • 74
  • 103
Jean-Paul
  • 1
  • in the network tab you can click the url relative to this function `upload` in this case and click on it, then take a look at the `response` tab, what did it output `null`??? – Jai Jun 13 '14 at 11:36
  • The network response is {succes:false} got from the server. – Jean-Paul Jun 13 '14 at 12:58

1 Answers1

0

Once the server receives the request the file is already uploaded and it's too late to tell the user they can't upload. You could first do one ajax call to check if the user can upload and then the above call to upload the file if they have permission.

One question to ask yourself is why are you displaying the upload form if the user doesn't have permission to upload?

Wayne Ellery
  • 7,888
  • 1
  • 28
  • 45
  • 1
    Correct for the user and I will do that but my question is also if I upload a big file let say 600MO and for any reason the server fail to store the file or what ever as it will take a long is there no way to stop the client side progress (calling the abort function on xhr) by returning an error? – Jean-Paul Jun 13 '14 at 14:42
  • Once the server fails, the progress bar should stop. – Wayne Ellery Jun 14 '14 at 01:08