Valums file-uploader: Limit uploads by users credit

Question

Im using Valums awesome file uploader - https://github.com/valums/file-uploader

One thing i want to add to it is a limit based on the users account balance.

The first image is always free, so you may upload one image even if your balance is 0.

Additional images will require 0.50 worth or credit. If they don't have enough credit it will show an alert and the file will not be uploaded.

the balance can be received from a php session variable $_SESSION['user']['credit']

Here is the code so far

function createUploader(){ 
    var running = 0;    
    var uploader = new qq.FileUploader({
        multiple: true,
        element: $('#file-uploader')[0],
        action: 'classes/upload.item.php',
        allowedExtensions: ['jpg', 'png', 'gif'],
        params: {item: '<?php echo $item_id ?>'},
        onSubmit: function(id, fileName){
            running++;
            $('.button').replaceWith('<a class="button large grey full-width">Please wait...</a>');
        },
        onComplete: function(id, fileName, responseJSON){
            running--;
            $(".thumbnails").append('<li class="span2"> <a class="thumbnail"><img src="<?php echo $path; ?>'+fileName+'" /></a> </li>');
            if(running==0){
              $('.button').replaceWith('<a class="button large green full-width" href="confirm/<?php echo $item_id; ?>">Continue to next step</a>');                                 
            }           

        },
        onCancel: function(id, fileName){
            running--;
        },
        debug: true
    });           
}

Sorry, the question is, can you offer any advice on implementing what i have described above?

Cheers

Edit: I have tried the following using the recommendation below (probably incorrectly).

My attempt to stop the file uploading with return false is unsuccessful, the upload starts immediately, seems to get paused by the alert and once the alert is closed the upload completes.

documentation says

onSubmit(String id, String fileName) - called when the file is submitted to the uploader portion of the code. Note that this does not mean the file upload will begin at this point. Return false to prevent submission to the uploader.

<?php
// count uploaded files
$path = 'uploads/' . $_SESSION['user']['username'] . '/' . $item_id . '/thumbs/s_';
$files = glob($path . '*.*'); 


// has free upload been used yet? incase of page refresh etc
if (count($files) >= 1) {
    $used_free = 'true';
} else {
    $used_free = 'false';
}
?>

<script>
    function createUploader(){ 
        var credit = <?php echo $_SESSION['user']['credit'] ?>;  
        var used_free = <?php echo $used_free ?>; 
        var running = 0; 


            var uploader = new qq.FileUploader({
                multiple: true,
                element: $('#file-uploader')[0],
                action: 'classes/upload.item.php',
                allowedExtensions: ['jpg', 'png', 'gif'],
                params: {item: '<?php echo $item_id ?>'},
                onSubmit: function(id, fileName){   
                    console.log(used_free);
                    if (!used_free) {
                        used_free = 'true';
                        running++;
                        $('.button').replaceWith('<a class="button large grey full-width">Please wait...</a>');
                    } else {
                        $.get('ajax/getCredit.php', function (data) {
                            if (data.credit >= 0.5) {
                                running++;
                                $('.button').replaceWith('<a class="button large grey full-width">Please wait...</a>');
                            } else {
                                alert('you do not have enough credits');
                                return false;
                            }
                        }, "json");
                    }
                },
                onComplete: function(id, fileName, responseJSON){
                    running--;
                    $(".thumbnails").append('<li class="span2"> <a class="thumbnail"><img src="<?php echo $path; ?>'+fileName+'" /></a> </li>');
                    if(running==0){
                      $('.button').replaceWith('<a class="button large green full-width" href="confirm/<?php echo $item_id; ?>">Continue to next step</a>');                                 
                    }           
                },
                onCancel: function(id, fileName){
                    running--;
                },
                debug: true
            });      
    }
</script> 

Simplified it, this works

function createUploader(){ 
    var credit = <?php echo $_SESSION['user']['credit'] ?>;  
    var used_free = <?php echo $used_free ?>; 
    var running = 0; 


    var uploader = new qq.FileUploader({
        multiple: true,
        element: $('#file-uploader')[0],
        action: 'classes/upload.item.php',
        allowedExtensions: ['jpg', 'png', 'gif'],
        params: {item: '<?php echo $item_id ?>'},
        onSubmit: function(id, fileName){   
            if (!used_free) {
                used_free = 'true';
                running++;
                $('.button').replaceWith('<a class="button large grey full-width">Please wait...</a>');
            } else {
                if (credit >= 0.5) {
                    running++;
                    credit = credit - 0.5;
                    $('.button').replaceWith('<a class="button large grey full-width">Please wait...</a>');
                } else {
                    alert('you do not have enough credits');
                    return false;
                }
            }
        },
        onComplete: function(id, fileName, responseJSON){
            running--;
            $(".thumbnails").append('<li class="span2"> <a class="thumbnail"><img src="<?php echo $path; ?>'+fileName+'" /></a> </li>');
            if(running==0){
              $('.button').replaceWith('<a class="button large green full-width" href="confirm/<?php echo $item_id; ?>">Continue to next step</a>');                                 
            }           
        },
        onCancel: function(id, fileName){
            running--;
        },
        debug: true
    });      
}

i am then counting the uploaded files on a confirmation page which deducts the credit

Answer 1

You can print a boolean for your javascript to use to check if the upload is allowed:

var allowUpload = <?php echo $_SESSION['user']['credit'] >= 0.5 ? 'true' : 'false' ?>;

You'll still need to validate that they have enough credits on the server side when they try to upload a file.

AJAX/JSON Method

You could use AJAX to get the available credits, let's use PHP to generate some JSON. getCredit.php:

<?php
session_start();
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
echo '{"credit":' . $_SESSION['user']['credit'] . '}';

Then from your JavaScript you can get the credits on the fly.

$.get('getCredit.php', function (data) {
    if (data.credit >= 0.5) {
        // call uploader code here
    }
}, "json");