0

Hello,

In my project I have a form with many inputs and one object is using DropzoneJS to attach files.
Since I store all the inputs when I post the form I need somehow to read the file names of the uploaded files in my server,
currently I can only get the list of the original filename of the files that are uploaded.
For many reasons when a file is uploaded I am giving it a random name with time() function.

A part of my HTML form

<form id="appointment-form" class="box-body no-padding">
    <input name="firstname" type="text" />
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding">
        <div class="form-group">
            <form id="uploadInput" method="post" action="upload.php" class="dropzone">
                <div class="fallback">
                    <input name="file" type="file" />
                </div>
            </form>
        </div>
    </div>
  <button type="button" class="btn btn-default btn-flat">
     <i class="fa fa-plus"></i> Add
  </button>
</form>

upload.php

<?php
$ds          = DIRECTORY_SEPARATOR;
$storeFolder = 'files/tmp';

if (!empty($_FILES)) {
         $tempFile   = $_FILES['file']['tmp_name'];             
    $targetPath     = dirname( __FILE__ ) . $ds. $storeFolder . $ds;
    $path_parts     = pathinfo($_FILES["file"]["name"]);
    $extension      = $path_parts["extension"];
    $targetFile     = $targetPath . time() . '.' . $extension;
    echo $targetFile;
    move_uploaded_file($tempFile, $targetFile);
}
?>

How can I store the $targetFile in my HTML form so I can read them when I post the main form?!

2
Contributors
2
Replies
20
Views
3 Weeks
Discussion Span
Last Post by klaus.veliu
1

In other words you want to return back the new name of the uploaded file? In the PHP script you can send a JSON response with the filename, so move line 12 to 11 and replace the echo with:

header('Content-type: application/json');
echo json_encode(['target_file' => $targetFile]);

and use the success event in DropzoneJS to get the response from the server:

Then use javascript to parse JSON and compile a list of uploaded files as (hidden) inputs... but start with something easier: print the response.

By the way, time() will not prevent overwrites.

Edited by cereal

1

I managed to change the code as suggest, for the moment it seems to be working.
All the uploaded images are storen in a hidden input divided by a ,

Here is a simple version of the code to help everyone else in the future

<form id="appointment-form" class="box-body no-padding">
    <input name="firstname" type="text" />
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding">
        <div class="form-group">
            <form id="uploadInput" method="post" action="upload.php" class="dropzone">
                <div class="fallback">
                    <input name="file" type="file" />
                </div>
            </form>
            <input name="attached_files" value="" type="hidden" />
        </div>
    </div>
  <button type="button" class="btn btn-default btn-flat">
     <i class="fa fa-plus"></i> Add
  </button>
</form>
<script type="text/javascript">
        jQuery(".dropzone").dropzone({
            success : function(file, response) {
                //console.log(file);
                //console.log(response);
                if (response['target_file'] != '') {
                    var currentValue = jQuery("#appointment-form input[name='attached_files'").val();
                    if (currentValue == '') {
                        jQuery("#appointment-form input[name='attached_files'").val(response['target_file']);
                    } else {
                        jQuery("#appointment-form input[name='attached_files'").val(currentValue + ", " + response['target_file']);
                    }
                }
            }
        });
    </script>

upload.php

<?php
    header('Content-type: application/json');
    $ds          = DIRECTORY_SEPARATOR;  //1
    $storeFolder = 'files/tmp';   //2
    if (!empty($_FILES)) {
        $tempFile       = $_FILES['file']['tmp_name'];      
        $targetPath     = dirname( __FILE__ ) . $ds. $storeFolder . $ds;
        $path_parts     = pathinfo($_FILES["file"]["name"]);
        $extension      = $path_parts["extension"];
        $targetFile     = $targetPath . time() . '.' . $extension;
        move_uploaded_file($tempFile, $targetFile); //6
        echo json_encode(['target_file' => $targetFile]);
    }
?>

Thank you cereal :)

Edited by klaus.veliu: Update JS code

Votes + Comments
you're welcome :)
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.