Resize, preview and upload an image with AJAX - Complete example

[rodneymonteiro]

Hi rodneymonteiro,

Thanks for using this plugin.

You can configure the image sizes with the variable $uploadData, in /php/configuration.php.

There you may add or remove resizing groups (large, medium, thumb, etc.). An upload directory will be created for every resizing group.

Just to let you know that I am using the very first version, which you have written in this post.

I have no idea, where this has to change in the configuration file. Are you able to please give me a small bit of code .. will very much appreciate it ...

[AMS]

Just to let you know that I am using the very first version, which you have written in this post.

The very first version of the plugin is deprecated. Please, download the one from the demo:

http://dondedeportes.es/uploaderPreviewer

You can reach it also from the official jQuery plugins site:

http://plugins.jquery.com/project/UploaderPreviewer

I tried to update my first post to place this links, but I didn't find out how... Sorry for that.

[rodneymonteiro]

Thanks AMS. Will have a look and let you know, how I go ...

But thanks a lot for the replies and your work is superb.

[AMS]

Thanks AMS. Will have a look and let you know, how I go ...

But thanks a lot for the replies and your work is superb.

Thanks for that

Hope everything goes ok, but if you have any issues, please let me know.

[rodneymonteiro]

Rodney again ..

I worked on your script and everything is great.
I managed to get the script according to my requirement, except for one place where I am stuck.

After uploading, I DON'T WANT that message in the <div> to be displayed, rather than it uploads and goes to the page as listed in the configuration file.

I am not able to remove that message. Can you please help me with this at the earliest?

Appreciate it

Regards
Rodney

[AMS]

Rodney again ..

I worked on your script and everything is great.
I managed to get the script according to my requirement, except for one place where I am stuck.

After uploading, I DON'T WANT that message in the <div> to be displayed, rather than it uploads and goes to the page as listed in the configuration file.

I am not able to remove that message. Can you please help me with this at the earliest?

Appreciate it

Regards
Rodney

Hi,

You are right, sometimes the dialog box after saving has no sense. That's why I've developed a new version of the plugin including two new configuration variables:

• savingDialogMessage
• saveOkDialogMessage

If you don't want the dialog box after saving, set saveOkDialogMessage to false.

I have also extended the configuration section in the documentation, so it's easier to see what can be configurated.

[fatche]

Hi AMS,

Thanks for your work, it helped me a lot for one of my developpement project.

Could you help me for something that no one has been talking about here?

How could I update the pictures I've uploaded.

I mean : I have a form with lots of infos (id, names...) and the uploader plugging, everything works fine, i save the form infos in a database and the pictures are uploaded perfectly.
Now if I want to edit/update the whole thing, how could i preview the pictures i stored in the first place and overwrite them if necessary (I might overwrite, one or more, the first, the last, or actually any position)

I hope i've been clear enough so you can understand me.

Thanks in advance for your precious help

[atc4545]

I had the same problem,I considered your advice and I found it is wonderful.i had solve it after refer to your answer,thanks.

__________________
Cost performance Apple Accessories online.

[AMS]

I had the same problem,I considered your advice and I found it is wonderful.i had solve it after refer to your answer,thanks.

You are welcome

[AMS]

Hi AMS,

Thanks for your work, it helped me a lot for one of my developpement project.

Glad to hear it

Could you help me for something that no one has been talking about here?

How could I update the pictures I've uploaded.

I mean : I have a form with lots of infos (id, names...) and the uploader plugging, everything works fine, i save the form infos in a database and the pictures are uploaded perfectly.
Now if I want to edit/update the whole thing, how could i preview the pictures i stored in the first place and overwrite them if necessary (I might overwrite, one or more, the first, the last, or actually any position)

I hope i've been clear enough so you can understand me.

Thanks in advance for your precious help

