PHP - Help With A Drag And Drop Image Append

I'm trying to create a form that has a drag and drop image with it. I did a tutorial for the drag and drop and now I'm trying to put it together with a form.

The problem I'm having is that I'm not able to get the filename, so that I can insert it into the database.

I've tried doing this

if(isset($_POST['add_product']))
{
    $filename = $_FILES['files']['name'];

    echo print_r($filename);
    die();
}

but I get a blank array

Array ( [0] => ) 1

and when I do this

if(isset($_FILES['files']))
{

    $filename = $_FILES['files']['name'];

    echo print_r($filename);
    die();

}

I get the name of my image, but if I do this

if(isset($_FILES['files']))
{
    $filename = $_FILES['files']['name'];
}

if(isset($_POST['add_product']))
{
    echo print_r($filename);
    die();
}

I get a blank array as well

Array ( [0] => ) 1

Here I was hoping that I could grab the $filename and pass it on to the

if(isset($_POST['add_product]))

Here is my form

<form action="" method="POST" enctype="multipart/form-data">
    <div class="form-group">
        <label for="title">Title</label>
        <input type="text" class="form-control" name="title">
    </div>

    <div class="form-group">
        <label for="content">content</label>
        <textarea name="content" id="content" class="form-control" cols="30" rows="10"></textarea>
    </div>

    <input type="file" name="files[]" id="standard-upload-files" multiple>
    <input type="submit" value="Upload files" id="standard-upload">

    <div class="wrapper">
        <div class="upload-console">
            <h2 class="upload-console-header">
                Upload
            </h2>

            <div class="upload-console-body">
                <div class="upload-console-drop" id="drop-zone">
                    just drag and drop files here
                </div>

                <div class="bar">
                    <div class="bar-fill" id="bar-fill">
                        <div class="bar-fill-text" id="bar-fill-text"></div>
                    </div>
                </div>

                <div class="hidden" id="uploads-finished">
                    <h3>Process files</h3>

                    <div class="upload-console-upload">
                        <a href="#">filename.jpg</a>
                        <span>Success</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-dark btn-lg btn-block" name="add_product">Save</button>
    </div>
</form>

Here is the js files that I got from the tutorial that I did.

main.js

(function(){
    "use strict";

    var dropZone = document.getElementById('drop-zone');
    var barFill = document.getElementById('bar-fill');
    var barFillText = document.getElementById('bar-fill-text');
    var uploadsFinished = document.getElementById('uploads-finished');

    var startUpload = function(files){
        // console.log(files);
        app.uploader({
            files: files,
            progressBar: barFill,
            progressText: barFillText,
            processor: 'index.php',

            finished: function(data){
                // console.log(data);
                var x;
                var uploadedElement;
                var uploadedAnchor;
                var uploadedStatus;
                var currFile;

                for(x = 0; x < data.length; x = x + 1)
                {
                    currFile = data[x];

                    uploadedElement = document.createElement('div');
                    uploadedElement.className = 'upload-console-upload';

                    uploadedAnchor = document.createElement('a');
                    uploadedAnchor.textContent = currFile.name;

                    if(currFile.uploaded)
                    {
                        uploadedAnchor.href = 'uploads/'+currFile.file;
                    }

                    uploadedStatus = document.createElement('span');
                    uploadedStatus.textContent = currFile.uploaded ? 'Uploaded' : 'Failed';

                    uploadedElement.appendChild(uploadedAnchor);
                    uploadedElement.appendChild(uploadedStatus);

                    uploadsFinished.appendChild(uploadedElement);
                }

                uploadsFinished.className = '';

            },

            error: function(){
                console.log('there was an error');
            }
        });
    };

    //drop functionality

    dropZone.ondrop = function(e){
        e.preventDefault();
        this.className = 'upload-console-drop';

        startUpload(e.dataTransfer.files);
    };

    dropZone.ondragover = function(){
        this.className = 'upload-console-drop drop';
        return false;
    };

    dropZone.ondragleave = function(){
        this.className = 'upload-console-drop';
        return false;
    };
}());

upload.js

var app = app || {};

(function(o){
    "use strict";

    //private methods
    var ajax, getFormData, setProgress;

    ajax = function(data){


        var xmlhttp = new XMLHttpRequest();

        var uploaded;

        xmlhttp.addEventListener('readystatechange', function(){
            if(this.readyState === 4)
            {
                if(this.status === 200)
                {
                    uploaded = JSON.parse(this.response);

                    if(typeof o.options.finished === 'function')
                    {
                        o.options.finished(uploaded);
                    }
                }else{
                    if(typeof o.options.error === 'function')
                    {
                        o.options.error();
                    }
                }
            }
        });

        xmlhttp.upload.addEventListener('progress', function(e){
            var percent;

            if(e.lengthComputable === true)
            {
                percent = Math.round((event.loaded / event.total) * 100);
                setProgress(percent);
            }
        });

        xmlhttp.open('post', o.options.processor);
        xmlhttp.send(data);
    };

    getFormData = function(source){

        var data = new FormData();
        var i;

        for(i = 0; i < source.length; i = i + 1)
        {
            data.append('files[]', source[i]);
        }

        return data;
    };

    setProgress = function(value){
        if(o.options.progressBar !== undefined)
        {
            o.options.progressBar.style.width = value ? value + '%' : 0;
        }

        if(o.options.progressText !== undefined)
        {
            o.options.progressText.textContent = value ? value + '%' : '';
        }
    };

    o.uploader = function(options){

        o.options = options;

        if(options.files !== undefined)
        {
            ajax(getFormData(o.options.files));

            // getFormData(o.options.files);
        }
    }
}(app));

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Portlets</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="/resources/demos/style.css">-->
<style>
body {
min-width: 520px;
}
.interview-questions-column {
width: 400px;
float: left;
padding-bottom: 100px;
}

.question-bank {
width: 500px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}



.sortable {
border: 1px solid #eee;
width: 95%;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
.sortable li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 95%;
}

.bank-quertion-sotrable {
    border: 1px solid #eee;
width: 150px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;

}

.bank-quertion-sotrable li{
    margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 200px;

}
.ui-state-default { height: 1.5em; line-height: 1.2em; }


</style>
<script>
$(function() {
$( ".interview-questions-column" ).sortable({
connectWith: ".interview-questions-column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all"
});

$( ".portlet" )
.addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" )
.prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");

$( ".portlet-toggle" ).click(function() {
var icon = $( this );
icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
});
});


$(function() {
    $( ".sortable" ).sortable({
         placeholder: "ui-state-default",
         connectWith: ".connectedSortable",
         /*receive: function(event, ui) {
           // only perform for sub drop downs
              if($(this).hasClass('question_bank'))
               {
                   // if the item doesn't have the matching sub class
                   if (!$(this).hasClass($(ui.item).attr('class')))
                   {
                       // cancel the sortable
                       $(ui.sender).sortable('cancel');
                   }
               }
                alert('receive');
                alert(ui.sender.attr("dataid"));
                alert(ui.sender.toSource());
            //  alert("[" + this.id + "] received [" + ui.item.attr("id") + "] from [" + ui.sender.attr("id") + "]");

        },*/

        update: function (event, ui) {
            //serial = $('#sortableF').sortable('serialize');
            var data = $(this).sortable('serialize');
            alert(data);
                 //alert('update sortable');
                 //alert("[" + this.id + "] received [" + ui.item.attr("id") + "] from [" + ui.sender.attr("id") + "]");
        // POST to server using $.post or $.ajax
        /*$.ajax({
            data: 'test',
            type: 'POST',
            url: '/your/url/here'
        });*/
    }




    }).disableSelection();
});


$(function() {
$( ".draggable" ).draggable({
connectToSortable: ".sortable",
helper: "clone",
/*revert: function(valid) {
        if(valid) {

            alert("drop is valid");
            //Dropped in a valid location
        }
        else {
            alert("drop is invalid");
            //Dropped in an invalid location
        }
       // return !valid;
      return false;
    }*/
stop: function( event, ui ) {
    // alert(ui);
    // alert("[" + this.id + "] received [" + ui.item.attr("id") + "] from [" + ui.sender.attr("id") + "]");

    }   

});


});
    $( "ul, li" ).disableSelection();
</script>
</head>
<body>
<div class="interview-questions-column">

<div class="portlet">
<div class="portlet-header">Feeds</div>
    <div class="portlet-content">
        <ul id="sortableF" class="connectedSortable sortable">
            <li class="ui-state-default" id="item-1">Item 1</li>
            <li class="ui-state-default" id="item-2">Item 2</li>
            <li class="ui-state-default" id="item-3">Item 3</li>
            <li class="ui-state-default" id="item-4">Item 4</li>
            <li class="ui-state-default" id="item-5">Item 5</li>
        </ul>
    </div>
</div>


    <div class="portlet">

    <div class="portlet-header">News</div>
    <div class="portlet-content">  
        <ul id="sortableS" class="connectedSortable sortable">
            <li class="ui-state-default" id="item-6">Item 1</li>
            <li class="ui-state-default" id="item-7">Item 2</li>
            <li class="ui-state-default" id="item-8">Item 3</li>
            <li class="ui-state-default" id="item-9">Item 4</li>
            <li class="ui-state-default" id="item-10">Item 5</li>
        </ul>
    </div>

    </div>




    <div class="portlet">
    <div class="portlet-header">Shopping</div>
    <div class="portlet-content">

     <ul id="sortableS" class="connectedSortable sortable">
            <li class="ui-state-default" id="item-11">Item 1</li>
            <li class="ui-state-default" id="item-12">Item 2</li>
            <li class="ui-state-default" id="item-13">Item 3</li>
            <li class="ui-state-default" id="item-14">Item 4</li>
            <li class="ui-state-default" id="item-15">Item 5</li>
        </ul>

    </div>
    </div>




    <div class="portlet">
    <div class="portlet-header">Links</div>
    <div class="portlet-content">

     <ul id="sortableS" class="connectedSortable sortable">
            <li class="ui-state-default" id="item-16">Item 1</li>
            <li class="ui-state-default" id="item-17">Item 2</li>
            <li class="ui-state-default" id="item-18">Item 3</li>
            <li class="ui-state-default" id="item-19">Item 4</li>
            <li class="ui-state-default" id="item-20">Item 5</li>
        </ul>

    </div>
    </div>



    <div class="portlet">
    <div class="portlet-header">Images</div>
    <div class="portlet-content">

      <ul id="sortableS" class="connectedSortable sortable">
            <li class="ui-state-default" id="item-21">Item 1</li>
            <li class="ui-state-default" id="item-22">Item 2</li>
            <li class="ui-state-default" id="item-23">Item 3</li>
            <li class="ui-state-default" id="item-24">Item 4</li>
            <li class="ui-state-default" id="item-25">Item 5</li>
        </ul>

    </div>
    </div>

</div>

<div class="question-bank">

<div class="portlet">
    <div class="portlet-header">Question bank</div>
        <div class="portlet-content">
           <ul id="question_back" class="connectedSortable bank-quertion-sotrable">
                <li class="ui-state-default draggable" id="item-26">Item 1</li>
                <li class="ui-state-default draggable" id="item-27">Item 2</li>
                <li class="ui-state-default draggable" id="item-28">Item 3</li>
                <li class="ui-state-default draggable" id="item-29">Item 4</li>
                <li class="ui-state-default draggable" id="item-30">Item 5</li>
            </ul>
         </div>
    </div>

</div>


</body>
</html>