Bismillah…

Kali ini ada trick memanfaatkan plugin js ke module API Prima SIMRS … berikut contoh video GIF singkatnya:

*Catatan: Divideo saya menggunakan Plugin Facebox.js untuk popup seperti itu.

Ikuti ajah tutorialnya disini ya:

1. https://www.sandro.id/artikel/26-tutorial-upload-multiple-foto-dengan-ajax-dan-codeigniter-dropzone-js (Pemahaman Awal)
2. https://www.startutorial.com/articles/view/dropzonejs-php-how-to-display-existing-files-on-server (Advanced)
3. https://github.com/edomaru/ci_dropzone (Advanced)

Inget, sampai faham betul yah ikutin… kalo kali ini gw cuman share trick ajah, berupa script potongan. Kalo ikutin tutorial di Point 1 pasti akan menemukan script js berikut ini:

	Dropzone.autoDiscover = false;

	var foto_upload= new Dropzone(".dropzone",{
		url: "upload.php",
		maxFilesize: 2,
		method:"post",
		acceptedFiles:"image/*",
		paramName:"userfile",
		dictInvalidFileType:"Type file ini tidak dizinkan",
		addRemoveLinks:true,
	});


	//Event ketika Memulai mengupload
	foto_upload.on("sending",function(a,b,c){
		a.token=Math.random();
		c.append("token_foto",a.token); //Menmpersiapkan token untuk masing masing foto
	});


	//Event ketika foto dihapus
	foto_upload.on("removedfile",function(a){
		var token=a.token;
		$.ajax({
			type:"post",
			data:{token:token},
			url: "remove.php",
			cache:false,
			dataType: 'json',
			success: function(){
				console.log("Foto terhapus");
			},
			error: function(){
				console.log("Error");

			}
		});
	});

Ternyata script tersebut berhasil tapi yang gw butuhin tuh habis upload terus refresh halaman foto sebelumnya muncul lagi, nah ternyata ada di Point 3 script tersebut, berikut scriptnya:

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

var myDropzone = new Dropzone(".dropzone", {
	url: "upload.php",
	acceptedFiles: "image/*",
	maxFilesize: 2,
	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();
		c.append("token_foto",a.token); //Menmpersiapkan token untuk masing masing foto
	},

	removedfile: function(file) {

		var token= file.token;

		$.ajax({
			type: "post",
			url: "remove.php"+token,
			data:{token:token},
			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;
		$.get("<?php echo site_url();?>api/website/dokter/list_foto/", 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; ?>/foto/real/" + value.name);
					me.emit("complete", mockFile);

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

				});
			}
		});
	}
});

Nah udah deh, foto yang pernah ke upload keliatan juga akhirnya.

Done.

Have a Nice Day!