4

Okay, I know questions like this exist in multiple forms across StackOverflow and other places on the web, but none of them is pointing me to what I actually need (maybe I missed a question that was more catered to my problem).

I need a Facebook-style image upload mechanism, using Codeigniter and javascript/jquery. Here's what it's supposed to do -

  1. Using a single file upload control (or for that matter any clickable control), open up the "Choose Files" dialog window, and allow the user to select multiple images from it. (I know this cannot yet be done in IE, and I do not really care about the multiple file selection not working in IE).

  2. Once the user has selected the files, the page should display a series of progress bars (like Facebook does). As each image gets uploaded, the corresponding progress bar reaches 100% (if it's simpler to implement, I am willing to forego the graphical progress bar for a text that displays the progress percentage), and the thumbnail of the image is displayed next to the completed progress bar (or text). At this point, the user should have the option to delete the uploaded image by clicking a cancel button (I think I can get this part working on my own).

  3. The upload can be sequential (like Facebook does), or asynchronous (some upload libraries I found work this way).

  4. What's most important (and the part that is stumping me) is the thumbnail generation. I know that there's some HTML5/CSS3 technique that allows you to display the thumbnail before the files have actually been uploaded, pulling them directly from the user's hard drive. But that won't work in IE8, and while I am not concerned about the multiple image selection not working in IE8, I need for the thumbnail generation to work cross-browser, and that includes IE8 (deciding on the browser compatibility is not something I can command, so please don't come up with a "screw IE!" solution).

I have tried using uploadify (I have no constraints against using Flash), but cannot seem to able to customize it to my needs. While uploadify does indeed display progress bars, I was unable to find a way to generate (and display) thumbnails on the fly, in accordance with the behavior I described above. I know how thumbnail generation works on PHP, just cannot figure out how to implement this together with the progress indicators. Am I looking for a suitable jQuery/ajax call?

Any help and/or pointers would be appreciated. I admit that I might have missed a StackOverflow question that would solve my issue, so please direct me to that page, or to any other page you believe will help me. Please feel free to suggest upload libraries other than uploadify, which you believe I might find useful.

Thanks in advance. And thanks for reading through all this - I tried my best to make the question properly descriptive!

Debadeep Sen
  • 435
  • 7
  • 18

2 Answers2

1

I have used Jquery file upload with good results. It does need IE to be in compatibility mode, but worked well for chrome/firefox.

UPDATE. It now claims to support IE 6.0+.

Kinjal Dixit
  • 7,777
  • 2
  • 59
  • 68
0

I'll focus on point 4 here. It can be done, but you'll end up using iframes (yeah, I now). They can be 1px small, but you'll need them if you want to create thumbnail previews. A good starting point would be here: http://www.zurb.com/playground/ajax_upload

As for creating the actual preview images (smaller versions) you can use CI's image library. Let me know how it works out.

Robert
  • 1,899
  • 1
  • 17
  • 24
  • I did check ajax_upload. However, that does not display a progress bar; it only displays a spinner button (I want the user to get some indication of how much upload has been done, which is why I was inclined to implement the progress bar). As for CI's image library, yes, that can generate thumbnails, but my question is - how do I know when an upload has finished, so that I can fetch the file from the server? – Debadeep Sen Jun 21 '12 at 05:41
  • Also, ajax_upload seems to be focused on uploading a single file at a time. – Debadeep Sen Jun 21 '12 at 05:43
  • Sure, but since you mentioned point 4 is the most important and any help or pointers would be appriciated I thought I share what I have. – Robert Jun 21 '12 at 19:49