Ajax Upload Plugin – Uploadifive

Document:

http://www.uploadify.com/documentation/

Usage:

<?php 
for($i = 1; $i <= 6; $i++): 
	$file_name = 'file' . $i;
?>
<div class="file-wrap">
	<button class="button  bt-delete" type="button" data-project-id="<?=val($project, 'id')?>" data-index="<?=$i-1?>">Delete</button>
	
	<input id="file_upload<?=$i?>" name="file_upload" type="file" multiple="true" class="bt-select uploadifive">
	
	<span class="file_name"></span>

	<?php 
	if(isset($files[$i-1]) == false || $files[$i-1] == false){
		$class = 'off';
		$url = '#';
		$name = '';
	}else{
		$class = '';
		$url = $files[$i-1];
		$name = basename($url);
	}
	?>
	<a href="<?=$url?>" class="file-link <?=$class?>" target="_blank"><?=$name?></a>

	<div id="queue<?=$i?>" class="queue"></div>
</div>
<?php endfor; ?>
var upload_app = function(){

    function init(){
        init_uploadfive();

		$('.file-wrap').each(function(index){
			var $wrap = $(this);

			var $link = $wrap.find('.file-link');
			//console.log($link.hasClass('off'));
			if($link.hasClass('off') == true){//no uploaded file
				upload_switch('on', $wrap);
			}else{
				upload_switch('off', $wrap);
			}
		});

		$('.bt-delete').on('click', function(e){
			var $this = $(this);

			if(confirm('Are you sure?')){
				delete_file($this.data('project-id'), $this.data('index'));
			}
		});
    }

    function init_uploadfive(){
    	<?php $timestamp = time();?>
    	$('.file-wrap').each(function(index){
			var $wrap = $(this);

	    	$wrap.find('.uploadifive').uploadifive({
				'auto'             : true,
				'buttonClass': 'button', 
				'height': 50, 
				'width': 165, 
				'queueID'          : $wrap.find('.queue').attr('id'),
				'buttonText': 'Select', 
				'checkScript'      : false,
				'formData'         : {
				   'timestamp' : '<?php echo $timestamp;?>',
				   'token'     : "<?php echo md5('unique_salt' . $timestamp);?>", 
				   'pid': '<?=$project->id?>', 
				   'index': index
				},
				'uploadScript'     : '<?=BASE_URL?>api/members_f/upload_ex_files/',
				'onAddQueueItem' : function(file) {
					$wrap.find('.file_name').show().html(file.name);
				},
				'onUploadComplete' : function(file, data) { 
					//console.log(file);//File info
					//console.log(data);//From server

					data = $.parseJSON(data);
					if(data == null){
						alert(data);
						return false;
					}

					if(data.status == 'fail'){
						alert(data.message);
						return false;
					}

					var res = data.response;

					$wrap.find('.uploadifive').uploadifive('clearQueue');
					$wrap.find('.file_name').hide();
					$wrap.find('.file-link').show().html(file.name).attr('href', res.file_url);
					$wrap.find('.uploadifive-button').hide();
					$wrap.find('.bt-delete').show();
				}
			});
		});
    }

    function upload_switch(mode, $wrap){
    	if(mode == 'on'){
    		$wrap.find('.uploadifive-button').show();
			$wrap.find('.bt-delete').hide();
			$wrap.find('.file-link').hide();
    	}else{
    		$wrap.find('.uploadifive-button').hide();
			$wrap.find('.bt-delete').show();
			$wrap.find('.file-link').show();
    	}
    }

    function delete_file(pid, index){
		var params = {
			pid: pid, 
			index: index
		}

		$.post(base_url + 'api/members_f/delete_ex_files', params, function(data){
			//console.log(data);
			if(typeof data.status == 'undefined'){
				alert(data);
				return;
			}

			if(data.status == 'fail'){
				alert(data.message);
				return;
			}
			
			var $bt = $('.bt-delete[data-index="' + index + '"]');
			var $wrap = $('.file-wrap').has($bt);
			upload_switch('on', $wrap);
		});
	}
 
    return {
        init: init
    }
}();