Chibi

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 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 Here I was hoping that I could grab the $filename and pass it on to the 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));

That was it. THANK YOU SO MUCH. 😀

Yep that is what I was trying to get to in my question. Sorry it wasn't clear enough.

No that didn't work. The way it's looking now is Banner 1 has Frame 3, Frame 4 and Frame 5 checked, instead of Frame 1 Banner 2 has Frame 1 checked instead of Frame 1 and Frame 2 Then I created Banner 3 and that has nothing checked instead of Frame 3 and Frame 4 Here is my whole code. Maybe the issue is with my other code and not the sql statement <?php //GETS THE BANNER FROM THE b_id FROM THE URL if(isset($_GET['b_id'])) { $banner_id = $_GET['b_id']; } $query = "SELECT * FROM banners WHERE id = $banner_id"; $select_banner_by_id = mysqli_query($conn, $query); while($row = mysqli_fetch_assoc($select_banner_by_id)) { $banner_id = $row['id']; $banner_title = $row['title']; } //THIS UPDATES THE BANNER if(isset($_POST['edit_banner'])) { $banner_title = $_POST['banner_title']; $query = "UPDATE banners SET "; $query .= "title = '{$banner_title}' "; $query .= "WHERE id = $banner_id "; $update_banner = mysqli_query($conn, $query); confirmQuery($update_banner); //THIS REDIRECTS THE PAGE AFTER SAVING header("Location: banners.php"); } ?> <form action="" method="POST"> <div class="form-group"> <label for="banner_title">Title</label> <input type="text" class="form-control" name="banner_title" value="<?php echo $banner_title ?>"> </div> <!-- BEGIN FRAMES --> <?php $query = " SELECT f.id as frameId, f.title as frameTitle, COUNT(DISTINCT bf.banner_id) as banner_table "; $query .= "FROM frames f "; $query .= "LEFT JOIN banner_frame bf ON bf.frame_id = f.id "; $query .= "GROUP BY f.id"; $banner_frame = mysqli_query($conn, $query); while($row = mysqli_fetch_assoc($banner_frame)) { $frame_id = $row['frameId']; $frame_title = $row['frameTitle']; $checked = ''; if ($row['banner_table'] == $banner_id) { $checked = 'checked'; } echo "<div class='form-check'>"; echo "<input type='checkbox' name='frames[]' id='frame_checkbox' value='$frame_id' $checked> "; echo "<label for='frame_checkbox'>"; echo $frame_title; echo "</label>"; echo "</div>"; } ?> <div class="form-group"> <button type="submit" class="btn btn-dark btn-lg btn-block" name="edit_banner">Save</button> </div> </form>

The purpose of the query is to list all the frames from the frames table and then only put a check next to those that is linked to the banner table through the pivot table.

I'm creating an edit page that has a many to many relationship between the banners table and the frames table. The problem I'm having is that I'm getting duplicates of the frames. I hope I've explained everything clearly. So for example I have Instead of This is my tables banners table frames table banner_frame table Here is my code $query = "SELECT frames.id as frameId, frames.title as frameTitle, banners.id as banner_id "; $query .= "FROM frames "; $query .= "LEFT JOIN banner_frame ON banner_frame.frame_id = frames.id "; $query .= "LEFT JOIN banners ON banners.id = banner_frame.banner_id"; $banner_frame = mysqli_query($conn, $query); confirmQuery($banner_frame); while($row = mysqli_fetch_assoc($banner_frame)) { $frame_id = $row['frameId']; $frame_title = $row['frameTitle']; $checked = ''; if ($row['banner_id'] == $banner_id) { $checked = 'checked'; } echo "<div class='form-check'>"; echo "<input type='checkbox' name='frames[]' id='frame_checkbox' value='$frame_id' $checked> "; echo "<label for='frame_checkbox'>"; echo $frame_title; echo "</label>"; echo "</div>"; }