Dragging and Dropping Files to form

Question

What I am trying to do is have a user be able to take a file from their desktop and drag it over to a box and then send that file to the form, have the user submit the form and upload it.

I've tried things like dropzone.js but the problem is that it and other SO posts I read use AJAX to upload the file, but none of it reloads the webpage so I can execute the php code at the top. I want to specifically have the user click submit to upload the file after they have dragged the file in. I have the file upload code I just need help implementing drag and drop.

What I have now

<?php
require_once'FileClass.php';

 $fileHandler = new handleFiles();



if ($_SERVER["REQUEST_METHOD"] == "POST") {


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

    if ($fileHandler->is_file_allowed($_FILES['files']['name'][0], $_FILES['files']['size'][0], $_FILES['files']['type'][0])) {
        $feedback = "Image submitted your link: " . "YOUR_LINK" . " " . $fileHandler->generateURL($_FILES['files']['name'][0],$_FILES['files']['tmp_name'][0], $_POST["tags"]);
}
    else {
        $feedback = "Something went wrong try again make sure your image is in jpg, jpeg, or png form";
    }
}
    else {
        $feedback = "Something went wrong try again make sure your image is in jpg, jpeg, or png form";
    }




}








?>

<!DOCTYPE HTML>
<html lang = "en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel = "stylesheet" href = "index.css">
<title> Share Your Images </title>
</head>

    <body>
<?php
        if (isset($_GET['url']) && $_GET['url'] === 'new') {
/*
displays all the new posts
*/
echo "<style> .container {display:none;} </style>"; //hides the image selection form
echo "<link rel = 'stylesheet' href = 'imageGrid.css'>";
    $fileHandler->select_newest_posts();
}
elseif (isset($_GET['url'])) {
    //if redirect to the image directory and the specific image

   header("Location:/imagesharing/Images/" . $_GET['url']);
}
  ?>




<span class = "header"> 

    <span class = "headerText"> Playpics 
        </span> 


<nav>



<ul>



  <li> <a href = "/imagesharing/index.php" title = "Home">  Home </a> </li>
  <li> <a href = "#" title = "Browse">  Browse </a> </li>
  <li> <a href = "#" title = "Help">  Help  </a> </li>

</ul>

    <div class = "hoverMenu"> 
    <div> <a href = "new">   New </a> </div>
    <div> <a href = "new">  Witcher 3 </a></div>
    <div> <a href = "new">  Skyrim </a> </div>
    <div> <!-- div for the form -->
    <form method = "GET" action = ""> 
    <input type = "text" name = "searchForTags" placeholder="Search by Tags">
    <input type = "submit" name = "submit" value = "Search">
    </form>  
    </div>
    </div>

</nav>


</span>

<img class = "bg" src = "">



<div class = "container">




    <div class = "drop"> 


          <?php
    // user for testing this method $fileHandler->get_image_from_tags("witcher3");
    if (isset($fileHandler) && isset($feedback)) {
        echo $fileHandler->feedbackMessage($feedback);
    }

    ?>
       <span class = "dropText">  Drag Your Images Here (only .jpg, .jpeg, and .png)
        <br>
        <span id = "fileText"> </span>
        </span>

        </div>



        <form action = "index.php" method = "POST" enctype="multipart/form-data"> 
    <input type = "file" id="files" name="files[]" multiple>
    <input type = "text" name = "tags" placeholder= "Enter any applicable tags (optional)">
    <input type = "submit" name = "submit" value = "Submit">


    </form>





</div>


</body>

</html>

This is not possible in most browsers. See: http://stackoverflow.com/questions/12165616/drag-and-drop-files-to-be-uploaded-when-the-form-is-submitted?rq=1. A fun work-around: http://stackoverflow.com/a/12713396/2424735 (also only for Chrome, FF and Safari) — Tum, Sep 01 '16 at 11:11
Why not just use Ajax and have your upload code in a separate file? Then you have all the info you need and the user experience is much better? — M. Eriksson, Sep 01 '16 at 11:14
After the user uploads their files I am trying to give them feedback and this doesn't seem to work using AJAX and php — johnbumble, Sep 01 '16 at 11:50

Dragging and Dropping Files to form

0 Answers0