Hello Reader's ,

Hope your are doing good today.

Today we will discuss about Drag-and-drop functionality in the website. Nowadays it is very useful graphical feature where you can drag images from one location to another location. Drag and drop can be used for many purposes. Example -you can drag and drop an icon on the desktop to move it to a folder. In this blog you will learn how you can drag and drop image and save to the directory.

First, you need to download the dropzone.js and dropzone.css File and put it into in your project directory.Then include both files in your page where you will use drag and drop.

<link rel="stylesheet" href=">css/dropzone.css">
<script src="js/dropzone.js"></script>

After uploading both files now create the form for drag and drop

<div class="image_upload_div">
    <?php  echo $this->Form->create('image',array('url'=>array('controller'=>'Controller_Name','action'=>'function_name'),'method'=>'post','id'=>'my-awesome-dropzone','class'=>'dropzone','type'=>'file','autocomplete'=>'off',));?>
                        
    <?php    echo $this->Form->end();?>
    </div>

Now create function in your controller

public function drop()
{
	if ($this->request->is(array('post', 'put'))) 
	{
		if(!empty($_FILES))
		{
			$fileName = $_FILES['file']['name']; //Get the image
			$file_full = WWW_ROOT.'image/';	 //Image storage path		
			$file=basename($fileName);
			$ext=pathinfo($file,PATHINFO_EXTENSION); 
			$file_temp_name= $_FILES['file']['tmp_name'];			
			$new_file_name = time().'.'.$ext;

			if(move_uploaded_file($file_temp_name, $file_full.$new_file_name))
			{
				echo "File Uploaded successfully";die;
			}
			else
			{
				echo "Error";die;
			}
		}
	}
}

You can find Attached file below

I hope this will help you. Please feel free to give us your feedback in comments.