Re: [jQuery-File-Upload] How add more <input> in upload into database

[Tony Abou-Assaleh]

Have you tried the approach described on the wiki under the section "Setting formData on upload start for each individual file upload"?

TAA

On Fri, Sep 7, 2012 at 12:11 AM, Tonny <letha...@gmail.com> wrote:

I want to add Description: into form upload. How do add record into database

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


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


    <tr class="template-upload fade">


        <td class="preview"><span class="fade"></span></td>


        <td class="name"><span>{%=file.name%}</span></td>



        <td><input type="text" name="des" size="10" />



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


        {% if (file.error) { %}


            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>


        {% } else if (o.files.valid && !i) { %}


            <td>
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>


            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}


                <button class="btn btn-primary">


                    <i class="icon-upload icon-white"></i>


                    <span>{%=locale.fileupload.start%}</span>


                </button>
            {% } %}</td>


        {% } else { %}


            <td colspan="2"></td>


        {% } %}


        <td class="cancel">{% if (!i) { %}


            <button class="btn btn-warning">


                <i class="icon-ban-circle icon-white"></i>


                <span>{%=locale.fileupload.cancel%}</span>


            </button>
        {% } %}</td>


    </tr>
{% } %}


</script>

<!-- The template to display files available for upload -->

--
You received this message because you are subscribed to the Google Groups "jQuery-File-Upload" group.
To post to this group, send email to jquery-f...@googlegroups.com.
To unsubscribe from this group, send email to jquery-fileupl...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Tonny]

I used it, but i don't know insert Title into mysql. Please help me!

[Tony Abou-Assaleh]

Are you having a difficulty sending the data from the client side, processing it on the server side, or saving it to the database?

TAA

[Tonny]

I have a question. Where is this code will save?

$('#fileupload').bind('fileuploadsubmit', function (e, data) {
    var inputs = data.context.find(':input');
    if (inputs.filter('[required][value=""]').first().focus().length) {
        return false;
    }
    data.formData = inputs.serializeArray();
});

And how do title save into database?

[Tony Abou-Assaleh]

This code sends the data to the server along side the file content. In your server code (PHP or otherwise), you'll need to extract this data from the POST data and write the code to store it in the database. This wiki page talks about how to store the file info in the data, which you could extend to store other form data as well.

For more general help in working with POST data and databases on the server side, please consult the appropriate tutorials as that's beyond the scope of this forum.

TAA

[JennyJ]

I am having a similar issue.

How would I update this function to add more than one field to the db? I guess my ultimate issue here is not understanding where the var $whichimg is coming from?

    function add_img($whichimg)
    {
    $add_to_db = $this->query("INSERT INTO project_links (name) VALUES ('".$whichimg."')") or die(
      mysql_error());
    return $add_to_db;
    }


Thanks!
Jen

[Tony Abou-Assaleh]

The on the server is:

- Get data from the POST request into variables

- Execute an SQL query to store the data

The function add_image does the second part - storing the values passed to it as a parameter in the database. In this case $whichimg is the parameter name. It gets it's value from the following line (from the wiki page):

$file->upload_to_db = $this->add_img($file->name);

So you could modify the add_img function to take two parameters, modify the sql statement to incorporate the two values, and then call the add_image function with two values, the file name and the description.

Something like (untested):

function add_img($filename, $description)
{
$add_to_db = $this->query("INSERT INTO yourtable (yourcolumnone) VALUES ('".$filename.", ".$description."')") or die(mysql_error());
return $add_to_db;
}

and call it using:

$description = ... // Get the description from the request POST variable.

$file->upload_to_db = $this->add_img($file->name, $description);

Hope this helps point you in the right direction.

TAA

[Tonny]

I haven't do that. Please help me!

[JennyJ]

That makes sense but I cannot seem to get it to work and I apologize for hijacking this post from Tonny but it seems we are trying to do the same thing.
So here's what I've got in the form, note hidden input pid (for project id).

   <form id="fileupload" action="../server/add-project/" method="POST" enctype="multipart/form-data">
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
       
       
        <input type="hidden" name="pid" value="<?php echo $pid; ?>">
         
        <div class="row fileupload-buttonbar">
            <div class="span7">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
                    <i class="icon-plus icon-white"></i>
                    <span>Add files...</span>
                    <input type="file" name="files[]" multiple>
                </span>
                <button type="submit" class="btn btn-primary start">

                    <i class="icon-upload icon-white"></i>

                    <span>Start upload</span>
                </button>
                <!--<button type="reset" class="btn btn-warning cancel"> -->
                <button type="reset" class="btn cancel">

                    <i class="icon-ban-circle icon-white"></i>

                    <span>Cancel upload</span>
                </button>
               
               
            </div>
        </div>
        <!-- The loading indicator is shown during file processing -->
        <div class="fileupload-loading"></div>
        <br>
        <!-- The table listing the files available for upload/download -->
        <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
    </form>

And then in the upload class:

