dropzone.js not moving file to upload folder

Question

i work with the dropzone.js, upload plugin and PHP. I am trying to use dropzone show success Icon and print image preview, but it is not uploading my images to the upload directory. how can I fix this?

HTML:

<div class="dropzone dropzone-previews" id="my-awesome-dropzone">
  <form action="<?PHP echo SITE.'/controller/'?>upload.php"></form>
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</div>

JS:

<script>
    $(document).ready(function(){
    Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
    // The configuration we've talked about above
    url: '<?PHP echo SITE.'/controller/'?>upload.php',
    previewsContainer: ".dropzone-previews",
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100
  }

 });
</script>

PHP:

<?php
$ds          = DIRECTORY_SEPARATOR;  //1

$storeFolder = '../../uploads/news/';   //2

if (!empty($_FILES)) {

    $tempFile = $_FILES['file']['tmp_name'];          //3             

    $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;  //4

    $targetFile =  $targetPath. $_FILES['file']['name'];  //5

    move_uploaded_file($tempFile,$targetFile); //6

}
?> 

Answer 1

There are 2 different things needed to fix this problem.

Looks to me like you are using http://www.startutorial.com/articles/view/how-to-build-a-file-upload-form-using-dropzonejs-and-php to get started with dropzone. Depending on you OS, you WILL need to alter your file permissions, even though the comment thread on that page says it works locally. That is not true for all AMP stacks or even in different stack versions/distributions.

First

Make sure the permissions of your upload path are set properlly. Certain folders (the tmp psuedo folder for instance, don't have this problem, but user created endpoints may. If you update your question with your specific OS/stack name, I'll update this answer with the specific steps necessary to do so.

Second

Add enctype= multipart/form-data attribute to your form tag.

Very Important

On the subject brought up by Marc B, I'd like to point out that this tutorial is just a starting point, and should not be uploaded to any publicly accessible environment without some sort of validation and security. Basic security for this would be things like, only allowing certain extensions to be uploaded (can be done server side, and also configured in dropzone.js initialization), and adding a CSRF token. Below is some recommended dropzone options configuration settings to at least strengthen the validation on the client side:

var unique = "some-unique-string";
var acceptedFileTypes = "image/*"; //dropzone requires this param be a comma separated list

Dropzone.options.myAwesomeDropzone = { 

  // your other settings as listed above
  maxFiles: 10, // allowing any more than this will stress a basic php/mysql stack
  paramName: unique,
  headers: {"MyAppname-Service-Type": "Dropzone"},
  acceptedFiles: acceptedFileTypes

}

And some PHP things to note based on the above:

• you will need to add a check to ensure the custom header is in the request (this is just one more easy security step
• Add a check with php to ensure the files have an acceptable type (you always should do this regardless of the server side validation)
• I recommend you convert all file names to lowercase before validating them with php
• EDIT: you will also need to make sure to change your php $_FILES['file'] to instead match the unique string configured by the dropzone paramName option.. &_Files['some-unique-string']