Welcome to the new Uploadify Community Forums. We've made the switch from PHPBB to Vanilla Forums in hopes of controlling the SPAM more efficiently. We hope this change doesn't suck so much. Also, don't forget to wrap your code in tags. You can quickly insert code using ctrl + f.
I lost some messages that were posted on February 4th. If you posted a message or reply on February 4th, please do so again. Sorry about the inconvenience.
simple example
  • Hello

    I looking arround some days for a simple example to send form data after save an upload.
    Found some samples but nothing work for me with an actuall download version of Uploadify (2.0.3).

    The file upload works fine, but how I can send the other field inputs?

    I used the files in the example folder that come with Uploadify.
    Only the index.php is changed:
    <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
    <html xmlns=\"http://www.w3.org/1999/xhtml\">
    <head>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
    <title>Uploadify Example Script</title>
    <link href=\"css/default.css\" rel=\"stylesheet\" type=\"text/css\" />
    <link href=\"css/uploadify.css\" rel=\"stylesheet\" type=\"text/css\" />
    <script type=\"text/javascript\" src=\"jquery-1.3.2.min.js\"></script>
    <script type=\"text/javascript\" src=\"swfobject.js\"></script>
    <script type=\"text/javascript\" src=\"jquery.uploadify.v2.0.2.min.js\"></script>
    <script type=\"text/javascript\">
    $(document).ready(function() {
    $(\"#uploadify\").uploadify({
    'uploader' : 'uploadify.swf',
    'script' : 'uploadify.php',
    'cancelImg' : 'cancel.png',
    'folder' : 'uploads',
    // 'queueID' : 'fileQueue',
    'auto' : false,
    'multi' : false,
    onComplete: function (evt, queueID, fileObj, response, data) {
    //alert(\"Response: \"+response); /* Return: 1 */
    /* A really cool message that flashes then fades: */
    $('#fileUploaded').html(data.filesUploaded + ' files were successfully uploaded.');
    // Answere: \"undefined files were successfully uploaded.\" ... ? Why \"undefinded\"?
    $('#fileUploaded').show().animate({'display':'block'},5000).hide(1000);
    }
    });
    $(\"#form72submit\").click( function(){
    name = ( $(\"#name\").val() == \"\" ) ? \"\" : $(\"#name\").val() ;
    city = ( $(\"#city\").val() == \"\" ) ? \"\" : $(\"#city\").val() ;
    $(\"#uploadify\").uploadifySettings(
    'scriptData' , { 'name' : name , 'city' : city }
    );
    $(\"#uploadify\").uploadifyUpload();
    return false;
    });

    });
    </script>
    </head>

    <body>
    <?php
    if (!isset ($_POST['name']) or $_POST['name'] == '') {
    ?>
    <form id=\"form72\" name=\"form72\" action=\"index.php\" accept-charset=\"UTF-8\" method=\"post\" enctype=\"multipart/form-data\">
    <label for=\"name\" >Name&amp;nbsp;</label>
    <input type=\"text\" title=\"Name\" name=\"name\" id=\"name\" /><br />
    <label for=\"city\" >City&amp;nbsp;</label>
    <input type=\"text\" title=\"City\" name=\"city\" id=\"city\" /><br />
    <label for=\"upload\" >Upload&amp;nbsp;</label>
    <input type=\"file\" name=\"uploadify\" id=\"uploadify\" /><br />

    <input type=\"button\" name=\"form72submit\" id=\"form72submit\" value=\"sendit\" />
    </form>
    <div id=\"fileUploaded\"></div>
    <?php
    } else if (isset ($_POST['name']) and $_POST['name'] != '') {
    echo 'Name: '.$_POST['name'].'<br />';
    echo 'City: '.$_POST['city'].'<br />';
    echo 'Filename: '.$_POST['filename'].'<br />';
    }
    ?>

    </body>
    </html>
  • You need to handle the submission of the post parameters in your upload.php script. It appears your are trying to handle them in index.php? You are on the right track.

    Also, on upload success you can't use PHP to echo the file names as you've shown. The php code in index.php is only going to execute when the page loads. You are going use Javascript in your onComplete handler to insert that information into the DOM.

    $('#upload_result').html(your result text goes here);
  • bdp said:
    You need to handle the submission of the post parameters in your upload.php script. It appears your are trying to handle them in index.php?
    The uploads will be handled in the upload.php script but the rest I need it in index.php.

    bdp said:
    The php code in index.php is only going to execute when the page loads. You are going use Javascript in your onComplete handler to insert that information into the DOM.
    Can I not use JS to send the form after file upload?
    Or I missunderstand it?
    This are my realy first steps with JS. With PHP I work a long time (some years). :?
  • Sven said:
    [quote="bdp"]You need to handle the submission of the post parameters in your upload.php script. It appears your are trying to handle them in index.php?
    The uploads will be handled in the upload.php script but the rest I need it in index.php.
    [/quote]

    Do you need to actually re-process the form fields with PHP or do you simply need the information to appear back in the page that was initially rendered with index.php? You could have JS code that calls index.php again with an AJAX call, but in my experience that will get gnarly because you'll need to handle your standard HTTP request (when the page loads) and subsequent AJAX calls differently. It's doable, but not really worth the hassle. I'm assuming that you want to save your extra form fields into a database record and associate that information with the uploaded document? You also want to update the original page (index.php) to show that those field values are now associated with an uploaded file. Right?

    Sven said:

    [quote="bdp"]The php code in index.php is only going to execute when the page loads. You are going use Javascript in your onComplete handler to insert that information into the DOM.
    Can I not use JS to send the form after file upload?
    Or I missunderstand it?
    This are my realy first steps with JS. With PHP I work a long time (some years). :? [/quote]

    I think that you are misunderstanding it, but if you haven't worked much with JS (and especially with asynchronous request handling) it is easy to have the wrong expectations. I've been doing JS w/ jQuery for about 3 years and PHP for more than twice that. When you start using JS, especially AJAX stuff you need to change your way of thinking. :) Note that the swfupload isn't really AJAX (no XMLHttpRequest), but the principles for sending and handling the request are much the same.

    When you upload the file it is handled by upload.php. That PHP script saves the file on your server and can do anything else you need. In my case I also have additional form fields associated with the upload. I'd post an example, but the site is on an intranet and the development server is behind a firewall (you can't get to it). What I do is add the values in those extra form field to 'scriptData' prior to sending the upload. That way upload PHP will have access to
    [code=php]
    ... in upload.php
    // $_POST['file_description'] contains the description
    // $_POST['file_author'] contains the author
    // $_POST['...'] contains more document metadata

    ... upload save code goes here ...

    $stored_document = new StoredDocument($savedFilePath, $_POST)
    if ($stored_document->validate()) {
      $stored_document->save(); // This saves s STORED_DOCUMENTS record
    }
     [/code]
    So when the file uploads I write a STORED_DOCUMENTS table with path, original_filename, file_description, file_author, ..., etc. Have a look at the Showcase section of this forum. There are examples that handle submitting extra data.

    When upload.php successfully completes it returns a JSON response that looks something like this:

    {'success':'true', 'filename':'foo.txt', 'description':'Stuff about foo', 'author':'Bill Foo'}


    My onComplete function processes the returned response, e.g.,

    // Not the entire onComplete. If I could get to it right now I'd post it.
    var data = eval('(' + r + ')');
    // update field on form
    $('#file_description').val = r.description;
    $('#file_author').val = r.author;
    ...


    The fields represented by the selectors $('#file_description') and $('#file_author') are on the index.php form.

    I DO NOT make a second request to index.php. Javascript does all of the page updating on the fly. If upload.php has an error, I have code that update the page to highlight the error.

    Does that make sense?

    If you are struggling with the JS stuff, I would recommend that you look at the jQuery documentation, and possibly some search for some tutorials about manipulating the DOM.
  • Hi,
    I was wondering if you got this to work. I am trying to do the same thing but am having so much trouble. I have some radio buttons that I need to save the selected value of with the filename and filesize into a database table.

    Can you help me at all?
    Louise

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!