limit the number of uploads

sujag

Curious,

How to limit the total number of uploads and/or disable the button once the limit is met?

Thanks in advance.

TravisN.

You can use the code posted here http://uploadify.com/forum/viewtopic.php?f=7&t=58

Then in the onSelect function add an if statement that tests if the queueSize is >= your limit and then return false.

puntthis

Could someone please give some example code for this. I looked at the other post, but I'm not really following how to do this. I want to limit users to a maximum of 10 files in their queue, so it would be cool if it would prevent them from selecting beyond 10 files to try to upload. Any help would be appreciated. Thanks!

puntthis

Anybody have a sample yet...I can't figure out how to limit the number of pictures selected. I want users to only be able to select a maximum of 10 pictures to upload. Any help would be appreciated. I'm not familar with jQuery.

TravisN.

Looks like I gave you the wrong link. here's the right one http://uploadify.com/forum/viewtopic.php?f=7&t=57

but here's what you need

<script type=\"text/javascript\">
var maxQueueSize = 10;
var queueSize = 0;
</script>
<script type=\"text/javascript\">
   $(\"#fileUpload\").fileUpload({
.......
      onCancel: function (a, b, c, d) {
         queueSize = d.fileCount;
      },
      onClearQueue: function (a, b) {
         queueSize = b.fileCount;
      },
      onSelect: function (a, b) {
         if (queueSize < maxQueueSize)
                  queueSize++;
         else
                  return false;
      },
      onSelectOnce: function (a, b) {
         queueSize = b.fileCount;
      },
      onAllComplete: function () {
         // your form function call here         
         queueSize = 0;
      },
      onComplete: function (a, b ,c, d, e) {
         queueSize--;
      },
   });
</script>

puntthis

Thanks Travis for the code. It worked like a charm. Great script by the way. It's the best one I've seen on the Internet.

bds

Hi guys

Sorry but I'm having real trouble implementing this. I've tried everything I can think of and it doesn't seem to be limiting the number of uploads.

My code is:

JavaScript:

<script type=\"text/javascript\">
	var maxQueueSize = 5;
	var queueSize = 0;
	
	function startUpload(id) {
	   if (queueSize == 0)
			//insert your form submit function call here
			alert(\"Nothing in the queue\");
   		$('#'+id).fileUploadStart();
	}
</script>

<script type=\"text/javascript\">
   $(\"#fileUpload\").fileUpload({
.......
      onCancel: function (a, b, c, d) {
         queueSize = d.fileCount;
      },
      onClearQueue: function (a, b) {
         queueSize = b.fileCount;
      },
      onSelect: function (a, b) {
         if (queueSize < maxQueueSize)
                  queueSize++;
         else
                  return false;
      },
      onSelectOnce: function (a, b) {
         queueSize = b.fileCount;
      },
      onAllComplete: function () {
         // your form function call here         
         queueSize = 0;
      },
      onComplete: function (a, b ,c, d, e) {
         queueSize--;
      },

   });
</script>

What's the ........ for in this, by the way? I've tried both with and without it in my code.

Also, what do I put in the form function call bit? Can you give an example, please?

My HTML is:

<input type=\"file\" name=\"fileUpload\" id=\"fileUpload\" />

<a href=\"javascript:startUpload('fileUpload');\">Upload Files</a>

Thanks for the help!

TravisN.

The ......... signifies the settings used to setup uploadify that aren't functions.

delete the last , before your closing });

bds

Works great, thank you!

chan15

weird? it's not work for me.
var maxQueueSize = 3;
var queueSize = 0;

it's indeed only show 3 images in the queue if I pick 5 images, but the queueSize will be 5, therefore the cancel function will not work, and I can't increase any images after that either.

gedalias

Hello,

I implemented the upload limit functionality in JS, adding the customization of erros messages.


$(document).ready(function() {
	$('#fileInput').fileUpload ({
		'uploader'  : 'uploader.swf',
		'script'    : 'upload.php',
		'cancelImg' : 'cancel.png',
		'auto'      : true,
		'folder'    : '/uploads',
		'maxQueueSize': 3,
		messages    :{
			'maxNumberUploadError':'Exceded number of upload.',
			'nothingInTheQueueError':'Nothing in the Queue'		
		}
	});
});

The script:

