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

You are using Prototype? Too bad you didn't choose JQUERY. Wordpress uses jquery so many of the functions I use are hopefully built into that. That way I don't have to further bloat my web site with more stuff.

Today I hope to have a chance to check the stuff out that you sent me. I forgot to mention a couple things...

As far as changing the SPACES in filenames... I just made sure to put double quotes around my src in <img src="picture with spaces.jpg"> and that "fixed" it. That was sort of a DUH! moment. However, my OS is linux, so I generally don't like spaces! I also think I know where I need to do the rename change - it's in the uploadImage.php, right? I was playing with that the other day. I also added code to create a directory - mkdir() - based on the users ID. So every user has their own "library" ... it's pretty cool!

You know what? I was just thinking. I use your script up to the point of hitting SUBMIT.

However, I never really SUBMIT to your script. All I do is capture the path to the uploaded Thumbnail/Preview. That is the image that becomes part of the post. The path is captured and written into a textarea. And then THAT is what is submitted as the post.

So I need the File upload to upload the original into a specific place, and then create the thumb/resized image from that to a different place, whose path I use for the posting.

make sense?

So, knowing that, will I still be able to use your suggestions?

(and I haven't even had a chance to look at those, yet, either! Sorry! I will try right now!)

thnx

OH yeah - and SINCE I never do a SUBMIT, it never cleans up the stuff in $oldImageToDelete

Maybe I should call it everytime an image is previewed... I'll try that.

Hi there,

I love the script - I think it works great - I have a question though:

Have you tried playing around with having multiple image upload fields?

Ultimately I want to have a form that will collect text data (name, phone, etc.) and include this image uploader at the bottom, and allow for multiple image uploads. I would like to simplify things by having the user fill in all the text, choose their images, hit "Upload" ONCE, and have all the information (text and images) saved and stored.

What would I need to do to the code of this file to allow for more than one image at a time?

Thanks!

Hi,

Thanks for the comments :)

Yes, I use the script with multiple images, and it works quite good for me. The only thing you have to do is to set unique ids for the file fields. You can achieve this by only setting an index (fileField1, fileField2, etc.).

I have updated the php script and developed a jQuery plugin that makes the task simplier. I was planning to release it in a couple of months, as it takes some time to revise the code, write use instructions and develop a demo, and I don't have time for it right now. However, if you want, I can upload it here, with a few quick instructions.

Hi AMS,

That would be awesome! I have spent literally days upon days trying to find something like this and modifying what I could find to do what I want it to do (I am not a developer - more of a designer :)

I see. If you are not a developer, it becomes more difficult.

Ok, I will upload here the jQuery plugin and the php script. Just give me a couple of days.

Here is the UploaderPreviewer jQuery Plugin.

I have tried to do it as complet as possible, but, as I already said, I have not much time right now. I hope to revise it and put a demo somewhere, so it can be seen in action ;)

Though, I have made a simple demo with a little description, so who ever can install and try it out. If you have any question about the plugin, please ask :)

You can find everything attached to this post in two zip files (the maximum file size is 100 KB). Please, uncompress them and join both folders.

I have posted some features of the plugin below.

Hope it may be useful!

Features

• Crossbrower. Firefox, Opera, Chrome, Safari and IE.
• No garbage. The files in the temporary directory are deleted when the user exits or reloads the page
• Descriptive filenames. The file names are constructed with a three random keywords of a given keywords list. If the filename already exists, characters are taken from the unique temporary filename generated by PHP.
• Iframe factory. An iframe factory is used in order not to unnecessary duplicate iframes.
• Loading spinner image. A loading spinner image is displayed while the uploading. It was taken from the website ajaxload.info.
• Loading timeout. A jQuery dialog box is displayed while the saving. It contains a progress bar that shows the elapsed time if there are images loading. If the maximum loading time is reach, the saving process is canceled and an error message is displayed. To test this feature, it can be placed a timer in the php script. For example, place sleep(5); before the return statement, at the end of the script.
• Javascript validations.
  • Image type. uploaderPreviewer.js > checkImageType()
  • Uploaded files. itemForm.js > validateData()
• Php validations. All in uploadImage.php.
  • Upload error.
  • File type. File types supported by the script: png, jpg, gif.
  • File size. The maximum supported is 3000000.
  • File dimension. The maximum supported is 2500.

Hi AMS,

Thanks for that - I have been playing around with the uploader and it seems to work great!

I want to use the uploader at the bottom of a standard form, where above it would have text input fields. Ultimately, the final result would be a page with a few text inputs, the image inputs, and one "Upload" or "Save" button that would POST everything to a mySQL database.

I would be able to do this myself if the form was written in html or even php, but with it done in javascript I don't know where to look. I have been trying to figure out how to add single form input fields, and so far have not been successful.

I know you are really busy, but is there a place I should be adding/modifying code (in one of the files) that would allow me to add additional form fields and specify a database to POST to?

Thanks again!

If you need client side handling of files before uploading and or batch uploading why not use a signed java applet or flash like they do on sites like facebook?

Quote:

---

Originally Posted by mikey_ray

I know you are really busy, but is there a place I should be adding/modifying code (in one of the files) that would allow me to add additional form fields and specify a database to POST to?

---

Hi there,

There are two ways to send POST parameters with javascript:

• Ajax with POST method.
• Submit a existing POST form with submit() function.

Javascript cannot construct and send individual POST parameters, due to security reasons.

You may add the text inputs in the main php file, index.php. Then you have to manage them together with the uploaderPreviewer file fields. This kind of functions are placed in the plugin in the itemForm.js file, concretely in the submitForm() function. This function is called after the validateData() function, so you can check there if the form data is correct before sending them.

In the submitForm() function the ajax option to send POST parameters is used. Then it is received a reply, and if everything went ok, the user is redirected to a success page. If there was something wrong, a dialog box with a message is displayed. This would be managed in the saved() function.

If you prefer to use the second way to send POST parameters, by submitting a POST form, you can see it in the $.uploaderPreviewer.uploadImage() function. It is used to automatically upload the images, as it is the only possible way to send a file with javascript.

Hope this answers your question :)

Quote:

---

Originally Posted by amsterdamharu

If you need client side handling of files before uploading and or batch uploading why not use a signed java applet or flash like they do on sites like facebook?

---

Well, the main idea behind is to keep it as simple as possible, using basic technologies that the browsers can understand and interpret the fastest, and that you are absolutely sure that will work in every browser.

If you use other technologies than the basic ones (i.e. html, javascript), your site may not be seen by some people that don't have their broswers adapted. So you are forcing them to install some components in their computers in order to be able to see you website. Even propietary components like Flash! (Moreover, Flash not always works fine in Linux.)

I know javascript is not a great programming language, but it is supported by every browser. And there are great open source frameworks like jQuery, Prototype, Mootools, etc. with a great community supporting them. Do you think all these people contributing to these frameworks, some of them web technologies experts, would be spending their time if it were no worth? ;)

Quote:

---

Javascript cannot construct and send individual POST parameters, due to security reasons.

---

This is not the case. How else would an AJAX request be built?

Quote:

---

Originally Posted by criterion9

This is not the case. How else would an AJAX request be built?

---

I am not sure if I have understood the question. An ajax request can send GET or POST parameters, the same as a html form.

Does this answer your question?

I don't realy understand what the script does, ... sorry.

What I think it does is sent the images to the server and process resize there then load it into the client. If images are huge that might take longer than needed and client side handling should apply (yes applet, flash or activex preferably all). Big sites like facebook support it one way or another on linux. (it did before China started blocking facebook).

As long as you have clients that are aware of the big file long time upload fact than I think this is more better than using client side. But I am not a programmer I am just an English teacher.