CODEWITHSUNDEEP
javascriptphpjqueryajaxzend-framework2
Katty
Katty

Reputation: 489

Jquery file uploading progress bar

Im uploading video and image files with progress bar using jquery ajax. Im using server side form validation and check duplicate entry. My issue is validation error message show after progress bar becomes complete. I want something like this...

if form validation is correct
    then show progress bar
else if form validation is not correct
    then only show error message of form validation
else if duplicate entry
    then only show error message of duplicate entry

this is my js code:

$.ajax({
    url:         ajaxUrl,
    type:        'POST',
    dataType:    'json',
    processData: false,
    contentType: false,
    async:       true,
    data: formData,
    xhr: function () {
        //upload Progress
        var xhr = $.ajaxSettings.xhr();

        if (xhr.upload) {
            xhr.upload.addEventListener('progress', function (event) {
                var percent = 0;
                var position = event.loaded || event.position;
                var total = event.total;

                if (event.lengthComputable) {
                    percent = Math.ceil(position / total * 100);
                }
                var temp = event.loaded/event.total*100;

                //update progressbar
                $('div#upload-progress').text(percent + "%");
                $('div#upload-progress').css("width",  + temp + "%");

            }, true);
        }
        return xhr;
    },
    complete: function(xhr) {
        if(xhr.responseText) {
            //console.log(xhr);
        }
    },
    success: function(data, status){
        if (data.hasOwnProperty('form-error')) {
            $.each(data['form-error'], function (key, value) {  
                $("span#span_" + key).text(value);
            })
        } else {
            // Form validation is correct
        }               
    },
    error : function(xhr, textStatus, errorThrown) {
        var data = xhr.responseText;
        myWindow = window.open("data:text/html," + encodeURIComponent(data), "parent", "width=1000, height=600");
        myWindow.focus();       
    }
});

Can anyone give me any suggestion to how to do this?

Upvotes: 0

Views: 738

Answers (2)

Miro
Miro

Reputation: 8660

If you're using the server to validate the file, that means that the file will have to be uploaded first before you can validate it, hence why you see the progress bar first. If you only want to check for duplicates (based on filename, size etc.), you need 2 ajax requests:

  1. Send only the filename & size and validate it.

  2. If valid, upload the file. (and validate again, of course)

Just my 2 cents.

Upvotes: 1

Felix Fong
Felix Fong

Reputation: 985

I did made a AJAX file upload with a progress bar, you might want to take a look? I guess? https://github.com/felixfong227/fileupload/blob/master/static/js/index.js

Upvotes: 0

Related Questions