$pid = $_POST['pid'];
            $file->upload_to_db = $this->add_img($file->name, $pid);

and:

function add_img($filename, $pid)
    {
    $add_to_db = $this->query("INSERT INTO project_links (name, project_id) VALUES ('".$filename.", ".$pid."')") or die(mysql_error());
    return $add_to_db;
    }

I am able to successfully get the name to post into the db, however, it errors Empty File Upload Results when I add these modifications to the class.
I ultimately want to add the following additional fields to db:
project id
name
url
size
type

Your further direction is greatly appreciated!!! Thank you.

[JennyJ]

After some troubleshooting, I've found that if the add_img function posts the data into one table field, it works.

    function add_img($filename, $pid)
    {
    $add_to_db = $this->query("INSERT INTO project_links (name) VALUES ('".$filename.", ".$pid."')") or die(mysql_error());
    return $add_to_db;
    }

RESULT IN DB:
field name [name]
entry [filename.png, projectid]

However, i need to post the data into multiple fields in the db.

    function add_img($filename, $pid)
    {
    $add_to_db = $this->query("INSERT INTO project_links (name, project_id) VALUES ('".$filename.", ".$pid."')") or die(mysql_error());
    return $add_to_db;
    }

Thanks again for your help!!
Jen

[JennyJ]

I was able to get it working .. it looks like the problem was due to the doublequotes around the var names in values.
Take a look here: https://github.com/blueimp/jQuery-File-Upload/issues/957

Thanks so much for your help!

[JennyJ]

So to help you and anyone else who comes across this issue, here is the full set of steps:

Add additional fields to form. In this case, I've added "pid" for project id.

<input type="hidden" name="pid" value="<?php echo $pid; ?>">

in upload.class.php (per instructions at ( https://github.com/blueimp/jQuery-File-Upload/wiki/Working-with-databases ) add query function.

function query($query) {
        $database = 'YOUR DB';
        $host = 'localhost';
        $username = 'YOUR USER';
        $password = 'YOUR PW';
        $link = mysql_connect($host,$username,$password);
      
            if (!$link) {
            die(mysql_error());
            }
          
        $db_selected = mysql_select_db($database);
      
            if (!$db_selected) {
            die(mysql_error());
            }
      
        $result = mysql_query($query);
        mysql_close($link);
        return $result;
    }

add add_img function below query function. In my case, the only new files here are $pid and $url - size and type are predefined.

private function add_img($filename, $pid, $size, $type, $url) {
$add_to_db = $this->query("INSERT INTO project_links (name,project_id, size, type, uploaded_file)
                                            VALUES('$filename','$pid','$size','$type','$url')") or
    die(mysql_error());

Lastly, update the handle_file_upload function after $file->size = $file_size; as follows.

Retrieve the value from the form and set the variable.
$pid = $_POST['pid'];

Add upload to db directive making sure to include all of your variables you are adding to the db.
$file->upload_to_db = $this->add_img($file->name, $pid, $file->size, $type, $url);

I hope that helps!
Jen

[Tonny]

I want add title for each image during upload: <input type="text" name="title[]" /> and save to DB. I haven't do that

[JennyJ]

1. Add query function below handle_file_upload function

function query($query) {
        $database = 'YOUR DB';
        $host = 'localhost';
        $username = 'YOUR USER';
        $password = 'YOUR PW';
        $link = mysql_connect($host,$username,$password);
      
            if (!$link) {
            die(mysql_error());
            }
          
        $db_selected = mysql_select_db($database);
      
            if (!$db_selected) {
            die(mysql_error());
            }
      
        $result = mysql_query($query);
        mysql_close($link);
        return $result;
    }

2. Add add_img function below query function.

private function add_img($filename, $title) {
$add_to_db = $this->query("INSERT INTO project_links (name,title)
                                            VALUES('$filename','$title')") or
    die(mysql_error());

3. Lastly, update the handle_file_upload function after $file->size = $file_size; as detailed below.

3a. Retrieve the value from the form and set the variable.
    $title = $_POST['title'];

3b. Add upload to db directive making sure to include all of your variables you are adding to the db.
    $file->upload_to_db = $this->add_img($file->name, $title);

[Kraig]

With the newer version it doesn't seem like JennyJ's solution works anymore. I've tried to use $_POST['userID'] from a hidden variable in the form, but it won't allow me to access it server side. I've read https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data but it doesn't show how to access and manipulate the data on the server side. Any ideas?

[Michael Moradzadeh]

I'm in a similar situation.  Simply trying to add a caption per image.  Using a form element in the form, and $_POST in the upload handler, I get all images set to have the caption value of the last in the list.

So, it looks like I need to serialize the form elements to use the same index as the url etc.  I am guessing that this is more of a javascript issue.

Where I stand now is adding 

<td class="name" ><label>Caption: <input type="text" name="caption"></label></td>

in the template to display files available for upload.

So, how do I help the upload script know the difference?