/
/*
Uploadify v1.6.2
Copyright (C) 2009 by Ronnie Garcia
Co-developed by Travis Nickels

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

var flashVer = -1;
if (navigator.plugins != null &amp;&amp; navigator.plugins.length > 0) {
	if (navigator.plugins[\"Shockwave Flash 2.0\"] || navigator.plugins[\"Shockwave Flash\"]) {
		var swVer2 = navigator.plugins[\"Shockwave Flash 2.0\"] ? \" 2.0\" : \"\";
		var flashDescription = navigator.plugins[\"Shockwave Flash\" + swVer2].description;
		var descArray = flashDescription.split(\" \");
		var tempArrayMajor = descArray[2].split(\".\");			
		var versionMajor = tempArrayMajor[0];
		var versionMinor = tempArrayMajor[1];
		var versionRevision = descArray[3];
		if (versionRevision == \"\") {
			versionRevision = descArray[4];
		}
		if (versionRevision[0] == \"d\") {
			versionRevision = versionRevision.substring(1);
		} else if (versionRevision[0] == \"r\") {
			ersionRevision = versionRevision.substring(1);
			if (versionRevision.indexOf(\"d\") > 0) {
				versionRevision = versionRevision.substring(0, versionRevision.indexOf(\"d\"));
			}
		}
		var flashVer = versionMajor + \".\" + versionMinor	 + \".\" + versionRevision;
	}
} else if ( $.browser.msie ) {
	var version;
	var axo;
	var e;
	try {
		axo = new ActiveXObject(\"ShockwaveFlash.ShockwaveFlash.7\");
		version = axo.GetVariable(\"$version\");
	} catch (e) {
	}	
	flashVer = version.replace(\"WIN \",\"\").replace(\",\",\".\");
}
flashVer = flashVer.split(\".\")[0];

if(jQuery)(
	function($){
		$.extend($.fn,{
			fileUpload:function(options) {
				if (flashVer >= 9) {
					$(this).each(function(){
						settings = $.extend({
						uploader:      'uploader.swf',
						script:        'uploader.php',
						folder:        '',
						height:        30,
						width:         110,
						cancelImg:     'cancel.png',
						wmode:         'opaque',
						scriptAccess:  'sameDomain',
						fileDataName:  'Filedata',
						displayData:   'percentage',
						onInit:        function() {},
						onSelect:      function() {},
						onCheck:       function() {},
						onCancel:      function() {},
						onError:       function() {},
						onProgress:    function() {},
						onComplete:    function() {},
						queueSize:     0,
						maxQueueSize:  10,
						messages:      {
							'maxNumberUploadError':'Exceded number of upload. Max number of uploads: '+ options.maxQueueSize,
							'nothingInTheQueueError':'Nothing in the Queue',
							'File Size':'File size exceeded',
						}
					}, options);
					var pagePath = location.pathname;
					pagePath = pagePath.split('/');
					pagePath.pop();
					pagePath = pagePath.join('/') + '/';
					var data = '&amp;pagepath=' + pagePath;
					if (settings.buttonImg) data += '&amp;buttonImg=' + escape(settings.buttonImg);
					if (settings.buttonText) data += '&amp;buttonText=' + escape(settings.buttonText);
					if (settings.rollover) data += '&amp;rollover=true';
					data += '&amp;script=' + settings.script;
					data += '&amp;folder=' + escape(settings.folder);
					if (settings.scriptData) {
						var scriptDataString = '';
						for (var name in settings.scriptData) {
							scriptDataString += '&amp;' + name + '=' + settings.scriptData[name];
						}
						data += '&amp;scriptData=' + escape(scriptDataString); 
					}
					data += '&amp;btnWidth=' + settings.width;
					data += '&amp;btnHeight=' + settings.height;
					data += '&amp;wmode=' + settings.wmode;
					if (settings.hideButton) data += '&amp;hideButton=true';
					if (settings.fileDesc) data += '&amp;fileDesc=' + settings.fileDesc + '&amp;fileExt=' + settings.fileExt;
					if (settings.multi) data += '&amp;multi=true';
					if (settings.auto) data += '&amp;auto=true';
					if (settings.sizeLimit) data += '&amp;sizeLimit=' + settings.sizeLimit;
					if (settings.simUploadLimit) data += '&amp;simUploadLimit=' + settings.simUploadLimit;
					if (settings.checkScript) data += '&amp;checkScript=' + settings.checkScript;
					if (settings.fileDataName) data += '&amp;fileDataName=' + settings.fileDataName;
					if ($.browser.msie) {
						flashElement = '<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"' + settings.width + '\" height=\"' + settings.height + '\" id=\"' + $(this).attr(\"id\")  + 'Uploader\" class=\"fileUploaderBtn\">\
						<param name=\"movie\" value=\"' + settings.uploader + '?fileUploadID=' + $(this).attr(\"id\") + data + '\" />\
						<param name=\"quality\" value=\"high\" />\
						<param name=\"wmode\" value=\"' + settings.wmode + '\" />\
						<param name=\"allowScriptAccess\" value=\"' + settings.scriptAccess + '\">\
						<param name=\"swfversion\" value=\"9.0.0.0\" />\
						</object>';
					} else {
						flashElement = '<embed src=\"' + settings.uploader + '?fileUploadID=' + $(this).attr(\"id\") + data + '\" quality=\"high\" width=\"' + settings.width + '\" height=\"' + settings.height + '\" id=\"' + $(this).attr(\"id\") + 'Uploader\" class=\"fileUploaderBtn\" name=\"' + $(this).attr(\"id\") + 'Uploader\" allowScriptAccess=\"' + settings.scriptAccess + '\" wmode=\"' + settings.wmode + '\" type=\"application/x-shockwave-flash\" />';
					}
					if (settings.onInit() !== false) {
						$(this).css('display','none');
						if ($.browser.msie) {
							$(this).after('<div id=\"' + $(this).attr(\"id\")  + 'Uploader\"></div>');
							document.getElementById($(this).attr(\"id\")  + 'Uploader').outerHTML = flashElement;
						} else {
							$(this).after(flashElement);
						}
						$(\"#\" + $(this).attr('id') + \"Uploader\").after('<div id=\"' + $(this).attr('id') + 'Queue\" class=\"fileUploadQueue\"></div>');
					}
					$(this).bind(\"rfuSelect\", {'action': settings.onSelect}, function(event, queueID, fileObj) {

				
						if (event.data.action(event, queueID, fileObj) !== false) {
						
						// TEST THE QUEUE SIZE
						if (settings.queueSize < settings.maxQueueSize || settings.multi == false ){
							settings.queueSize++;
						} else {
							alert( settings.messages.maxNumberUploadError );
							return false;
	               	      			}

							var byteSize = Math.round(fileObj.size / 1024 * 100) * .01;
							var suffix = 'KB';
							if (byteSize > 1000) {
								byteSize = Math.round(byteSize *.001 * 100) * .01;
								suffix = 'MB';
							}
							var sizeParts = byteSize.toString().split('.');
							if (sizeParts.length > 1) {
								byteSize = sizeParts[0] + '.' + sizeParts[1].substr(0,2);
							} else {
								byteSize = sizeParts[0];
							}
							if (fileObj.name.length > 20) {
								fileName = fileObj.name.substr(0,20) + '...';
							} else {
								fileName = fileObj.name;
							}
							$('#' + $(this).attr('id') + 'Queue').append('<div id=\"' + $(this).attr('id') + queueID + '\" class=\"fileUploadQueueItem\">\
									<div class=\"cancel\">\
										<a href=\"javascript:$(\'#' + $(this).attr('id') + '\').fileUploadCancel(\'' + queueID + '\')\"><img src=\"' + settings.cancelImg + '\" border=\"0\" /></a>\
									</div>\
									<span class=\"fileName\">' + fileName + ' (' + byteSize + suffix + ')</span><span class=\"percentage\">&amp;nbsp;</span>\
									<div class=\"fileUploadProgress\" style=\"width: 100%;\">\
										<div id=\"' + $(this).attr('id') + queueID + 'ProgressBar\" class=\"fileUploadProgressBar\" style=\"width: 1px; height: 3px;\"></div>\
									</div>\
								</div>');
						}
					});
					/*
					if (typeof(settings.onSelectOnce) == 'function') {
						$(this).bind(\"rfuSelectOnce\", settings.onSelectOnce);
					} */
					$(this).bind(\"rfuSelectOnce\", {'action': settings.onSelectOnce}, function(event, data) {
						if (event.data.action(event, data) !== false) {
							// UPDATE QUEUE
							if( settings.multi == true )
								settings.queueSize = data.fileCount;
						}
					});
					$(this).bind(\"rfuCheckExist\", {'action': settings.onCheck}, function(event, checkScript, fileQueue, folder, single) {
						var postData = new Object();
						postData.folder = pagePath + folder;
						for (var queueID in fileQueue) {
							postData[queueID] = fileQueue[queueID];
							if (single) {
								var singleFileID = queueID;
							}
						}
						$.post(checkScript, postData, function(data) {
							for(var key in data) {
								if (event.data.action(event, checkScript, fileQueue, folder, single) !== false) {
									var replaceFile = confirm('Do you want to replace the file \'' + data[key] + '\'?');
									if (!replaceFile) {
										document.getElementById($(event.target).attr('id') + 'Uploader').cancelFileUpload(key);
									}
								}
							}
							if (single) {
								document.getElementById($(event.target).attr('id') + 'Uploader').startFileUpload(singleFileID, true);
							} else {
								document.getElementById($(event.target).attr('id') + 'Uploader').startFileUpload(null, true);
							}
						}, \"json\");
					});
					$(this).bind(\"rfuCancel\", {'action': settings.onCancel}, function(event, queueID, fileObj, data) {
						if (event.data.action(event, queueID, fileObj, data) !== false) {
							// UPDATE QUEUE
							if( settings.multi == true )
								settings.queueSize = data.fileCount;
						
							$(\"#\" + $(this).attr('id') + queueID).fadeOut(250, function() { $(\"#\" + $(this).attr('id') + queueID).remove()});
						}
					});
					$(this).bind(\"rfuClearQueue\", {'action': settings.onClearQueue}, function() {
						if (event.data.action() !== false) {
							// UPDATE QUEUE SITE
							if( settings.multi == true )
								settings.queueSize = data.fileCount;
								
							$('#' + $(this).attr('id') + 'Queue').contents().fadeOut(250, function() {$('#' + $(this).attr('id') + 'Queue').empty()});
						}
					});
					$(this).bind(\"rfuError\", {'action': settings.onError}, function(event, queueID, fileObj, errorObj) {
						if (event.data.action(event, queueID, fileObj, errorObj) !== false) {
							
							alert( errorObj.type );
							
							var type = (errorObj.type).toString();

							//TODO - IMPLEMENTS ALL ERROR MESSAGE TO CUSTOM
							message = settings.messages[type];

							if( ! message )
								message = errorObj.type + \" Error - \" + fileObj.name;
							
						
							$(\"#\" + $(this).attr('id') + queueID + \" .fileName\").text( message );
							$(\"#\" + $(this).attr('id') + queueID).css({'border': '3px solid #FBCBBC', 'background-color': '#FDE5DD'});
						}
					});
					$(this).bind(\"rfuProgress\", {'action': settings.onProgress, 'toDisplay': settings.displayData}, function(event, queueID, fileObj, data) {
						if (event.data.action(event, queueID, fileObj, data) !== false) {
							$(\"#\" + $(this).attr('id') + queueID + \"ProgressBar\").css('width', data.percentage + '%');
							if (event.data.toDisplay == 'percentage') displayData = ' - ' + data.percentage + '%';
							if (event.data.toDisplay == 'speed') displayData = ' - ' + data.speed + 'KB/s';
							if (event.data.toDisplay == null) displayData = ' ';
							$(\"#\" + $(this).attr('id') + queueID + \" .percentage\").text(displayData);
						}
					});
					$(this).bind(\"rfuComplete\", {'action': settings.onComplete}, function(event, queueID, fileObj, response, data) {
						if (event.data.action(event, queueID, fileObj, unescape(response), data) !== false) {

							//DECREMENT QUEUE
							if( settings.multi == true )
								settings.queueSize--;
						
							$(\"#\" + $(this).attr('id') + queueID).fadeOut(250, function() { $(\"#\" + $(this).attr('id') + queueID).remove()});
							$(\"#\" + $(this).attr('id') + queueID + \" .percentage\").text(' - Completed');
						}
					});
					$(this).bind(\"rfuAllComplete\", {'action': settings.onComplete}, function(event, data) {
						if (event.data.action(event, data) !== false) {
							//CLEAR QUEUE
							if( settings.multi == true )
						 		settings.queueSize = 0;
						}
					});					
					/*
					if (typeof(settings.onAllComplete) == 'function') {
						$(this).bind(\"rfuAllComplete\", settings.onAllComplete);
					} */
				});
			}
		},
		fileUploadSettings:function(settingName, settingValue) {
			$(this).each(function() {
				document.getElementById($(this).attr('id') + 'Uploader').updateSettings(settingName,settingValue);
			});
		},
		fileUploadStart:function(queueID) {
			if (settings.queueSize == 0)
         			alert( settings.messages.nothingInTheQueueError );
			
			$(this).each(function() {
				document.getElementById($(this).attr('id') + 'Uploader').startFileUpload(queueID, false);
			});
		},
		fileUploadCancel:function(queueID) {
			$(this).each(function() {
				document.getElementById($(this).attr('id') + 'Uploader').cancelFileUpload(queueID);
			});
		},
		fileUploadClearQueue:function() {
			$(this).each(function() {
				document.getElementById($(this).attr('id') + 'Uploader').clearFileUploadQueue();
			});
		}
	})
})(jQuery);

