I use the Dropzone.js for uploading the files in an application.After a user selects the pictures from his local computer's file manager to the dropzone area,if user later finds that he/she want to remove one of the picked pictures or files.How to achieve it?
HTML code :
<form id="file-up" action="upload_file.php" method="post" enctype="multipart/form-data" class="dropzone" id="my-awesome-dropzone">
<div class="fallback">
<input type="file" id="upload_file" name="upload_file[]" multiple/>
<input type='hidden' id='uploadvalues' />
</div>
</form>
The jquery
<script type="text/javascript">
Dropzone.options.myAwesomeDropzone = {
maxFilesize: 20, // Size in MB
addRemoveLinks: true,
removedfile: function(file) {
var fileRef;
return (fileRef = file.previewElement) != null ?
fileRef.parentNode.removeChild(file.previewElement) : void 0;
},
success: function(file, response) {
alert(response);
},
error: function(file, response) {
alert(response);
}
};
</script>
PHP server side code for uploading
<?php
if(isset($_POST['submit_image'])){
$ds = DIRECTORY_SEPARATOR; //1
$storeFolder = 'uploads'; //2
if (!empty($_FILES)) {
$tempFile = $_FILES['file']['tmp_name']; //3
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds; //4
$targetFile = $targetPath. $_FILES['file']['name']; //5
move_uploaded_file($tempFile,$targetFile); //6
}
}
?>
You can also use the following snippet:
Dropzone.autoDiscover = false;
$(".dropzone").dropzone({
addRemoveLinks: true,
removedfile: function(file) {
var name = file.name;
$.ajax({
type: 'POST',
url: 'upload.php',
data: {name: name,request: 2},
sucess: function(data){
console.log('success: ' + data);
}
});
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
}
})