How to show amount of MB uploaded using AJAX file upload and jquery.form.js?

Question

The description:

I am using this plugin(jquery.form.js) to upload files through AJAX method. I have implemented a progress bar which shows the progress in percentage. Now I want to display the progress amount in KB/MB too. Let me first share my code, and then I am explaining the issue further.

The code:

$('#validatefrm').submit(function(e) {
    $("#desc").val($('.Editor-editor').html()); 
        e.preventDefault();
        $('#loader-icon').show();
        $(this).ajaxSubmit({ 
            target:   '#targetLayer', 
            dataType: 'json',
            beforeSubmit: function() {
                if($('#image').val())
                    $("#progress-div").show();
                $("#progress-bar").width('0%');
            },
            uploadProgress: function (event, position, total, percentComplete){
                var disSize;
                $("#progress-bar").width(percentComplete + '%');
                $("#progress-bar").html('<div id="progress-status">'+ percentComplete +' %</div>');
                if(position=>1000000)
                {
                    disSize = (parseFloat(position)/1000000).toFixed(2)+' MB';
                }
                else if(position=>1000 && postion<1000000)
                {
                    disSize = (parseFloat(position)/1000).toFixed(2)+' KB';
                }
                $("#targetLayer").html(position + ' | ' +disSize);
            },
            success:function (data){
                var htmlMSG = '<b><span ';
                if(data.type == 1)
                {
                    htmlMSG += 'class="success-span"';
                }
                else
                {
                    htmlMSG += 'class="fail-span"';
                }
                htmlMSG += ' >'+capitalizeFirstLetter(data.msg)+'</span></b><br/>';
                htmlMSG += '<span class="msg-span">After closing this dialogue, you will be redirected to the listing page</span>';
                $('.message-section').html('');
                $('.message-section').append(htmlMSG);
                $('#loader-icon').hide();

                /*------ setting up the modal for redirection------*/
                $('#modal_entity').val('<?php echo $entity;?>'); 
                $('#modal_entity_id').val(data.post_id);
                $('#modal_redirect').val('true');   
                $('#myModal').modal('show'); 
                /*------ setting up the modal for redirection------*/

            },
            resetForm: false
        }); 
        return false; 
});

The Issue:

Look at this segment,

uploadProgress: function (event, position, total, percentComplete){
    var disSize;
    $("#progress-bar").width(percentComplete + '%');
    $("#progress-bar").html('<div id="progress-status">'+ percentComplete +' %</div>');
    if(position=>1000000)
    {
        disSize = (parseFloat(position)/1000000).toFixed(2)+' MB';
    }
    else if(position=>1000 && postion<1000000)
    {
        disSize = (parseFloat(position)/1000).toFixed(2)+' KB';
    }
    $("#targetLayer").html(position + ' | ' +disSize);
}

The position shows the amount of data in bytes. I want to convert it into KB(when size less than 1MB) and MB(when size is less than 1MB).

Here's is the problem:-

A. When the if else code is like this:-

 if(position=>1000000)
 {
    disSize = (parseFloat(position)/1000000).toFixed(2)+' MB';
 }
 else if(position=>1000 && postion<1000000)
 {
    disSize = (parseFloat(position)/1000).toFixed(2)+' KB';
 }

The data is displayed in MB, even though the total size is less than 1 MB.

B. When the if else code is like this:-

if(position=>1000 && postion<1000000)
{
   disSize = (parseFloat(position)/1000).toFixed(2)+' KB';
}
else if(position=>1000000)
{
   disSize = (parseFloat(position)/1000000).toFixed(2)+' MB';
}

The data is displayed in KB, even though the total size is greater than MB.

What am I doing wrong? Why isn't the code supposed to work as expected? It should show KB when size is less than 1MB, and should display MB when size is more than 1 MB.

Answer 1

When dealing with this type of conversions, just never hardcode. Try to figure out an autonomous way of doing it:

function SizeToText(size){
 var sizeContext = ["B", "KB", "MB", "GB", "TB"],
  atCont = 0;
 
 while(size / 1024 > 1){
  size /= 1024; 
  ++atCont;
 }
 
 return Math.round(size*100)/100 + sizeContext[atCont];
}

document.write(SizeToText(1000)+"<br>");
document.write(SizeToText(1000000)+"<br>");
document.write(SizeToText(10000000)+"<br>");