SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru gavwvin's Avatar
    Join Date
    Nov 2004
    Location
    Cornwall, UK
    Posts
    686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Client side file validation

    Hi
    what I'm trying to do is get the browser to display a warning if the file the user inputs is one of an array of allowed files (which is thoroughly checked server-side), but are wasteful in size (like .bmp .tif .avi .wav). I want them to be able to upload it if they want, but just to notify them they could save space by converting to a smaller format (as they pay per megabyte). So on submit I need to get the file input value, check the extension, and if its allowed but wasteful to display a message with a yes and no button, which would submit if they press yes and not if they press no.
    I'm not very experience with javascript but I know a lot about php, but I don't really know what the equivalent functions are. Can anyone help?
    Thanks

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no way I know of that this can be done via javascript or any client side scripting ........... its usually done via whatever server-side program is handling the upload..... I dont do PHP but I did find this:

    http://coding.phpground.net/uploads/...P%20by%20R.pdf

  3. #3
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Nebraska
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink

    If the filenames are stored in a text box in a form before they are submitted, you can use code such as this:

    Code:
    <html>
    <head>
    <title>File Upload</title>
    <script language="javascript1.2">
    
    function checkFiletype(){
         var ext=new Array(4);
    	      ext[0]="bmp";
    		  ext[1]="tif";
    		  ext[2]="avi";
    		  ext[3]="wav";
    		  
    	var fileext=document.uploadForm.filename.value;
    	fileext=fileext.substring(fileext.length-3,fileext.length);
    	
    	for(var count=0; count<4; ++count){
    	     if(fileext==ext[count]){
    		      var keepGoing=confirm("The filetype that you are attempting to upload \(."+ext[count]+"\) can\ntend to be unnecessarily large. To lower your cost, we recommend\nyou convert this file to a format with a lower filesize.\n\nContinue Anyway?");
    			  if(keepGoing==true){
    			       return true;
    			  }
    			  else{
    			       return false;
    			  }
    		 }
    	}
    }
    
    </script>
    </head>
    
    <body>
    <form name="uploadForm" onSubmit="return checkFiletype();" method="post" action="">
      
      <input type="text" name="filename">
      <input type="submit" value="Submit">
    </form>
    </body>
    </html>
    Paste this code into an .htm document and run it in a web browser to see what it does. Since you are good with PHP, I will not explain the code as it is pretty straight forward. To add more file types, simply add more array entries and change the condition in the for loop to accomodate more array values (such as count<8).

    Louie

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is an explanation:

    1) You can put an onsubmit event handler in your form element that calls a function. The function will be called when the user clicks on the submit button:
    Code:
    <form name="my_form" onsubmit="return validate()" method="post" action="somepage.php">
    (Note that you have to use 'return' before the function name in the onsubmit handler in order for the function's return value to have any effect.)

    2) In your function, you can easily get the file name the user entered:
    Code:
    var file_name = document.my_form.my_textbox.value;
    and get the extension:
    Code:
    var file_extension = file_name.substring(file_name.lastIndexOf(".") + 1);
    The lastIndexOf() function gets the index position of the last occurrence of the "." in the file_name. The substring() function gets the rest of the string after the period, e.g. "jpg".

    3) You can then compare the file extension to a list of allowed extensions contained in an associative array:
    Code:
    var allowed_files={jpg:"ok", bmp:"ok", wav:"large", avi:"large"};
    
    switch (allowed_files[file_extension])
    {
    case "large":
    	...
    case "ok":
    	...
    default:
    	...
    }
    4) If the file extension is a large file, you can use the confirm() method to present the user with a choice to continue or cancel. confirm() returns true if the user clicks "OK", and false if the user clicks "Cancel".
    Code:
    switch (allowed_files[file_extension])
    {
    case "large":
    	return confirm("Your file will take a long time.\n" +
    			"Do you wish to continue?");
    case "ok":
    	return true;
    default:
    	alert("Sorry, that file type is not allowed.");
    	return false;
    }
    Putting it all together:
    Code:
    <script type="text/javascript" language="javascript">
    <!-- Hide from browsers without javascript
    
    function validate()
    {
    	var file_name = document.my_form.my_textbox.value;
    	var file_extension = file_name.substring(file_name.lastIndexOf(".") + 1);
    	var allowed_files={jpg:"ok", bmp:"ok", wav:"large", avi:"large"};
    	
    	switch (allowed_files[file_extension])
    	{
    	case "large":
    		return confirm("Your file will take a long time.\n" +
    				"Do you wish to continue?");
    	case "ok":
    		return true;
    	default:
    		alert("Sorry, that file type is not allowed.");
    		return false;
    	}
    }
    
    
    // End hiding -->
    </script>
    </head>
    Last edited by 7stud; Jan 15, 2005 at 04:45.

  5. #5
    SitePoint Guru gavwvin's Avatar
    Join Date
    Nov 2004
    Location
    Cornwall, UK
    Posts
    686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your help everyone!

  6. #6
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Nebraska
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    7stud, you did not acknowledge my code at all? I would appreciate it if you would at least give a little credit to my code so that the original poster doesn't get the impression that my code was worthless because you simply pasted your own code (which was quite a bit different than mine) and said that's how to do it. I think it just kind of makes my code look obsolete since you are a top poster on the site and I am a newbie. I have no hard feelings, I am merely asking a request. Thanks.

    Louie


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •