Image Uploader / Thumbnail creator

[Phil Petree]

I've spent the last few hours looking all over google for a prototype ajax uploader and thumbnail creator and I'm coming up blank. 

 

Has anyone found anything usable (we only need to upload one image per user) or can you point me to some docs for this?

 

Thanks.

 

Pete

[Walter Lee Davis]

When you say a thumbnail creator, are you referring to server-side code? If so, what's your flavor? As far as an Ajax upload goes, Prototype doesn't like to do those without some kicking and screaming. I find that it's easiest to create an iframe and post through that. The only trick then is to send the message back to the outer page that the upload is complete.

Walter

> --
> You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
> To post to this group, send email to prototype-s...@googlegroups.com.
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

[Phil Petree]

We're implementing a CMS for user supplied content (articles and how-to's) and one of our larger partners "suggested" that it would be nice if we had photos (read logos) for the article authors.

 

Ideally, we'd upload the file, get confirmation, load the image into a div and allow the user to rotate, crop etc.  Probably not many of our regular users will avail themselves of of the "profile picture" but most of our government/corporate users probably will.

 

One of the other devs reminded me that we had the php file uploader library from cutesoft and that it implemented ajax (just not prototype) so I'm looking at that but we still need an image crop/rotate tool.

[greg]

Here's a little routine I use.  The server sends back some minimal JSON code that I extract from the iframe that the upload form was posted to.  This is a condensed version.  If you need more of the code (html/js), let me know.

If there's a more prototype-y way to do "document.getElementsByTagName('body')[0]", please let me know and I'll change my code.


var Uploader = Class.create({
    initialize: function(form, target, dir, mgr) {
        this.form = form;
        this.target = target;  //iframe
        this.dir = dir;
        this.mgr = mgr;
       
        $(this.form).observe('submit', this.upload.bind(this));
        $(this.target).observe('load', this.complete.bind(this));
    },
   
    upload: function() {
        // clear iFrame
        $(this.target).update('');
   
        // build form
        var f = $(this.form);
        f.submit();
    },
   
    complete: function() {
        try {
            var c = frames[this.target].document.getElementsByTagName('body')[0].innerHTML.evalJSON();
            var res = c['success'];
        }
        catch(e) {
            alert('Error.  File(s) not Uploaded');
            return;
        }
      // evaluate res here.
   }
})

[thinsoldier]

I've had success with this for almost a year now.

http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

It allows you to define a starting point then width and height to indicate your crop area.

You then send those numbers to your server side image processing script.

You will need to look for something else using flash and/or <canvas> if you really want to create the thumbnails on the client side.

Also the way I  use this cropper does not involve Ajax at all. I upload the file through the browser normally then choose from a list of files the one I want to crop.

The only trick then is to send the message back to the outer page that the upload is complete. 

That's not so tricky if using pop up windows rather than iframes (I imagine it should be a similar process with iframes) 

Have a link on your main page that opens a new window with the form to upload the image. Upload the image without ajax, show the uploaded image to the user with the cropping UI. Submit the numbers of the selected area back to the server to create the actual thumbnail then show a success message to the user while setting values in javascript about the url of the new thumbnail. When the user clicks to close that window you can have the JS variables passed to the parent window then script in that window can insert the thumbnail into that page.

[Phil Petree]

Thin,

 

Thanks, that's a really great find... I'll work on adding that in over the next week or so.

 

Greg shared his image uploader (iframe) code and was very patient and helped me get that up and running... it was quite tricky as the json response to an iframe had some very unexpected results.

 

We now have a css/div popup that prompts for an image, on submit it uploads the image via a hidden iframe, the server storage code updates mysql, stores the image on disk, sends some json back to the client with the new <img src= and the client takes that and updates the image on the client side with the new image. All in all, pretty neat.

 

And Greg, thanks again!

 

Pete

--

You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/4js1JMWXNeMJ.