How to get uploaded files ids to php

[alz...@gmail.com]

I have a single page divided by two `bootstrap` tabs; think of it as a database main record with a data form (first tab) that should have some file attachments uploaded with a [jQuery File Upload Basic Plus UI][1] form on the second tab.

I have a single submit button that already stores the first form data to db and I need to link the (already uploaded by the user) file attachments to the main record, after the form submission.

I cannot get the uploaded file ids through php because (I think) jquery ajax-uploading isn't reloading the page, therefore I cannot access to data that did not exist at the time the page was loaded.

I cannot even modify the provided php script (see below) adding the main record key field to file attachments db table, because it doesn't exist before submitting the form.

How could I manage to pass to my php submit script the ids of the uploaded files?

This is the php function extension that returns a $file object that is subsequently parsed through [Javascript-Template][2]:

        protected function handle_file_upload($uploaded_file, $name, $size, $type, $error,

            $index = null, $content_range = null) {

        $file = parent::handle_file_upload(

            $uploaded_file, $name, $size, $type, $error, $index, $content_range

        );

        if (empty($file->error)) {

            $sql = 'INSERT INTO `'.$this->options['db_table']

                .'` (`name`, `size`, `type`, `title`, `description`)'

                .' VALUES (?, ?, ?, ?, ?)';

            $query = $this->db->prepare($sql);

            $query->bind_param(

                'sisss',

                $file->name,

                $file->size,

                $file->type,

                $file->title,

                $file->description

            );

            $query->execute();

            $file->id = $this->db->insert_id;

        }

        return $file;

    }

And this is the template-code that lists every file loaded, accessing file object data

<script id="template-download" type="text/x-tmpl">

{% for (var i=0, file; file=o.files[i]; i++) { %}

<tr class="template-download fade">

<td>

<span class="preview">

{% if (file.thumbnailUrl) { %}

<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>

{% } %}

</span>

</td>

<td>

<p class="name">

{% if (file.url) { %}

<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>

{% } else { %}

<span>{%=file.name%}</span>

{% } %}

</p>

{% if (file.error) { %}

<div><span class="label label-danger">Error</span> {%=file.error%}</div>

{% } %}

</td>

<td>

<span class="size">{%=o.formatFileSize(file.size)%}</span>

</td>

<td>

{% if (file.deleteUrl) { %}

<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>

<i class="glyphicon glyphicon-trash"></i>

<span>Delete</span>

</button>

<input type="checkbox" name="delete" value="1" class="toggle">

{% } else { %}

<button class="btn btn-warning cancel">

<i class="glyphicon glyphicon-ban-circle"></i>

<span>Cancel</span>

</button>

{% } %}

</td>

</tr>

{% } %}

</script>

    

  [1]: http://blueimp.github.io/jQuery-File-Upload/index.html

  [2]: https://github.com/blueimp/JavaScript-Templates