Drag n Drop File Upload...javascript settings???

Here's client side setup:1) The field

 <div class="file-upload-wrapper">
 <input type="file" id="blahblah" name="blahblah" class="fileUpload" accept="image/*" data-show-remove="true" data-default-file="someimagefile" />
 </div>

You can set the ID to whatever you want, as well as the name. You could also use the ID for the javascript but this example is using the class "fileUpload" which, again, you can call whatever you want to. The "data-show-remove" attribute isn't necessary as showing it is default. data-default-file adds a nice background image the uploader or you can use it to show what image is currently set in your database.

2) the javascriptFirst - initialize the file_upload and assign to a variable (for the next part):

    var img = $('.fileUpload').file_upload();

the variable can be called whatever you want, but notice the ".fileUpload". This has to be the same as the id or class you use in the file field (see above).

Second - providing for the "Remove" button to function:

           img.on('file_upload.beforeClear', function(event, element){
                return confirm("Are you Sure?");
           });
           img.on('file_upload.afterClear', function(event, element) {
                $.ajax({
                     url: 'path/to/ajax',
                     type: 'POST',
                     data: {
                          'delete_img': 1,
                          'imageid': gotten-through-function-or-other-means
                     }
                })
           })

Since the delete button is enabled pressing it needs to do something. This makes the button throw up a "confirm" alert and if confirmed, it deletes the current image and removes it as the "default-image-file". I have this entire thing inside of another ajax call (for my own purposes) which gets me the image's ID. You can signify which image you're deleting by any means you'd like. Server side looks like this:

if(isset($_POST['delete_img'])) { $pdo->exec("UPDATE table_name SET image_field = NULL WHERE imageid = $_POST[imageid]"); }

Next - adding/uploading the image:

           $(function() {
                $('.fileUpload').change(function() {
                     var fd = new FormData();
                     var file = $('#image_id_being_uploaded')[0].files[0];
                     fd.append('file', file);
                     fd.append('pageid', pid);  //this saves the image's filename to a table
                     fd.append('field', 'field_name_in_database');
                     fd.append('upload_image', 1);  
                     $.ajax({
                          url: 'path/to/ajax',
                          type: 'POST',
                          data: fd,
                          contentType: false,
                          processData: false,
                          success: function(data) {
                               if(data != 0) {
                                    // do something to show good
                               } else {
                                        // do something to show bad, like:
                                    toastr.error("Something went wrong, please try again", "Upload Error");
                               }
                          }
                     })
                })
           })

We create a function which is called if there is a change in the .fileUpload class's field (a drop of a file, for example). We initialize a FormData() which is required for file uploads. We assign a few variables through the .append() function, most importantly the file itself. We then use ajax() to do the upload, being SURE that contentType and processData are both set to false. Create a success function() if you want. I'm really getting into toastr notifications.

Finally the server side for saving the image:

if(isset($_POST['upload_image'])) {
     if(isset($_FILES['file'])) {
          $tempfile = $_FILES['file']['tmp_name'];
          $filename = $_FILES['file']['name'];
          $location = path/to/your/uploads/';         
     }
     $uploadOk = 1;
     $imageFileType = pathinfo($filename, PATHINFO_EXTENSION);
     $valid_extensions = array("jpg", "jpeg", "png");
     if(!in_array(strtolower($imageFileType), $valid_extensions)) {
          $uploadOk = 0;
     }
     $filename = date('Ymdhis'). rand(0,4) .'.'. $imageFileType;

     if($uploadOk == 0) {
          echo 0;
     } else {
          if(move_uploaded_file($tempfile, $location . $filename)) {
               $pdo->exec("UPDATE table_name SET `$_POST[field]` = '$filename' WHERE primary_key = $_POST[pageid]");
          } else {
               echo 0;
          }
     }
}

Pretty straight forward. I limit this particular file upload to images of jpg or png. I also like to randomize filenames, so I create a new filename using the date and time and a random 4 digit string. Totally optional. If the file fails to upload, "0" is returned and in the "success: function()" in ajax you can do something with this.