Check the Initialize forms to update files section in the documentation (http://dondedeportes.es/uploader-previewer). There you can see:

<div class="imageForms" images="image1.png,image2.jpg,image3.gif"></div>

You have to place the existing image names in the imageForms div, within the images attribute.

You have to read this attribute in javascript and populate the image forms, in the $(document).ready(), for instance. The attribute may be removed in order to clean the code:

if ($('div.imageForms[images]').length) {
  
  var imageFilenames = $('div.imageForms[images]').attr('images').split(',');

  $.uploaderPreviewer.populateImages(imageFilenames);

  $('div.imageForms[images]').removeAttr('images');
}

The image names in the comma-separated string are splitted into an array, which is used by populateImages().

So far, if the plugin configuration is right, the images should be displayed on page load. And also if the configuration is right, you will be able to remove or replace anyone of them.

The working flow in the form is the same for insert and for update. The difference comes when the form is submitted. For an update, you will have to loop over every image and call the complex function updateUpload() of uploadedFile.php.

updateUpload() gets the name of the image comming from the form, the name of the stored image and a keyword list. If both names are equal, this means that the image remains as it was. Nothing is performed. The stored image name (which is equal to the image name from the form) is returned.

If the names are different, this means that the image was changed. Then, the old image is deleted and the new one moved from the temp directory, were it was, to the uploads directory. A new filename is generated with the keyword list. The new filename is then returned.

That's the easy way, where you only have to do a loop and call updateUpload(). In the post below, I explain how to avoid the loop and the function call in every iteration. It is though not so easy going

[AMS]

Here I place a function to update uploaded images with no loop.

It takes two arrays, one with the images comming from the form (which may contain some changes or not) and one with the images stored in database.

This two arrays are substracted in both ways, in order to get the new and the deleted images, which are set in the arrays $deletedUploads and $newUploads.

A last array, $totalUploads, gets the list of total stored images. You may return this array instead of $result, or pass it by reference as parameter. It is not used in this function for any purpose, if you don't need this array for anything, you may remove it from the function.

    private function updateUploads($uploads, $dbUploads) {

        $result = true;

        $totalUploads = array();

        if ($dbUploads) {
            $totalUploads = $dbUploads;
        }

        if ($uploads && $dbUploads) {
            $deletedUploads = array_diff($dbUploads, $uploads);
            $newUploads = array_diff($uploads, $dbUploads);
        }
        else {
            $deletedUploads = $dbUploads;
            $newUploads = $uploads;
        }

        if ($deletedUploads) {
            
            $totalUploads = array_diff($totalUploads, $deletedUploads);

            $result = $result && UploadedFile::deleteUploadedFiles($deletedUploads);

            $sql = 'DELETE FROM table'
                 . ' WHERE field IN ("' . implode('","', $deletedUploads) . '")';

            $result = mysql_query($sql) && $result;
        }

        if ($newUploads) {
            
            $newUploads = UploadedFile::moveTempFilesDescriptiveNames(
                    $newUploads, $this->getDescriptiveNameKeywords()
            );

            $totalUploads = array_merge($totalUploads, $newUploads);

            // Example: INSERT INTO tbl_name (a,b,c) VALUES(1,2,3),(4,5,6),(7,8,9);
            
            $preparedValues = implode('"),(' . $elementId . ',"', $newUploads);

            $sql = 'INSERT INTO table (element_id, field)'
                 . ' VALUES(' . $elementId . ', "' . $preparedValues . '")';

            $result = mysql_query($sql) && $result;
        }

        return $result;
    }

[fatche]

Thanks a lot AMS,

I'm gonna try all this as soon as possible and i'll let you know about the result

Have a good day

[pds]

Hello AMS,

Thanks so much for making your code available!

I am working on my localhost as I work on integrating your script into my website. I have 'urlRoot' => 'localhost/' set in the $pathnames array.

So far, all I have done is copy the script into my localhost root directory. The images are uploading into the proper directories, but when it goes to show the preview image in the form and the uploaded image in saved.php, it shows a broken image icon.

Any ideas on what section of the code I should focus on and why this might be happening?

Thanks much,
Paul

[AMS]

Hello AMS,

Thanks so much for making your code available!

I am working on my localhost as I work on integrating your script into my website. I have 'urlRoot' => 'localhost/' set in the $pathnames array.

So far, all I have done is copy the script into my localhost root directory. The images are uploading into the proper directories, but when it goes to show the preview image in the form and the uploaded image in saved.php, it shows a broken image icon.

Any ideas on what section of the code I should focus on and why this might be happening?

Thanks much,
Paul

Hi Paul,

Maybe you should place a '/' before your path. Try 'urlRoot' => '/localhost/'.

You can also try with complete url 'urlRoot' => 'http://localhost/'.

[pds]

'urlRoot' => '' did the trick. (I'm using XAMPP and my files go in the htdocs folder. so it was ending up looking in localhost/localhost/ directory).

Thanks for your help!

I have another issue I'm trying to get to the bottom of. I am using Tabs from http://flowplayer.org (jquery.tools.js) and it looks like the ui javascript (jquery-ui-1.8rc2.custom.min.js) is breaking my Tabs.

I use jQuery's noConflict function which keeps the Tabs & your uploading script from conflicting as long as I don't load the ui javascript. However, I lose the dialog box and progress bar without the ui javascript.

Any ideas on how to work around this? Maybe a more recent version of the ui js? If I only need 1 or 2 modules from the ui javascript and they aren't the issue, maybe I could just load those modules instead of the entire jquery-ui-1.8rc2.custom.min.js. What do you think?

The noConflict code is as follows:

<script type="text/javascript">
			var $g = jQuery.noConflict();
			(function($g) {
			
			$g(document).ready(function() {
			
				// it must be checked if there are div.imageForms because the
				// uploaderPreviewer javascript may be not included and produce an error
				if ($g('div.imageForms').length) {
			
					$g('div.imageForms').append($g.uploaderPreviewer.createImageForms());
			
					// the images are populated if the admin form is to edit, and not
					// to insert
					if ($g('div.imageForms[images]').length) {
						var imageFilenames = $g('div.imageForms[images]').attr('images').split(',');
						$g.uploaderPreviewer.populateImages(imageFilenames);
						$g('div.imageForms[images]').removeAttr('images');
					}
				}
			
				$g('#buttonSave').click(function() {
					var itemId = $g(this).attr('itemId');
					if (itemId) {
						$g.itemForm.update(itemId);
					}
					else {
						$g.itemForm.insert();
					}
				});
			
			});
			
			})(jQuery);
			
			</script>