How to pass form data with Fine Uploader?

Question

I can easily upload images with Fine Uploader but I can't figure out how I can pass other form data to the endpoint at the same time and how to handle the data.

I'd like to make a form that redirects the user to other location after submitting the form. So far I'm playing with the Fine uploader documentation examples - but can't make them work either.

If I try to write to disk $_POST contents in the endpoint.php, it makes image uploading crash. If I upload images and submit form, I get error messages from endpoint.php.

You can run it here: http://www.digioppikirja.fi/v3/fineuploader.html

Here's HTML:

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://www.digioppikirja.fi/v3/custom.fineuploader-4.4.0/custom.fineuploader-4.4.0.min.js"></script>
    <script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader">
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span>Drop files here to upload</span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>Select Files</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list">
                <li>
                    <div class="qq-progress-bar-container-selector">
                        <div class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <span class="qq-upload-file-selector qq-upload-file"></span>
                    <span class="qq-upload-size-selector qq-upload-size"></span>
                    <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
                    <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>
        </div>
    </script>
<head>

<body>
    <form action="endpoint.php" method="post" enctype="multipart/form-data" id="qq-form">
        <label>Enter your name</label>
        <input type="text" name="user_name" required>
        <label>Enter your email</label>
        <input type="email" name="user_email" required>
        <input type="submit" value="Done">
    </form>

    <div id="my-uploader"></div>

    <script>
        $("#my-uploader").fineUploader({

            form: {
                        interceptSubmit: false,
                        autoUpload: true,
                    },


            });
    </script>
</body>

Here's PHP:

 <?php

/**
 * PHP Server-Side Example for Fine Uploader (traditional endpoint handler).
 * Maintained by Widen Enterprises.
 *
 * This example:
 *  - handles chunked and non-chunked requests
 *  - assumes all upload requests are multipart encoded
 *
 *
 * Follow these steps to get up and running with Fine Uploader in a PHP environment:
 *
 * 1. Setup your client-side code, as documented on http://docs.fineuploader.com.
 *
 * 2. Copy this file and handler.php to your server.
 *
 * 3. Ensure your php.ini file contains appropriate values for
 *    max_input_time, upload_max_filesize and post_max_size.
 *
 * 4. Ensure your "chunks" and "files" folders exist and are writable.
 *    "chunks" is only needed if you have enabled the chunking feature client-side.
 */

// Include the upload handler class
require_once "handler.php";
require_once "../cfg/digikirjat.cfg.php";

$uploader = new UploadHandler();

// Specify the list of valid extensions, ex. array("jpeg", "xml", "bmp")
$uploader->allowedExtensions = array(); // all files types allowed by default

// Specify max file size in bytes.
$uploader->sizeLimit = 10 * 1024 * 1024; // default is 10 MiB

// Specify the input name set in the javascript.
$uploader->inputName = "qqfile"; // matches Fine Uploader's default inputName value by default

// If you want to use the chunking/resume feature, specify the folder to temporarily save parts.
$uploader->chunksFolder = "chunks";

$method = $_SERVER["REQUEST_METHOD"];
if ($method == "POST") {
    header("Content-Type: text/plain");

    // Call handleUpload() with the name of the folder, relative to PHP's getcwd()
    $result = $uploader->handleUpload($_dirs['temp'].'/upload/');

    // To return a name used for uploaded file you can use the following line.
    $result["uploadName"] = $uploader->getUploadName();


    echo json_encode($result);

    // THIS MAKES UPLOADS CRASH:
    $a = print_($_POST, true);
    file_put_contents($_dirs['temp'].'/upload/post.txt', $a);

}
else {
    header("HTTP/1.0 405 Method Not Allowed");
}



?>

score 2 · Answer 1 · answered May 08 '14 at 20:11

2

All of the data in your form is being passed to your handler without issue. Your server is not responding with a valid JSON string though. It looks like you haven't read the comments at the top of the PHP file you included. You are missing a handler.php file, for starters.

If you want to do something like redirect the user to a new page after the upload has successfully completed, return a property in your server response that includes the URL, and redirect the user in your onComplete callback handler.

For example:

callbacks: {
    onComplete: function(id, name, response) {
        if (response.success) {
            location.href = response.newUrl;
        }
    }
}

answered May 08 '14 at 20:11

Ray Nicholus

19,538
14
59
82

Hmmm... I read the comments at the top of the php file and there's the handler.php at the same directory. Still the server is not responding properly. – Tuomo B May 09 '14 at 04:02
There is some issue with your server configuration then, as the request is not being handled properly. – Ray Nicholus May 09 '14 at 04:04
Looks like you fixed it, as uploads are succeeding as of my last attempt. – Ray Nicholus May 09 '14 at 04:43
Yes! Fortunately I found the way to make it work as I wanted. – Tuomo B May 09 '14 at 05:28

score 2 · Accepted Answer · answered May 09 '14 at 05:26

I found the answer myself. To make Fine Uploader work with PHP forms, do following:

Set form: { interceptSubmit: true, autoUpload: false,}, Now the user can complete text fields. When the user pushes submit button, Fine Uploader begins the file upload.
Set callbacks: { onComplete: function(id, name, response) { if (response.success) { location.href = 'YOUR_URL_HERE'; } } } This is how you can reload the page or do something similar that normally happens when you submit a form. Of course you can reload the content with Javascript too.
Endpoint.php: The content of the form is found most easily from $_REQUEST.
Any bug at any part of endpoint.php will probably cause an error message when uploading the file even if the upload would be succesfull. This is what I learned.

Maybe you should also mention setting the id of the form to qq-form since that's the default id that FineUploader looks for. But you can also better just specify your form id which results in default interceptSubmit true and autoUpload false. So adding the following to your FineUploader...form: { element: "someTestFormId" }. See also http://stackoverflow.com/a/41492246/4975760 — Dacker, Jan 06 '17 at 00:18

How to pass form data with Fine Uploader?

2 Answers2