Dropzone Intergration

[eddcaton]

I am after some guideance / best practices for dropzone.js inside a text form. 

I have a form that is used to create listings on a website and it has text fields and a dropzone.js file uploader in it. But on submit of the completed form, i would like it to upload the files and submit the text fields to mysql. 

The upload files part is working and also the mysql part working but I cannot work out how to make the relationship between the listing and the images that are attributed to the listing, which are stored in different tables. 

At the point of submission the user is not logged in, so i cannot use that to assist with telling mysql where the image is attributed to..

I have looked into submitting the text form first then redirecting to the upload section but it really isn't what I want for the form. It would be nice that the user can submit all the information for that listing in one form. 

Now i am sure that there is a really simple way to achieve this but i am running round and round in circles on this one. 

 

 

 

 

 

 

 

 

 

Edited August 14, 2020 by eddcaton

[eddcaton]

I have managed to get a little further with this.

Could anyone advise how to get the filenames back to my form.php file:

This is my upload.php file that my form.php sends the drop zone upload request. 

<?php
/**
 * Dropzone PHP file upload/delete
 */

// Check if the request is for deleting or uploading
$delete_file = 0;
if(isset($_POST['delete_file'])){ 
    $delete_file = $_POST['delete_file'];
}

$targetPath = dirname( __FILE__ ) . '/user_uploads/item/';

// Check if it's an upload or delete and if there is a file in the form
if ( !empty($_FILES) && $delete_file == 0 ) {

    // Check if the upload folder is exists
    if ( file_exists($targetPath) && is_dir($targetPath) ) {

        // Check if we can write in the target directory
        if ( is_writable($targetPath) ) {


/* create new name file */




$source       = $_FILES["file"]["tmp_name"];
$destination  = "../img/imageDirectory/{$basename}";





            /**
             * Start dancing
             */
            $filename   = uniqid() . "-" . time(); // 5dab1961e93a7-1571494241
            $extension  = pathinfo( $_FILES["file"]["name"], PATHINFO_EXTENSION ); // jpg
            $basename   = $filename . "." . $extension; // 5dab1961e93a7_1571494241.jpg

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

            $targetFile = $targetPath . $basename;

            // Check if there is any file with the same name
            if ( !file_exists($targetFile) ) {

                move_uploaded_file($tempFile, $targetFile);

                // Be sure that the file has been uploaded
                if ( file_exists($targetFile) ) {
                    $response = array (
                        'status'    => 'success',
                        'file_link' => $targetFile
                    );
                } else {
                    $response = array (
                        'status' => 'error',
                        'info'   => 'Couldn\'t upload the requested file :(, a mysterious error happend.'
                    );
                }

            } else {
                // A file with the same name is already here
                $response = array (
                    'status'    => 'error',
                    'info'      => 'A file with the same name is exists.',
                    'file_link' => $targetFile
                );
            }

        } else {
            $response = array (
                'status' => 'error',
                'info'   => 'The specified folder for upload isn\'t writeable.'
            );
        }
    } else {
        $response = array (
            'status' => 'error',
            'info'   => 'No folder to upload to :(, Please create one.'
        );
    }

    // Return the response
    echo json_encode($response);
    exit;
}


// Remove file
if( $delete_file == 1 ){
    $file_path = $_POST['target_file'];

    // Check if file is exists
    if ( file_exists($file_path) ) {

        // Delete the file
        unlink($file_path);

        // Be sure we deleted the file
        if ( !file_exists($file_path) ) {
            $response = array (
                'status' => 'success',
                'info'   => 'Successfully Deleted.'
            );
        } else {
            // Check the directory's permissions
            $response = array (
                'status' => 'error',
                'info'   => 'We screwed up, the file can\'t be deleted.'
            );
        }
    } else {
        // Something weird happend and we lost the file
        $response = array (
            'status' => 'error',
            'info'   => 'Couldn\'t find the requested file :('
        );
    }

    // Return the response
    echo json_encode($response);
    exit;
}
?>

I have seen that some people user something like this on the form.php file: 

onyxDropzone.on("success", function(file, response) {
					let parsedResponse = JSON.parse(response);
					file.upload_ticket = parsedResponse.file_link;

But unfortunetly my understanding on JAVA is very limited. 

Basically I want to get all the filenames of the files that have been updated in the drop zone and then save them as a php variable which then i can insert into MYSQL when the form is submitted.