how to update the filename immediately after upload in dropzone? - php

Question

I have used dropzone.js for uploading multiple files. once uploaded i am getting the reponse from php file and have to update the filename in dropzone so that the file can be deleted immediately. other than that i need to refresh the page and delete the image.
How to achieve it?
This is my code. I am using dropzone.js plugin to add multiple file upload
php file
if (!empty($_FILES)) {
$tempFile = $_FILES['file']['tmp_name'];
$fileName = $_FILES['file']['name'];
$targetPath = APPPATH . 'uploads/work_picture/';
$targetFile = $targetPath . time().$fileName ;
move_uploaded_file($tempFile, $targetFile);
// if you want to save in db,where here
// with out model just for example
// $this->load->database(); // load database
$this->db->insert('tablename',array('business_id'=>$business_id->id,'picture_name' => time().$fileName));
header('Content-type: text/json'); //3
header('Content-type: application/json');
echo json_encode(array("name"=>time().$fileName));
exit;
}
<form action="<?php echo site_url('settings_pro/work_picture_upload'); ?>" class="dropzone dz-clickable" id="my-awesome-dropzone"><div class="dz-default dz-message"><span>Drop Files Here or Click to Upload...</span></div></form>
Dropzone.options.myAwesomeDropzone = {
addRemoveLinks: true ,
maxFiles: 5,
acceptedFiles: 'image/*',
url: "<?php echo site_url('settings_pro/work_picture_upload'); ?>",
init: function() {
thisDropzone = this;
this.on("maxfilesexceeded", function(file){
alert("No more files please!");
this.removeFile(file);
this.addFile(file);
});
this.on('removedfile', function(file) {
console.log(file);
var file_name = file.name;
$.ajax({
type: 'POST',
url: '<?php echo base_url('settings_pro/delete_image'); ?>',
data: { 'filename': file_name },
success: function(report) {
console.log(report);
},
error: function(report) {
console.log(report);
}
});
});
$.get('<?php echo base_url('settings_pro/get_picture'); ?>', function(data) {
$.each(data, function(key,value){
//alert(data);
//var mockFile = { name: value.name, size: value.size };
var mockFile = { name: value.name};
thisDropzone.options.addedfile.call(thisDropzone, mockFile);
thisDropzone.options.thumbnail.call(thisDropzone, mockFile,
value.path);
});
});
this.on("successmultiple", function(files, response) {
alert("hi");
// event when files are successfully uploaded
// you can return a response string and process it here through 'response'
});
this.on("success", function(file, response) {
file.serverId = response;
//$('#dz-preview').html('<img src="" width="200" height="200" alt="<?php //echo $empNameFull; ?>">');
// location.reload();
});

Answer 1

You can try with code might be helpful.
Dropzone.options.myAwesomeDropzone = {
init: function(){
var th = this;
this.on('queuecomplete', function(){
ImageUpload.loadImage(); // CALL IMAGE LOADING HERE
setTimeout(function(){
th.removeAllFiles();
},5000);
})
},
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
acceptedFiles: 'image/*',
};
my.on("complete", function(file) { my.removeFile(file); });
my.on("complete", function(file) { my.removeAllFiles(file);});