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?!

3
Contributors
3
Replies
25
Views
8 Months
Discussion Span
Last Post by PARDEEP_3
2

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 developer707: Update JS code

Votes + Comments
you're welcome :)
-1

@developer707

hi bro! i used the above code given by you but on frontend in input value, its adding value 'undifined', can you please tell me how to fix it?

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.