djcascheta

First, thank you for this great little plugin.
The problem with maxQueueSize is that it alerts that number of files exceeded but does not remove the extra x images from queue. They are uploded anyway.

So, I got this ideea.
I am returning the filenames as hidden fields within the page. Why not count the number of "input" elements within the div and when it reaches to 6 disable the upload button 'append visibility: hidden' to the div. The problem is I know javascript so very little, could you help me out?

It alerts fine and counts them good. The thing is I do not know hot to append visibility: hidden to the div when number is > 6 or if number < 6 ok else append.
If you can help me, I would appreciate it.

Also, if i could get a jGrowl message on number > 6 it that would be awesome.

PS.

Never mind, I got it to work and hide the upload button once the it reaches 6.

lokat

So, can you show us what have u done to disable the button?

djcascheta

I am not a javascript guru, not even a begginer so the code may not be the best.
I am using the jGrowl uploadify.
The code is made to suit my needs, so you have to modify it to suit yours.

It only works with upload 1 by 1, if you use multi upload, it will upload all files but disable the button once it reaches 6.
If someone can improve it, I will want it also.

As mentioned below by Travis, I am using the modified uploadify js, posted above by gedalias. I tested it with the official release and it works with it as well.
Counting of the items.length starts from 0, to stop it at desired number of pics use if (items.length == yourdesireditemslength-1)

