Image not moving to upload directory (tutorial)

Question

This seems to be a pretty common issue, and I've been digging a lot through questions for my specific situation...but I can't find it.

I've been working with the Dropzone.js tutorial found here: http://www.startutorial.com/articles/view/how-to-build-a-file-upload-form-using-dropzonejs-and-php

The UI is showing fine and I'm noticing in my Tomcat log that the php file (see below) is being called - but, the image itself is not being uploaded into the directory.

I'm running Tomcat 7 on Ubuntu 14.04. I've made sure the directory has the proper permissions (777). See the code below:

index.html (only showing the div with the form element- please assume that the dropzone.js file is linked properly):

<h3>Upload Images</h3>
        <form action="upload.php" class="dropzone" method="get" enctype="multipart/form-data">
            <div class="fallback">
            <input type="file" name="file" multiple/>
            </div>
        </form>

upload.php:

<?php
$ds = DIRECTORY_SEPARATOR;
$storeFolder = 'uploads';

if (!empty($_FILES)) {

$tempFile = $_FILES['file']['tmp_name'];
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;
$targetFile =  $targetPath. $_FILES['file']['name'];
move_uploaded_file($tempFile,$targetFile);

}
?>

tomcat log:

[14/Jun/2015:18:28:14 -0400] "GET /ImageUploader/ HTTP/1.1" 200 2109
[14/Jun/2015:18:28:14 -0400] "GET /ImageUploader/bootstrap/css/bootstrap.min.css HTTP/1.1" 304 -
[14/Jun/2015:18:28:14 -0400] "GET /ImageUploader/css/main.css HTTP/1.1" 304 -
[14/Jun/2015:18:28:14 -0400] "GET /ImageUploader/bootstrap/css/bootstrap-theme.min.css HTTP/1.1" 304 -
[14/Jun/2015:18:28:14 -0400] "GET /ImageUploader/js/dropzone.js HTTP/1.1" 304 -
[14/Jun/2015:18:28:14 -0400] "GET /ImageUploader/bootstrap/js/bootstrap.min.js HTTP/1.1" 304 -
[14/Jun/2015:18:28:14 -0400] "GET /ImageUploader/css/dropzone.css HTTP/1.1" 304 -
[14/Jun/2015:18:28:14 -0400] "GET /ImageUploader/bootstrap/fonts/glyphicons-halflings-regular.woff2 HTTP/1.1" 304 -
[14/Jun/2015:18:28:19 -0400] "POST /ImageUploader/upload.php HTTP/1.1" 200 317

Any thoughts on what I'm missing to get the file to the uploads directory?

Answer 1

The problem here is that you've specified a GET method in your form which is overriding the method set inside a JS file related to the project files from that tutorial.

• Uploading files requires a POST method.

The code I took from that page in regards to the form, is the following:

<form action="upload.php" class="dropzone"></form>

and it does not imply a method. Use the exact coded files from the tutorial and do not modify them unless you know exactly what you're doing.

So change your form code to:

<form action="upload.php" class="dropzone" method="post" enctype="multipart/form-data">

The method is set inside the .js file that I found at and related to this, being https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js

Dropzone.prototype.defaultOptions = {
      url: null,
      method: "post",

The enctype is also inside that file:

 this.element.setAttribute("enctype", "multipart/form-data");

so again, use their codes and not yours.

Then you've added <input type="file" name="file" multiple/>, which isn't shown on that page.

If that gives you trouble, try removing it.

Visit the official website for this drag and drop code:

• http://www.dropzonejs.com/

and read their entire documentation.

Consult the following on PHP.net:

• http://www.php.net/manual/en/features.file-upload.post-method.php#example-354

---

Add error reporting to the top of your file(s) which will help find errors.

<?php 
error_reporting(E_ALL);
ini_set('display_errors', 1);

// rest of your code

Sidenote: Error reporting should only be done in staging, and never production.