Upload Button

[dk4210]

Hello Guys,

I have an upload button (ajax) that allows users to upload multiple files to a temp directory. I am trying to figure out a way to have php/ajax count the amount of files and when it reaches say 5 images that the upload button disappears.

I do not have a problem counting the files with PHP or counting it in the session. I can also do an if statement to hide the file upload button but I would have to refresh the page for that to work.. I was hoping you guys would give me some direction on this issue..

Here is how I am counting the files

$subn = $_SESSION['fname'] . $_SESSION['lname'] ;
    $files = glob("temp_photo/$subn*.*");
    $count = count($files);
    
    echo $count;

Thanks in advance! Dan

[Gerbiler]

do something like

echo "<p style=\"display:none\" id=\"anid\">$count</p>;

and then in javascript do

if(document.getElementById("anid").innerHTML>=5){
   document.getElementById("uploadbutton").style.display = "none";
}

[dk4210]

Thanks for the info. How would I use the following code(What I called upload button) in the JS?

echo '
        <!-- Start image upload-->
        <div id="file-uploader">
          
          
          <noscript>          
          <p>Please enable JavaScript to use file uploader.</p>
          <!-- or put a simple form for upload here -->
          </noscript> 
          
          
          
          
  
        
  <script src="fileuploader.js" type="text/javascript"></script>
        <script>        
        function createUploader(){            
var uploader = new qq.FileUploader({
    // pass the dom node (ex. $(selector)[0] for jQuery users)
    element: document.getElementById(\'file-uploader\'),
    // path to server-side upload script
    action: \'upload.php\'
}); 
                   
        }
        
        // in your app create uploader as soon as the DOM is ready
        // don\'t wait for the window to load  
        window.onload = createUploader;     
    </script>    
        <!--End Image Upload-->

[Gerbiler]

well, I don't see an upload button, get firebird an extension for Firefox then right click on the upload button and click inspect element then check what the id is for that element. replace uploadbutton with that and then put the echo at the end of upload.php. if that doesn't make sense just ask me what doesn't.

[Gerbiler]

well, I don't see an upload button, get firebug an extension for Firefox then right click on the upload button and click inspect element then check what the id is for that element. replace uploadbutton with that and then put the echo at the end of upload.php. if that doesn't make sense just ask me what doesn't.

[Gerbiler]

sorry about the double post read the second one

[dk4210]

Ok Here is what I got so far

echo '
		<script language ="javascript">
	    if(document.getElementById("anid").innerHTML>=5){
   		document.getElementById("file-uploader").style.display = "none";
		}
		</script>
		
         <form class="cmxform" id="commentForm" method="post" action="'.$_SERVER['PHP_SELF'].'">
		<fieldset>
		<legend>Please provide your name, email address (won\'t be published) and a comment</legend>
		

	<p>

		<label for="cname">Select Primary category : (required, at least 2 characters)</label>
				 <div id="loading"></div> ';
		           require_once("getagents.php");
					$obj = new AjaxDropdown();
					$arr = $obj->getArray(0);
					$strRet .= '<option value="0">--Select--</option>';
					foreach ( $arr as $row )
					{
						$strRet .= '<option value="'.$row->cat_id.'">'.$row->cat_name.'</option>';
					}					
				?>
				<select name="pcat" class="text" onChange="javascript:Ajax.Request('getagents.php?method=getXML&param=',this.value, Ajax.Response);">
					<?php echo $strRet; ?>
				</select>
				
				
				Select a sub category (Optional) :
				<select name="scat" id="selSubCat" class="text">
					<option value="0">--Select--</option>
					<option value="12">test</option>
				</select>
		
	
	
		
	</fieldset>
		
<?php 		
       
	echo ' 
	   <p>
	    Ad Title
       <input type="text" name="ad_title" id="ad_title" />
       </p>
       
       <p>
       Decription
       <textarea name="description" id="description" cols="45" rows="5"></textarea>
       </p>
       
       <p>
       Name (This is what viewers see)
      
        <input type="text" name="viewname" value=" '.  $_SESSION['fname'].' '.$_SESSION ['lname']. '" />
        
      </p>
      
      <p>
      
      Email address (Published)
      
        <input type="text" name="email" value="'.  $_SESSION['email'].'" />
        
       </p>
       
       <p>
      
    Phone Number (Published)
     
        <input type="text" name="vphone" id="vphone" />
       </p>
       
       <p>
      
    City (required)
     
        <input type="text" name="city" id="city" />
     
     
      </p>
      <p>
        State (required)
        <input type="text" name="state" id="state" />
        
      </p>
      <p>
     Zip (optional)
        <input type="text" name="zip" id="zip" />
        
    </p>
    <p>
      
    Photos';
   
    // Lets query to see how many images have been uploaded
    $subn = $_SESSION['fname'] . $_SESSION['lname'] ;
    $files = glob("temp_photo/$subn*.*");
    $count = count($files);
    
    echo $count;
echo '<p style=\"display:none\" id=\"anid\">' . $count .'</p>';
    
	echo '
        <!-- Start image upload-->
        <div id="file-uploader">
          
          
          <noscript>          
          <p>Please enable JavaScript to use file uploader.</p>
          <!-- or put a simple form for upload here -->
          </noscript> 
          
          
          
          
  
        
  <script src="fileuploader.js" type="text/javascript"></script>
        <script>        
        function createUploader(){            
var uploader = new qq.FileUploader({
    // pass the dom node (ex. $(selector)[0] for jQuery users)
    element: document.getElementById(\'file-uploader\'),
    // path to server-side upload script
    action: \'upload.php\'
}); 
                   
        }
        
        // in your app create uploader as soon as the DOM is ready
        // don\'t wait for the window to load  
        window.onload = createUploader;     
    </script>    
        <!--End Image Upload-->
        </div>
      <label>
      Capcha
        <input type="text" name="capcha" id="capcha" />
        </label>
      </p>
      
      <p>
        <input type="submit" name="Submitad" value="Submit Ad" />
       </p>
       </form>
     
</body>
</html>

';

I don't understand what you mean by "put the echo at the end of upload.php"

Please advise..

Thanks so much for your help!

[Gerbiler]

I meant put

echo "<p style=\"display:none\" id=\"anid\">$count</p>;

at the end of upload.php

[dk4210]

Nope still didn't work.. Thanks for your help any way..

[Gerbiler]

you put

if(document.getElementById("anid").innerHTML>=5){
   		document.getElementById("file-uploader").style.display = "none";
		}

in the wrong place. put it inside a function and add an event handler to file-uploader. like this

document.getElementById("file-uploader").onclick = "fileuploaderclick";
function fileuploaderclick(){
if(document.getElementById("anid").innerHTML>=5){
   		document.getElementById("file-uploader").style.display = "none";
		}
}

[dk4210]

Thanks for all your help.. It doesn't seem to work..I may not be understanding where exactly to add the code.. Here is what I have

include('fvalidation.php');
    	
		echo '
		<script language ="javascript">
	     document.getElementById("file-uploader").onclick = "fileuploaderclick";

}
		</script>
		
         <form class="cmxform" id="commentForm" method="post" action="'.$_SERVER['PHP_SELF'].'">
		<fieldset>
		<legend>Please provide your name, email address (won\'t be published) and a comment</legend>
		

	<p>

		<label for="cname">Select Primary category : (required, at least 2 characters)</label>
				 <div id="loading"></div> ';
		           require_once("getagents.php");
					$obj = new AjaxDropdown();
					$arr = $obj->getArray(0);
					$strRet .= '<option value="0">--Select--</option>';
					foreach ( $arr as $row )
					{
						$strRet .= '<option value="'.$row->cat_id.'">'.$row->cat_name.'</option>';
					}					
				?>
				<select name="pcat" class="text" onChange="javascript:Ajax.Request('getagents.php?method=getXML&param=',this.value, Ajax.Response);">
					<?php echo $strRet; ?>
				</select>
				
				
				Select a sub category (Optional) :
				<select name="scat" id="selSubCat" class="text">
					<option value="0">--Select--</option>
					<option value="12">test</option>
				</select>
		
	
	
		
	</fieldset>
		
<?php 		
       
	echo ' 
	   <p>
	    Ad Title
       <input type="text" name="ad_title" id="ad_title" />
       </p>
       
       <p>
       Decription
       <textarea name="description" id="description" cols="45" rows="5"></textarea>
       </p>
       
       <p>
       Name (This is what viewers see)
      
        <input type="text" name="viewname" value=" '.  $_SESSION['fname'].' '.$_SESSION ['lname']. '" />
        
      </p>
      
      <p>
      
      Email address (Published)
      
        <input type="text" name="email" value="'.  $_SESSION['email'].'" />
        
       </p>
       
       <p>
      
    Phone Number (Published)
     
        <input type="text" name="vphone" id="vphone" />
       </p>
       
       <p>
      
    City (required)
     
        <input type="text" name="city" id="city" />
     
     
      </p>
      <p>
        State (required)
        <input type="text" name="state" id="state" />
        
      </p>
      <p>
     Zip (optional)
        <input type="text" name="zip" id="zip" />
        
    </p>
    <p>
      
    Photos';
   
    // Lets query to see how many images have been uploaded
    $subn = $_SESSION['fname'] . $_SESSION['lname'] ;
    $files = glob("temp_photo/$subn*.*");
    $count = count($files);
    
    echo $count;

    
	echo '
        <!-- Start image upload-->
        <div id="file-uploader">
          
          
          <noscript>          
          <p>Please enable JavaScript to use file uploader.</p>
          <!-- or put a simple form for upload here -->
          </noscript> 
          
          
          
          
  
        
  <script src="fileuploader.js" type="text/javascript">  
  function fileuploaderclick(){
if(document.getElementById("anid").innerHTML>=5){
   		document.getElementById("file-uploader").style.display = "none";
		}            
  </script>
        <script>        
        function createUploader(){
        
var uploader = new qq.FileUploader({
    // pass the dom node (ex. $(selector)[0] for jQuery users)
    element: document.getElementById(\'file-uploader\'),
    // path to server-side upload script
    action: \'upload.php\'
}); 
                   
        }
        
        // in your app create uploader as soon as the DOM is ready
        // don\'t wait for the window to load  
        window.onload = createUploader;     
    </script>    
        <!--End Image Upload-->

Please advise.