<!doctype html> 
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
    <script src="{{STATIC_URL}}ajaxuploader/js/fileuploader.js" ></script>            
    <link href="{{STATIC_URL}}ajaxuploader/css/fileuploader.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="file-uploader">       
        <noscript>          
            <p>Please enable JavaScript to use file uploader.</p>
        </noscript>         
    </div>
    
    <script>
    $(function(){
        var uploader = new qq.FileUploader( {
            action: "{% url my_ajax_upload %}",
            element: $('#file-uploader')[0],
            multiple: true,
            onComplete: function( id, fileName, responseJSON ) {
              if( responseJSON.success )
                alert( "success!" ) ;
              else
                alert( "upload failed!" ) ;
            },
            onAllComplete: function( uploads ) {
              // uploads is an array of maps
              // the maps look like this: { file: FileObject, response: JSONServerResponse }
              alert( "All complete!" ) ;
            },
            params: {
              'csrf_token': '{{ csrf_token }}',
              'csrf_name': 'csrfmiddlewaretoken',
              'csrf_xname': 'X-CSRFToken',
            },
          }) ;
    });
    </script>
</body>
</html>
