In modern web technology, we use drag/drop system in our web page. It will be little tough if we do not use properly with JavaScript. Today I will give a clean solutions about dragging files into our html page. Its much easier than other solutions. Drag and Drop Files using jQuery, Ajax –
Step-1
Here, we will use a JS library called dropzone.js. You have to add this library in your web page head tag. Download the file from here – DropZone.js
<script src="/dropzon.js" type="text/javascript"></script>
Step-2
Create a div in you html page like the following code.
<div id="dragarea" style="width:200px;height:200px;border: 1px solid grey; padding:20px;"> <strong>File Name</strong> <p id='filename'></p> </div>
Step-3
For HTML and PHP, use the following JS code into the bottom of your page
Also, you have to create a function in your ACTION_URL PHP page for uploading the files in your server.
<script type="text/javascript"> $d= $("#dragarea"); $d.on('dragenter', function(ev) { //You can add css class for high light your drag area while you you enter your mouse }); $d.on('dragleave', function(ev) { //You can remove css class for high light your drag area while you you leave your mouse }); $d.on('dragover', function(ev) { ev.preventDefault(); }); $d.on('drop', function(ev) { ev.preventDefault(); ev.stopPropagation(); if(ev.originalEvent.dataTransfer){ if(ev.originalEvent.dataTransfer.files.length) { var droppedFiles = ev.originalEvent.dataTransfer.files; for(var i = 0; i < droppedFiles.length; i++) { var file_data = droppedFiles[i]; $("#filename").text(file_data.name); var form_data = new FormData(); form_data.append('file', file_data); jQuery.ajax({ url: ACTION_URL, type: 'post', contentType: false, processData: false, data: form_data, dataType : "json", success: function(resp){ //Write your own code }) }); } } } }); </script>
For WORDPRESS, first create a action in your functions.php file like the following code
add_action( 'wp_ajax_custom_file_save','custom_file_save' ); add_action( 'wp_ajax_nopriv_custom_file_save','custom_file_save' ); function custom_file_save(){ $tmpfile = $_FILES['file']; $name = $tmpfile['name']; $arr = explode('.',$name); $ext = $arr[1]; $uploads = wp_upload_dir(); $filetype_info = wp_check_filetype($name); $file_type = $filetype_info['type']; $file_ext = $filetype_info['ext']; $filename = wp_unique_filename( $uploads['path'], $name ); if ( ! function_exists( 'wp_handle_upload' ) ) { require_once( ABSPATH . 'wp-admin/includes/file.php' ); } $uploadedfile = $_FILES['file']; $upload_overrides = array( 'test_form' => false ); $movefile = wp_handle_upload( $uploadedfile, $upload_overrides ); if ($movefile && !isset($movefile['error'])) { $attachment = array( 'post_mime_type' => $file_type, 'post_title' => preg_replace('/\.[^.]+$/', '', $filename), 'post_content' => '', 'post_status' => 'inherit', 'guid' => $movefile['url'] ); $path = substr( $movefile['url'], strlen( $uploads['baseurl'] . '/' ) ); $attach_id = wp_insert_attachment( $attachment, $path, 0 ); require_once(ABSPATH . "wp-admin" . '/includes/image.php'); $attach_data = wp_generate_attachment_metadata( $attach_id, $movefile['file'] ); $success = wp_update_attachment_metadata( $attach_id, $attach_data ); if( $success ){ return $attach_id; }else{ return false; } } }
Now add the following JS Code
<script type="text/javascript"> $d= $("#dragarea"); $d.on('dragenter', function(ev) { //You can add css class for high light your drag area while you you enter your mouse }); $d.on('dragleave', function(ev) { //You can remove css class for high light your drag area while you you leave your mouse }); $d.on('dragover', function(ev) { ev.preventDefault(); }); $d.on('drop', function(ev) { ev.preventDefault(); ev.stopPropagation(); if(ev.originalEvent.dataTransfer){ if(ev.originalEvent.dataTransfer.files.length) { var droppedFiles = ev.originalEvent.dataTransfer.files; for(var i = 0; i < droppedFiles.length; i++) { var file_data = droppedFiles[i]; $("#filename").text(file_data.name); var form_data = new FormData(); form_data.append('file', file_data); form_data.append('action', 'custom_file_save'); jQuery.ajax({ url: 'admin-ajax.php', type: 'post', contentType: false, processData: false, data: form_data, dataType : "json", success: function(resp){ //Write your own code }) }); } } } }); </script>