The id='"+c.name+"' />" is important, if removed you will get an extra field with value =files/undefined and blank name for each pic.

On upload.php, I echoed the filename as I need it, this may disable the script on OSX. I saw it echoed 1 and said important for it to work on OSX.

Here is my code, complete page:

<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
<title>Uploadify with jGrowl Sample</title>

<link rel=\"stylesheet\" href=\"uploadify/uploadify.css\" type=\"text/css\" />
<link rel=\"stylesheet\" href=\"css/uploadify.jGrowl.css\" type=\"text/css\" />

<script type=\"text/javascript\" src=\"js/jquery-1.3.2.min.js\"></script>
<script type=\"text/javascript\" src=\"js/jquery.uploadify.js\"></script>
<script type=\"text/javascript\" src=\"js/jquery.jgrowl_minimized.js\"></script>

<script type=\"text/javascript\">

$(document).ready(function() {
	$(\"#fileUploadgrowl\").fileUpload({
		'uploader': 'uploadify/uploader.swf',
		'cancelImg': 'uploadify/cancel.png',
		'script': 'uploadify/upload.php',
		'folder': 'files',
		'fileDesc': 'Image Files (*.jpg,*.jpeg,*.png,*.gif)',
		'fileExt': '*.jpg;*.jpeg;*.png;*.gif',
	    'auto':true,
		'multi': false,
		'simUploadLimit': 1,
		'sizeLimit': 3145728,
		onError: function (event, queueID ,fileObj, errorObj) {
			var msg;
			if (errorObj.status == 404) {
				msg = 'Could not find upload script.';
			} else if (errorObj.type === \"HTTP\")
				msg = errorObj.type+\": \"+errorObj.status;
			else if (errorObj.type ===\"File Size\")
				msg = fileObj.name+'<br>'+errorObj.type+' Limit: '+Math.round(errorObj.sizeLimit/1024)+'KB';
			else
				msg = errorObj.type+\": \"+errorObj.text;
			$.jGrowl('<p></p>'+msg, {
				theme: 	'error',
				header: 'ERROR',
				sticky: false
			});			
			$(\"#fileUploadgrowl\" + queueID).fadeOut(250, function() { $(\"#fileUploadgrowl\" + queueID).remove()});
			return false;
		},
		onCancel: function (a, b, c, d) {
			var msg = \"Cancelled uploading: \"+c.name;
			$.jGrowl('<p></p>'+msg, {
				theme: 	'warning',
				header: 'Cancelled Upload',
				life:	4000,
				sticky: false
			});
		},
		onClearQueue: function (a, b) {
			var msg = \"Cleared \"+b.fileCount+\" files from queue\";
			$.jGrowl('<p></p>'+msg, {
				theme: 	'warning',
				header: 'Cleared Queue',
				life:	4000,
				sticky: false
			});
		},
		onComplete: function (a, b ,c, d, e) {
			thisOne = document.getElementById(\"filesUploaded\");
items = thisOne.getElementsByTagName(\"input\");
if (items.length == 5) {				
				var Div = document.getElementById(\"flaShup\");
				Div.style.display=\"none\";
					};
		  $(\"#filesUploaded\").append(\"<input type='hidden' name='pic\"+items.length+\"' value='files/\" +d+ \"' id='\"+c.name+\"' />\");//adds hidden form field to uploadedpics div
		   $(\"#filesThumbs\").append(\"<img src='files/thumbs/th_\"+d+\"' alt='\"+c.name+\"'>&amp;nbsp;\"); //adds thumbnail image
			var size = Math.round(c.size/1024);
			$.jGrowl('<p></p>'+c.name+' - '+size+'KB', {
				theme: 	'success',
				header: 'Upload Complete',
				life:	4000,
				sticky: false
			});
		}
	});
});

</script>
</head>

<body>
	<div id=\"filesUploaded\"></div>
<div id=\"flaShup\" >
    <fieldset style=\"border: 1px solid #CDCDCD; padding: 8px; padding-bottom:0px; margin: 8px 0\">
		<p>File Size Limited to 3Mb. Number of Files limited to 6.</p>
		<div id=\"fileUploadgrowl\">You have a problem with your javascript</div>
    	<p></p>
    </fieldset>
    </div>
    <div id=\"filesThumbs\"></div>
</body>
</html>

Complete upload.php as well.:

<?php
if (!empty($_FILES)) {
    $tempFile = $_FILES['Filedata']['tmp_name'];
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_GET['folder'] . '/';
    $targetPath =  str_replace('//','/',$targetPath);
    $name = strtolower($_FILES['Filedata']['name']);
	$name1 = rand(1,99999).'_'.(ereg_replace(\"[^[:alnum:][:digit:]._]\",\"\",$name));
	$targetFile =  str_replace('//','/',$targetPath). $name1;
    move_uploaded_file($tempFile,$targetFile);
}

$imgsize = getimagesize($targetFile);
switch(strtolower(substr($targetFile, -3))){
    case \"jpg\":
        $image = imagecreatefromjpeg($targetFile);    
    break;
    case \"png\":
        $image = imagecreatefrompng($targetFile);
    break;
    case \"gif\":
        $image = imagecreatefromgif($targetFile);
    break;
    default:
        exit;
    break;
}

$width = 80; //New width of image    
$height = $imgsize[1]/$imgsize[0]*$width; //This maintains proportions

$src_w = $imgsize[0];
$src_h = $imgsize[1];
    

$picture = imagecreatetruecolor($width, $height);
imagealphablending($picture, false);
imagesavealpha($picture, true);
$bool = imagecopyresampled($picture, $image, 0, 0, 0, 0, $width, $height, $src_w, $src_h); 

if($bool){
    switch(strtolower(substr($targetFile, -3))){
        case \"jpg\":
            header(\"Content-Type: image/jpeg\");
            $bool2 = imagejpeg($picture,$targetPath.\"Thumbs/th_\".$name1,80);
        break;
        case \"png\":
            header(\"Content-Type: image/png\");
            imagepng($picture,$targetPath.\"Thumbs/th_\".$name1);
        break;
        case \"gif\":
            header(\"Content-Type: image/gif\");
            imagegif($picture,$targetPath.\"Thumbs/th_\".$name1);
        break;
    }
}

imagedestroy($picture);
imagedestroy($image);

echo $name1; // Important so upload will work on OSX
 
?>

TravisN.

The above sample from djcascheta will not work with the official release of uploadify. It appears he has used the modified uploadify.js script as posted above from gedalias

djcascheta

I tested it with the official release and it works with it as well.
I just added a new javascript function on OnComplete, that counts the number of input elements within the 'filesUploaded' div, when this number reaches desired number it adds display: none to flaShup div, in which i included all the upload section except the 'filesUploaded' div and filesThumbs div.

It should not matter what uploadify js you use, as long as you have what to count.

lokat

well thanks djcascheta.. it gives me enough idea how to hide the button..

for me.. I just want the users to select the image once only.. then show the image.. and hide the browse button

I just add a new div id for browse button div.. and after onComplete.. I hide that new div..

and walla.. it worked!.. thanks!

bccsergio

My second little contribution to this fantastic script... I made a little change in TravisN. code so it could work perfectly...

tested, tested again, it works fine...

		onCancel: function (a, b, c, d) {
			queueSize = d.fileCount;
		},
		onClearQueue: function (a, b) {
			queueSize = 0; // Changed from b.fileCount to 0 (as it'll remove everything from queue)
		},
		onSelect: function (a, b, c) {
			if (queueSize < maxQueueSize) {
				queueSize++;
			} else {
				alert(\"You can only send \" + maxQueueSize + \" files at once!\");
				$('#fileUpload').fileUploadCancel(b); // The MAGIC is here...
				return false;
			}
		},
		onAllComplete: function () {
			queueSize = 0;
		},
		onComplete: function (evt, queueID, fileObj, response, data) {
			queueSize--;
		},

the above was removed since it's not needed:

      onSelectOnce: function (a, b) {
         queueSize = b.fileCount;
      },

thanks for the great script!

PS. I need some help with Upload Order (http://www.uploadify.com/forum/viewtopic.php?f=7&t=568)... if a kind soul could help...

phob

Hi,

I was searching for a jquery based multiple upload form solution and was very impressed by Uploadify capabilities.

However, I need to find a way to control the number of files a user may upload. I found this post and tried to apply the modifications.

But after several hours, your (Djcascheta & Gedalias) code doesn't seem to work on 2.1.4 release.

I really don't know what to do to make the system work and I would appreciate if someone could help me because I really need Uploadify to do that.

Thanks by advance

mserragnoli

Hi all,

First of all congratulations for the Uploadify, this solution is very usefull.

Phob: I'm not sure if it's late, but to get the limit uploads working on 2.1.4 try this.

$(document).ready(function () {
            $('#file_upload').uploadify({
                'uploader': 'uploadify-v2.1.4/uploadify.swf',
                'script': 'Upload.ashx',
                'cancelImg': 'uploadify-v2.1.4/cancel.png',
                'auto': true,
                'multi': true,
                'removeCompleted': false,
                'width': '135',
                'height': '17',
                'queueSizeLimit' : 3

jQuery(this).bind("uploadifySelectOnce", { 'action': settings.onSelectOnce }, function (event, data) {
	                    event.data.action(event, data);
                            <b>// ADD THIS
	                    var queueSizeLimit = $('#file_upload').uploadifySettings('queueSizeLimit');
	                    $('#file_upload').uploadifySettings('queueSizeLimit', queueSizeLimit - data.fileCount);<b/>

	                    if (settings.auto) {
	                        if (settings.checkScript) {
	                            jQuery(this).uploadifyUpload(null, false);
	                        } else {
	                            jQuery(this).uploadifyUpload(null, true);
	                        }
	                    }
	                });

jQuery(this).bind("uploadifyCancel", { 'action': settings.onCancel }, function (event, ID, fileObj, data, remove, clearFast) {
	                    if (event.data.action(event, ID, fileObj, data, clearFast) !== false) {
	                        if (remove) {
	                            var fadeSpeed = (clearFast == true) ? 0 : 250;
	                            jQuery("#" + jQuery(this).attr('id') + ID).fadeOut(fadeSpeed, function () { jQuery(this).remove() });

                                    <b>// ADD THIS
	                            var queueSizeLimit = $('#file_upload').uploadifySettings('queueSizeLimit');
	                            $('#file_upload').uploadifySettings('queueSizeLimit', queueSizeLimit + 1);<b/>
	                        }
	                    }
	                });

Basically, each upload you will decrement the queueSizeLimit total, When you reach the value 0 the next file the user will try upload will fire the event (uploadifyQueueFull) to alert the user. If the user cancel the upload you will increment the queueSizeLimit for each upload canceled.

Howdy, Stranger!

Categories