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 :)

cereal commented: you're welcome :) +15

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

Someone else helped me to fond a solution.
Here is all the logic.

$source = '
  <img src="1.jpg"/>' . "\n" . '
  <img src="2.jpg" alt="2" />' . "\n" . '
  <img name="omg" src="3" asd="sdfgf" alt="2.jpg">' . "\n" . '
  <img src="4.jpg" alt="4" width="1107" height="1626"/>' . "\n" . '
  <img src="5.jpg" id="zz" alt="5" >' . "\n" . '
  <img src="6.jpg" alt="6" width="1229" height="922" />' . "\n" . '
  <img src="7.jpg" alt="7"/>' . "\n" . '
  <img src="8.jpg" alt="8" width="807" height="1117">
';

$pattern = '~(<img .*?src="([^"]+)" ?.*?(alt="([^"]+)")?.*?>)~';
$replacement = '<a href="$2" data-fancybox="image-popup" data-caption="$4">$1</a>';

$result = preg_replace($pattern, $replacement, $source);

echo 'SOURCE:<br />' . nl2br(htmlspecialchars($source)) . '<br /><br /><br />';
echo 'RESULT:<br />' . nl2br(htmlspecialchars($result));

Good job diafol, you are the best as always!