1

Edit: Also I want to add, I get no errors whatsoever either in js, or PHP.

Technically, am using a form where I want the seller to fill up the necessary stuff of a product, also including the Image of the product to show in the Shopping area. I hate the default input type file of html5, and I have a hard time hiding it, so I came across with dropzone. Now dropzone kinda works on the client side, but doesn't seem to be working on the Server side. No file gets uploaded on the redirect I want it to be sent.

This is kind of a new thing to me, so I'm lost on what to do.

this is the html code

<form enctype='multipart/form-data' action='upload.php' method='POST'>
<div class='form-group'>
                    <input class='form-control' type='text' placeholder='Title' id='titleInput' name='titleInput'>
                </div>
<div class='form-group'>
                    <input class='form-control' type='number' placeholder='Price' id='priceInput' name='priceInput'>
                </div>
<div class='dropzone' id='myDropzone'>
                </div>
<button id='submit-all' type='submit' name='Post'>Submit<\button>
</form>

the javascript code

Dropzone.options.myDropzone= {
    url: 'upload.php',
    paramName: "file",
    autoProcessQueue: false,
    uploadMultiple: false,
    //parallelUploads: 5,
    //maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-all").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            //e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("titleInput", jQuery("#titleInput").val());
            formData.append("priceInput", jQuery("#priceInput").val());
        });

    }
}

And the upload.php code

<?php

if(isset($_POST['Post'])){
    if(isset($_FILES['file']['name'])){
        $imageName = $_FILES['file']['name'];
        $imageNameTemp = $_FILES['file']['tmp_name'];
        echo $imageName;
    }
    else{
        $imageName = "";
        echo "null";
    }
  $errorMessage = "";

  if($imageName != "") {
    $targetDir = "assets/images/productImages/";
    $imageName = $targetDir . uniqid() . basename($imageName);
    $imageFileType = pathinfo($imageName, PATHINFO_EXTENSION);

    if($_FILES['file']['size'] > 5000000) {
      $errorMessage = "Sorry your file is too big!";
      $uploadOk = 0;
    }

    if(strtolower($imageFileType) != "jpeg" && strtolower($imageFileType) != "png" && strtolower($imageFileType) != "jpg") {
      $errorMessage = "Sorry, only jpeg, jpg and png files are allowed";
      $uploadOk = 0;
    }

    if(strtolower($imageFileType) == "jpeg" || "jpg"){
      $src = imagecreatefromjpeg($imageNameTemp);
    }

    if(strtolower($imageFileType) == "png"){
      $src = imagecreatefrompng($imageNameTemp);
    }

    if($uploadOk == 1) {

      list($width_min, $height_min) = getimagesize($imageNameTemp);
      if($width_min > 1920){
        $newwidth_min = 1920;
        $newheight_min = ($height_min / $width_min) * $newwidth_min;
      }
      else if($height_min > 1920){
        $newheight_min = 1920;
        $newwidth_min = ($height_min / $width_min) * $newheight_min;
      }
      else{
        $newheight_min = $height_min;
        $newwidth_min = $width_min;
      }
      $tmp_min = imagecreatetruecolor($newwidth_min, $newheight_min);
      imagecopyresampled($tmp_min, $src, 0, 0, 0, 0, $newwidth_min, $newheight_min, $width_min, $height_min);
      imagejpeg($tmp_min, $imageName);
      $uploadOk = 1;

    }

      else {
        //image did not upload
        $uploadOk = 0;
      }

    }
}

?>

So, when it redirects to upload.php, it echoes null because that what i wrote, if no file is sent.

Please help

KCD Designs
  • 13
  • 4
  • https://tympanus.net/Tutorials/CustomFileInputs/ , but ... what error do you get with PHP? any? probably some write permissions problem – Flash Thunder Sep 11 '19 at 05:39
  • 2
    * What's the network request in Chrome dev tool when you click the button? * What's the result of echo $_FILES when you put on top of your upload.php code? – Chris Chen Sep 11 '19 at 06:03
  • 1
    I don't think we can see all the relevant code, eg where is `submit-all`, and what is `$_POST['Post']`? In any case, as suggested check your browser's dev tools and inspect the network request - does the POST request include your file? [Maybe this answer helps](https://stackoverflow.com/a/46732882/6089612). – Don't Panic Sep 11 '19 at 08:05
  • When the js redirects to upload.php, it just says null, which means no file has been passed – KCD Designs Sep 11 '19 at 09:03
  • It means `$_POST['Post']` and `$_FILES['file']['name']` are not set, which may or may not mean no file has been passed. The **sure** way to tell is to check your browser dev tools. – Don't Panic Sep 11 '19 at 10:06
  • I tried Flash thunder's css trick..! It does the job, but I want dropzone to be working.. Unfortunately it doesn't work – KCD Designs Sep 11 '19 at 15:14
  • `it doesn't work` unfortunately doesn't give us anything to go on, and you still haven't told us what you see in the browser dev tools. Anyway, good luck! – Don't Panic Sep 11 '19 at 15:45

0 Answers0