Multiple photo uploading

I had a look through the extensions to find something that would be suitable but I did not find anything. Basically what I’m after a multi-photo upload tool that has the following:

  1. Displays an upload progress bar for each photo

  2. Checks for MIME type to ensure it is a valid photo

  3. (Optionally) creates a thumbnail of the photo

I would have used a flash based upload tool like ‘Uploadify’ but I read that it changes the MIME type to octet or something? Plus it’s Flash and some people might not have/use Flash.

Hi there GSTAR,

I do use SWFUpload extension (modified by me to encapsulate a bit more the extension with its required files) http://www.yiiframework.com/extension/swfupload together with PhpThumb.

Here a couple of articles that you may find useful:

  • multiple uploads

http://www.ramirezcobos.com/2010/11/06/how-to-use-swfuploads-yii-extension/

  • image resize

http://www.ramirezcobos.com/2010/10/15/how-to-use-phptumb-library-with-yii/

  • for image validation (i prefered to use my own function instead of a validator, that is up to you)




// this one i use to create a unique file name

public static function createPictureName($name){

            

        return md5($name . time()).(strtolower(strrchr($name, '.')));

    }


// this to validate picture

// obviously the constant names are declared within the class

// you include these functions!!!


// example of use:

// $result = Picture::validateUploadedPicture($picture_file,1480,1240,240,180,array('image/jpeg','image/gif','image/png'));

    public static function validateUploadedPicture( CUploadedFile $file, $maxWidth, $maxHeight, $minWidth, $minHeight, $mimeTypes ){

        

        $info = @getimagesize( $file->getTempName() );

        

        // remove unnecessary values from $info and make it more readable

        $info = array(

            'width' => $info[0],

            'height' => $info[1],

            'mime' => $info['mime'],

        );

        

        if ($info['width'] < $minWidth) {

            return self::MIN_WIDTH_ERROR;

        }

        if ($info['width'] > $maxWidth) {

            return self::MAX_WIDTH_ERROR;    

        }

        if ($info['height'] < $minHeight) {

            return self::MIN_HEIGHT_ERROR;

        }

        if ($info['height'] > $maxHeight) {

            return self::MAX_HEIGHT_ERROR;

        }

        

        $mimeTypes = is_scalar($mimeTypes) ? array($mimeTypes) : $mimeTypes;

        if (!in_array($info['mime'], $mimeTypes)) {

            return self::MIME_TYPE_ERROR;

        }

        return self::PICTURE_VALID;

        

    }



I have successfully created galleries with this approach for couple of projects.

Cheers Antonio. Regarding the SWFUpload tool, do you get the problems with it changing the MIME type to Octet?

Also I just noticed Yii has got a CFileValidator class, so that be useful for validating the image.

As previously said, I tried before File Validators and I rather used my own approach. At the end of the day G is what makes you comfortable to work with. I decided to use Yii because wasnt that strict at all with procedures…

I never had a problem with SWFUpload G and I have successfully created picture galleries and also document uploads (pdf and msword). If you have any problem let me know, here a set of MIME for doc validation used in another project:




private function validateMimeType(CUploadedFile  $doc){

	

		$mime = trim(CFileHelper::getMimeType($doc->getTempName()));

		

		switch ($mime){

			case 'application/msword':

			case 'application/doc':

			case 'application/text':

			case 'application/vnd.msword':

			case 'application/vnd.ms-word':

			case 'application/winword':

			case 'application/word':

			case 'application/x-msw6':

			case 'application/x-msword':

			case 'application/vnd.ms-office':

			case 'zz-application/zz-winassoc-doc':

			case 'application/pdf':

				return true;

		}

	

		return false;

	}



Hope it helps

Do you wont something like this

Ive implement to yii, you can select multiple files, display it , delete it, its uplodify modifid for yii

I usually do with tabular input (I save in database file too).

The most unconfortable point is that if you reload the page because of failed save, you will have to reinsert all files.

The trick in this case is to use ajax-validation for circunvebt this inconvenient.

This is only a partial solution for the problem (it gives only multiple file upload, no scrollbar).

For thumbnails follow Antonio’s advice

Hi Antonio,

I am having a couple of issues with SWFUpload. I downloaded the one from the extension library, as I noticed yours was in Spanish :)

  1. When I upload a file that is too big I don’t get any error message, nothing happens.

  2. I can upload multiple files but how do I make it upload multiple files in the same style as here: http://demo.swfupload.org/v220/multiinstancedemo/index.php, i.e. the files appear in a list and they have got a cancel button on each. Currently I only have one file “row” in my list and it doesn’t have a cancel button.

Did you check plupload?

-> http://www.plupload.com/

Flash dies a horrible death soon is going to be replace by HTML5 soon.

So why not use an uploader which supports most technologies?

I would. :)

There’s even an extension for it:

http://www.yiiframework.com/extension/pupload

That really looks classy. Thumbs up! :)

Wow I’m gonna give that a try now! Thanks!

How on earth are you meant to use this plupload extension?

First I got an error: Property "PluploadWidget.config" is not defined.

So I went in to PluploadWidget.php and changed "protected $config" to "public $config"

That got rid of that error, but now the error I am getting is: “You browser doesn’t have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.”

I am using Firefox and everything is enabled.

EDIT: That issue was to do with the "DIRECTORY_SEPARATOR" - I changed this to "/" in the PluploadWidget.php file.

There is supposed to be an updated version but the link has expired - anybody got a link to the updated version?

Fortunately, he wrote exactly what he did (complete with links) so it wouldn’t be impossible to update it yourself. :)

jacmoe - have you used this extension? I cannot figure out how to use it - is the ‘url’ parameter meant to point to the controller action that will handle the upload? If so, can you just use the normal CUploadedFile method to upload the file?

It should point to the upload directory, if I’m not mistaken.

Haven’t used the extension yet.

No, it points to the upload controller action. I’ve got this working now, seems really good.

It’s from the TinyMCE guys, so it should be good. I like their editor. :)

Aaah I give up on this one. Although the concept is good, it’s a bit difficult to get it working exactly how you want it to.

Anyway Antonio - let me know if you have any thoughts on my initial query. Thanks.

EDIT: Ive got it all working now. I had to modify the handlers.js file and a few other things. Works perfect now!

I am going to do something better than that G,

Drop me an email (through profile) and I will forward a fully working example.

Best