Form View DropZone

formfile.php

<style type="text/css">
	.dropzone {
		/*margin-top: 100px;*/
		border: 2px dashed #0087F7;
	}
</style>

<div class="dropzone">

	<div class="dz-message">
		<h3>Drop File Kesini</h3> atau <strong>Klik</strong> untuk mengupload
	</div>
	<input type="hidden" value="<?php echo $randomKey; ?>" id="randomKey" name="randomKey" />


<?php echo js_asset(array('dropzone.min.js'));?>
<?php echo css_asset(array('basic.min.css','dropzone.min.css'));?>

<script type="text/javascript">

// source: https://github.com/edomaru/ci_dropzone/
Dropzone.autoDiscover = false;

var myDropzone = new Dropzone(".dropzone", {
	url: "<?php echo site_url();?>officeAction/addFile/addFile/",
	acceptedFiles: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/pdf,application/docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel",
	maxFilesize: 2000,
	paramName:"userfile",
	dictInvalidFileType:"Type file ini tidak dizinkan",
	addRemoveLinks: true,
    // previewTemplate: document.querySelector('#preview-template').innerHTML,
    clickable: true,

	sending: function(a,b,c) {
		a.token 	= Math.random();
		randomKey 	= $('#randomKey').val();
		c.append("token",a.token); //Menmpersiapkan token untuk masing masing foto
		c.append("randomKey",randomKey);
	},

	/*
	success: function(file) {
		var a = document.createElement('a');
	    a.setAttribute('href',"<?php //echo ROOTURL; ?>/foto/real/" + file.name);
	    a.innerHTML = "<br />Download<b>";
	    file.previewTemplate.appendChild(a);
	},
	*/

	removedfile: function(file) { 
		// var name = file.name;
		var token= file.token;
		var randomKey = $('#randomKey').val();
		$.ajax({
			type: "post",
			url: "<?php echo site_url();?>officeAction/addFile/removeFile/"+token,
			data:{token:token, randomKey:randomKey},
			dataType: 'json',
			cache:false,
		});
		// remove the thumbnail
		var previewElement;
		return (previewElement = file.previewElement) != null ? (previewElement.parentNode.removeChild(file.previewElement)) : (void 0);
	},

	init: function() {
		var me = this;
		var randomKey = $('#randomKey').val();

		$.get("<?php echo site_url();?>officeAction/addFile/formListFile/"+randomKey, function(data) { //alert(data);
			// if any files already in server show all here
			if (data.length > 0) {
				$.each(data, function(key, value) {
					var mockFile = value;
					me.emit("addedfile", mockFile);
					me.emit("thumbnail", mockFile, "<?php echo ROOTURL; ?>/supports/office/" + value.name);
					me.emit("complete", mockFile);

					var a = document.createElement('a');
				    a.setAttribute('href',"<?php echo ROOTURL; ?>/supports/office/" + value.name);
				    a.innerHTML = "<br />Download<b>";
				    value.previewTemplate.appendChild(a);

				});
			}
		});
	}
});

	
	// SHOWS THE CLOSE LINK
	$(document).ready(function(){
		$('.footer').empty();
		$('.footer').append(' <a class="close" name="close" id="close" >Close</a>');
		
		$('#close').click(function(){
			$(this).trigger('close.facebox');
		});
	});
</script>