PHP - Image Display In A Div Reading Image Filename From Database

$pic1= basename($_FILES['photo']['name'][0]);

$pic2= basename($_FILES['photo']['name'][1]);

if(!empty($_FILES['photo']['tmp_name']))
{
	
	// Number of uploaded files
	 $num_files = count($_FILES['photo']['tmp_name']);

	 /** loop through the array of files ***/
	 for($i=0; $i < $num_files;$i++)
	 {
		 // check if there is a file in the array
		 if(!is_uploaded_file($_FILES['photo']['tmp_name'][$i]))
		 {
			 $messages[] = 'No file uploaded';
		 }
		 else
		 {
			 // move the file to the specified dir
			 if(move_uploaded_file($_FILES['photo']['tmp_name'][$i],$target.'/'.$_FILES['photo']['name'][$i]))
			 {
			
				 $messages[] = $_FILES['photo']['name'][$i].' uploaded';
				
			 }
			 else
			 {
				 // an error message
				 $messages[] = 'Uploading '.$_FILES['photo']['name'][$i].' Failed';
			 }
		 }
	 }

// save the data to the database
 mysql_query("UPDATE privatelistings SET listingtitle='$listingtitle', make='$model', model='$model', exteriorcolour='$exteriorcolour', enginesize='$enginesize', fueltype='$fueltype', yearregistered='$yearregistered', transmission='$transmission', mileage='$mileage', nodoors='$nodoors', bodystyle='$bodystyle', price='$price', photo='$pic1', photo1='$pic2' WHERE id='$id'")
 or die(mysql_error()); 

<form action="" method="post" enctype="multipart/form-data">
 <input type="hidden" name="id" value="<?php echo $id; ?>"/>
 <div>
 <strong>Listing Title: *</strong> <input type="text" name="listingtitle" value="<?php echo $listingtitle; ?>"/>
 <br/>
 <strong>Make: *</strong> <input type="text" name="make" value="<?php echo $make; ?>"/>
 <br/>
 <strong>Model: *</strong> <input type="text" name="model" value="<?php echo $model; ?>"/>
 <br/>
 <strong>Exterior Colour: *</strong> <input type="text" name="exteriorcolour" value="<?php echo $exteriorcolour; ?>"/>
 <br/>
 <strong>Engine Size: *</strong> <input type="text" name="enginesize" value="<?php echo $enginesize; ?>"/>
 <br/>
 <strong>Fuel Type: *</strong> <input type="text" name="fueltype" value="<?php echo $fueltype; ?>"/>
 <br/>
 <strong>Year Registered: *</strong> <input type="text" name="yearregistered" value="<?php echo $yearregistered; ?>"/>
 <br/>
 <strong>Transmission: *</strong> <input type="text" name="transmission" value="<?php echo $transmission; ?>"/>
 <br/>
 <strong>Mileage: *</strong> <input type="text" name="mileage" value="<?php echo $mileage; ?>"/>
 <br/>
 <strong>Number of Doors: *</strong> <input type="text" name="nodoors" value="<?php echo $nodoors; ?>"/>
 <br/>
 <strong>Body Style: *</strong> <input type="text" name="bodystyle" value="<?php echo $bodystyle; ?>"/>
 <br/>
 <strong>Price: *</strong> <input type="text" name="price" value="<?php echo $price; ?>"/>
 <br/>
 <strong>Photo One:</strong> <input type='hidden' name='size' value='350000'><input type='file' name='photo[]'>
 <br>
 <strong>Photo Two:</strong> <input type='hidden' name='size' value='350000'><input type='file' name='photo[]'>
 <br>
 <input type="submit" name="submit" value="Submit">
 </div>
 </form>

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));