0

I have a webpage where a user can submit one or several images. I have designed this as a two-step solution, where step1.php contains file uploads and a checkbox:

<form method="post" action="step2.php" enctype="multipart/form-data" name="upload_form">
  <div class="form-group">
    <label for="InputFile">Choose images:</label>
      <input type="file" name="userfile[]" id="file" size="50"><br/>
      <input type="file" name="userfile[]" id="file" size="50"><br/>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" name="CheckThis" value="CheckThis">
      I have checked this box
    </label>
  </div>
  <input type="hidden" name="id" value="<?php echo $_REQUEST['uid']; ?>">
  <button type="submit" class="btn btn-default">Send inn</button>
</form>

Then, in step2.php, I handle the uploaded files, make thumbnails, and asks the user to give the images a title and a comment.

Now, I want to make this more user-friendly and a bit more web 2.0 :-)

My step1.php is now using Dropzone:

<form method="post" action="step2.php" enctype="multipart/form-data" name="upload_form">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="CheckThis" name="CheckThis" id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1">
      I have checked this box
    </label>
  </div>
  <input type="hidden" name="id" value="<?php echo $_REQUEST['uid']; ?>">
  <div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div>
  <button type="submit" class="btn btn-primary" id="submit-all" value="Submit">Submit all</button>
</form>

And my JS:

    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone("div#my-awesome-dropzone", { url: "upload.php"});
    myDropzone.on("sending", function(file, xhr, formData) { 
        // Will sendthe filesize along with the file as POST data.
        formData.append("filesize", file.size);  
        formData.append("foo", "bar");  
    });

upload.php is using the example-code from https://www.startutorial.com/articles/view/how-to-build-a-file-upload-form-using-dropzonejs-and-php

Uploading works, when a user selects/drops multiple files in Dropzone, the are uploaded to the server. However, I do not know how I can direct the user to step2.php where the user can see the images and give them a title or comment. I have tried to append formData as you can see, but those data are submitted to upload.php, not step2.php.

Update: To clarify my problem: If step2.php just contains:

<?php
phpinfo(INFO_VARIABLES);
?>

I do not see any references to the files I uploaded, nor the variables filesize and foo which I declared in the JS.

How can I transfer data from Dropzone and upload.php to step2.php?

Or, am I doing this old-fashioned? Should I do this in a completely other way? Can I get the users to submit a title and comment on the step1.php-page, and submit/upload all when done? How do a redirect them to a landing-page when done?

Sitron_NO
  • 9
  • 1
  • If uploading works, but some other things don't, can you reduce your question to the parts that are not working? Additionally, show what you've tried to make it work. For example, https://stackoverflow.com/questions/16998420/dropzone-js-how-to-do-something-after-all-files-are-uploaded shows how to perform actions after a successful upload – Nico Haase Mar 23 '20 at 10:37
  • @NicoHaase: I have tried to clarify my initial question, about what does not work in the code today. – Sitron_NO Mar 23 '20 at 13:02
  • Well, if you upload your files to `upload.php`, they are not uploaded to `step2.php` - looks pretty obvious to me :) If you want to go to "web 2.0", you should probably start using a templating engine and proper MVC – Nico Haase Mar 23 '20 at 13:12

0 Answers0