File Uploads & Upload Progress with Uploadify

Question

I have made a dynamic dropdown file upload system where user can choose the engineering stream, then the semester and then subject, and the file gets uploaded in the desired directory. This works fine normally. Working example Check the file path link, upload only images or docs two three times in different folders to see how it varies.

Then I wanted to show the file upload progress so I downloaded and started using this uploadify. And came across the following problems.

Two problems here: 1) The moment I click select files and select a file, the file gets uploaded, but I can't find it anywhere though I have set the targetFolder 2) I want to choose the path first, then select the file, and click upload (like shown in the exmaple) and then I want it to get uploaded in the specified directory which I chose from the dropdowns.

Link to demo: Uploadify Fail Example

This is my code:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title> SRMUARD - Upload </title>
        <link rel="stylesheet" type="text/css" href="uploadify.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>  
        <script type="text/javascript">
            $(function() {
                $('#file_upload').uploadify({
                    'swf'      : 'uploadify.swf',
                    'uploader' : 'uploadify.php',
                    'progressData' : 'speed',
                    'folder': <?php echo $targetFolder; ?>
                });
            });
        </script>
        <script type="text/javascript">
            function val()
            {
                if(document.uploads.three.selectedIndex == 0)
                {
                    alert("Please choose all the appropriate options");
                }
            }
        </script>   
        <script>
            $(function() {
                $("#text-one").change(function() {
                $("#text-two").load("textdata/" + $(this).val() + ".txt");
                });
                $("#text-two").change(function() {
                $("#text-three").load("textdata/" + $(this).val() + ".txt");
                });
            });
         </script>

    </head>
    <body>
        <div>
            <form action="uploadify.php" method="POST" enctype="multipart/form-data" name="upload" id="upload">
                <label for="file">Choose a file: </label><br/>

                    <select id="text-one" name="one">                   
                        <option selected value="base">Select Department</option>
                        <option value="CSE" name="cse">Computer Science Engineering</option>
                        <option value="ECE" name="ece">Electronics & Communication Engineering</option>
                        <option value="MECH" name="mech">Mechanical Engineering</option>                        
                    </select><br/><br/> 
                    <select id="text-two" name="two">
                        <option>Select Semester</option> //Displays options dynamically using text files
                    </select><br/><br/>                 
                    <select id="text-three" name="three">
                        <option>Select Subject</option> //Displays options dynamically using text files
                    </select><br/><br>  
                    <input type="file" name="file_upload" id="file_upload" ><br/><br/>  
                    <input type="submit" name="upload" id="submit" value="Upload" onClick="val()" />        
            </form>
        <div>
    </body>
</html>

And this is my uploadify.php file:

    <?php

    if(isset($_POST['upload']))  //checking if the path is set
   { 
      $path1=$_POST['one']."/"; //path1
      $path2=$_POST['two']."/"; //path2
      $path3=$_POST['three']."/";   //path3
      $targetFolder=$path1.$path2.$path3; //final path without the file
   }
   else
   {
      echo "Select a Subject";
      echo "<br>";
   }


if (!empty($_FILES)) {
    $tempFile = $_FILES['file_upload']['tmp_name'];
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
    $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['file_upload']['name'];
    // Validate the file type
    $fileTypes = array('jpg','jpeg','gif','png'); // File extensions
    $fileParts = pathinfo($_FILES['file_upload']['name']);
    if (in_array($fileParts['extension'],$fileTypes)) {
        move_uploaded_file($tempFile,$targetFile);
        echo $targetFolder . '/' . $_FILES['file_upload']['name'];
    } else {
        echo 'Invalid file type.';
    } 
?>

Please help me solve this and make me show the progress bar and make it upload to the correct destination folder.

Thank You

Answer 1

This plagin 'uploadify' uploads files earlier then you have chosen elements of the form. You can add data in the parametr 'formData' like this:

$(function() {
var one = $('#text-one').val();
var two = $('#text-two').val();
var one = $('#text-three').val();
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php',
'progressData' : 'speed',
'formData': {'one':one,'two':'two','three':three},
'folder': 
});
});

Answer will come in the event 'onUploadComplete'

File Uploads & Upload Progress with Uploadify

Question

1 answers

solution1
0 ACCPTED 2013-01-22 08:29:39

File Uploads & Upload Progress with Uploadify

Question

1 answers

solution1 0 ACCPTED 2013-01-22 08:29:39

solution1
0 ACCPTED 2013-01-22 08:29:39