asked on

delete multiple files from database using DropzoneJs

I have got DropZoneJs working to upload multiple images, store them in a specified location and add records to the database.

The problem I am facing now is how to add javascript/jquery to call the php file that I want to be responsible for deleting database records and removing files. The code I found for removing uploaded images was on the DropzoneJs website but this just removes the visible image on the screen, nothing else.

They have commented below where you should make the ajax call but I don't know how. I am guessing that I need to pass the images ID's to the php page which will perform the delete.

Dropzone.options.imageUpload = {
			init: function () {
				this.on("addedfile", function (file) {
					// Create the remove button
					var removeButton = Dropzone.createElement("<button class='btn btn-fill btn-danger'>Remove file</button>");
					// Capture the Dropzone instance as closure.
					var _this = this;
					// Listen to the click event
					removeButton.addEventListener("click", function (e) {
						// Make sure the button click doesn't submit the form:
						e.preventDefault();
						e.stopPropagation();
						// Remove the file preview.
						_this.removeFile(file);
						// If you want to the delete the file on the server as well,
						// you can do the AJAX request here.
						this.on("maxfilesexceeded", function(file) { this.removeFile(file); });
					});
					// Add the button to the file preview element.
					file.previewElement.appendChild(removeButton);
				});
			}
		};

Open in new window

<form action="image-uploads.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
	<input type="hidden" name="pid" value="<?php echo $_GET['pid']; ?>">
</form>

Open in new window

Ray Paseur

A drop-dead simple example of jQuery / AJAX is available in this article. Maybe you can adapt the AJAX communication to DropZoneJS.
https://www.experts-exchange.com/articles/10712/The-Hello-World-Exercise-with-jQuery-and-PHP.html

Abhijeet Rananaware

You need to code different Ajax call to PHP file which deletes images from database and filesystem.

Crazy Horse

ASKER

Thanks, Ray. That is pretty helpful.

I have tried this ( I am just trying to console log out anything random for now, just to show that the button click works). However, I am getting an error in console which is showing on another line of code.

I added this:

$(document).ready(function(){
  $(".btn").click(function(){
    console.log(5 + 5);
    });
});

Open in new window

But when I click the button I get the error:

Uncaught TypeError: this.on is not a function at HTMLButtonElement.<anonymous>

The code it is complaining about is:

this.on("maxfilesexceeded", function(file) { this.removeFile(file); });

Open in new window

Crazy Horse

ASKER

Ah, just realized that I don't need this:

$(document).ready(function(){
$(".btn").click(function(){

Open in new window

because it already has it's own code for when you click the button. I just need to add what I want it to do. I got the console.log to write out the answer to 5+5 which is a step in the right direction. But underneath the output it still shows that same error.

SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Crazy Horse

ASKER

@ Ray, that makes a lot of sense. Here is the code below. I don't know why EE breaks the formatting because it doesn't look like this in my editor.

<html>

<head>
	<title>Dropzone file upload</title>

	<meta charset="utf-8" />
	<link rel="icon" type="image/png" href="assets/img/favicon.ico">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
	<meta name="viewport" content="width=device-width" />
	<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
	<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
	<link href="assets/css/pe-icon-7-stroke.css" rel="stylesheet" />
	<link href="assets/css/custom.css" rel="stylesheet" />
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
</head>

<body>


	<div class="wrapper">
		<?php include("assets/side-nav.php"); ?>
			<div class="main-panel">
				<?php include("assets/header.php"); ?>
					<div class="content">
						<div class="container-fluid">
							<div class="row">
								<div class="col-md-6">
									<div class="card">
										<div class="header">Upload Image(s) for
											<?php echo $form_vars['prod_name']; ?>
										</div>
										<div class="content">
											<form action="image-uploads.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
												<input type="hidden" name="pid" value="<?php echo $_GET['pid']; ?>">
											</form>
										</div>
									</div>
								</div>
							</div>
							<div class="row"> </div>
						</div>
					</div>
					<?php include("assets/footer.php"); ?>
			</div>
	</div>

</body>
<script src="assets/js/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>

<script type="text/javascript">
	Dropzone.options.imageUpload = {
		maxFilesize: 4,
		maxFiles: 10,
		dictDefaultMessage: 'Drag an image here to upload, or click to select one',
		clickable: true,
		acceptedFiles: ".jpeg,.jpg,.png,.gif"
	};

	// myDropzone is the configuration for the element that has an id attribute
	// with the value my-dropzone (or myDropzone)
	Dropzone.options.imageUpload = {
		init: function () {
			this.on("addedfile", function (file) {
				// Create the remove button
				var removeButton = Dropzone.createElement("<button class='btn btn-fill btn-danger'>Remove file</button>");
				// Capture the Dropzone instance as closure.
				var _this = this;
				// Listen to the click event
				removeButton.addEventListener("click", function (e) {
					// Make sure the button click doesn't submit the form:
					e.preventDefault();
					e.stopPropagation();
					// Remove the file preview.
					_this.removeFile(file);
					// If you want to the delete the file on the server as well,
					// you can do the AJAX request here.


					console.log(5 + 5);


					this.on("maxfilesexceeded", function (file) {
						this.removeFile(file);
					});
				});
				// Add the button to the file preview element.
				file.previewElement.appendChild(removeButton);
			});
		}
	};
</script>

</html>

Open in new window

Crazy Horse

ASKER

So, I sort of have this working.

var $prodId = $(this).data('prod-id');
		
$.ajax({
type:'post',
url: 'models/image-delete.php',
data: {prodId: $prodId},
success: function(result){
console.log($prodId);
  },
});

Open in new window

I did this just to test and it is deleting records from the database, however I am using the product ID and it deletes all pictures with that product ID which is bad. When clicking on one image delete button it should just remove that one record, and not ALL records with that product ID. I obviously need each image id and not the product id.

How do I get the ID of every picture uploaded?

I tried to create a session variable every image seems to have the same ID:

$prod_images = $_FILES['file']['name'];
$stmt = $link->prepare("INSERT INTO `prod_pics` (`prod_id`, `img_name`) VALUES (?, ?)");
$stmt->bind_param("is", $_POST['pid'], $prod_images);
$stmt->execute();
$_SESSION['img_id'] = $link->insert_id;
$stmt->close();

Open in new window

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Crazy Horse

ASKER

Thank you hielo,

I am going to come back to this once I have sorted out my other open question.

Thanks again!