By BoarK on

Hi all,

I am developing a fitness social network site where users can upload progress pictures to their accounts. Due to the nature of the site, some people might wish to maintain their anonymity by not showing their faces in such a public place. I would like it to be in two steps. First the image upload occurs through the use of upload.js /w progress bar. Then the user is given the chance to crop the picture to their liking using a derivative the image cropper in the Interface Jquery plugin before saving it. Before I tackle this module, I would like to know what is the appropriate "Drupal way" of doing things. How do I "hook" this functionality into Drupal?

I would like to use this functionality on different pages. i.e. progress picture upload, profile image, group image, event image upload pages.

I have an idea:

Create a new module that provides a new form element ('#type' => 'image_uploader') that does the uploading. This should work well since the upload pages are essentially forms. I am not sure how the form validation would work in this case.

Please point me in the right direction.

Thanks.
Nathan.

⋅ Categories: Drupal 5.x

Comments

BoarK’s picture

BoarK commented

Since I didn't receive any further direction, I dove head first into doing what I proposed above this weekend and this is what I came up with. It's not completely finished. I still have to add the cropping functionality.

Image

Getting SWFUpload to work was a bit tricky.

BoarK’s picture

BoarK commented

Cropping works!

Image

BoarK’s picture

BoarK commented

Hello again,

Added rotation clockwise and counter-clockwise and activated the ajax loader gif for all transactions.

I've put together a screen capture video for your viewing pleasure.

Youtube vid

I still have to replace the default gd lib with imagemagik to get better quality when scaling/cropping/rotating.

Adding the widget to a page is done through the form api, but the image manipulation is handled by the profile module. I have to encapsulate all the functionality inside the swfupload module so that I can use it all over the site.

More to come...

Nathan.

ivrh’s picture

ivrh commented

Hi.

You did fantastic job. Is it possible to get your guidance of how to implement this?
Thank you.

Winner always looks for solution
Looser always finds excuse.

Need real server security? Get in touch

BoarK’s picture

BoarK commented

Since the last update many changes have been made.

1. Added support for multi-file uploads
2. Total rewrite of server-side code to use the database instead of session variables to keep track of uploads. Due to a race condition on the session read/write I had to resort to using the DB.
3. Better user interface design.

Enjoy a work in progress video.

Youtube link

TODO:

1. Still have to implement facility to save edits.
2. Validation.

Nathan.

BoarK’s picture

BoarK commented

Hi all,

I have got to give it up to the person who designed / developed the Forms API. FAPI is so powerful out of the box. This module wouldn't be possible with out it.

Here's another video of my progress.

Youtube link

From the video you can see that I am done with validation and submission, hence the appreciation for FAPI.

Now to add support for all types of file uploads, not just images.

Tell me what you think so far.

Nathan.

thomjjames’s picture

thomjjames commented

woo, that's impressive stuff!

what handles/produces the upload progress bar?

i'm looking to add a upload progress bar to a custom image module i have so i'm subscribing to this thread.

great work
Tom

______________________________________________
http://adrenalinehub.com/thomjjames - Action Sports Community
http://www.tomswebstuff.com

______________________________________________
https://tomswebstuff.com

BoarK’s picture

BoarK commented

Wow, that's quite a nice site you have there. I have it saved in my bookmarks as one of the sites to emulate. Great job.

The progress bar is pure css generated by javascript that controls a flash uploader object. The flash provides the uploading functionality, but the UI is entirely customizable in css.
It's called SWFUpload. I used a derivative of it by a fellow named Jake. Here's a link to his site:

SWFUpload R5.2

I figured since flash video is going to be a major component of the site I'm working on, most of my user base is going to have flash installed anyway so another flash object is not going to hurt. There's support to make it entirely degradable if the client browser doesn't have flash installed. I haven't looked into this yet.

Good luck.
Nathan.

thomjjames’s picture

thomjjames commented

Hi Nathan,

thanks for your kind words about the site and your information on the SWFupload, i'll certainly check it out and report anything interesting here.

cheers
Tom

______________________________________________
http://adrenalinehub.com/thomjjames - Action Sports Community
http://www.tomswebstuff.com

______________________________________________
https://tomswebstuff.com

dharamgollapudi’s picture

dharamgollapudi commented

Nathan:

I saw the video, and your module is very promising. I would love to see it part of the contributed modules or atleast the steps in adopting it.

Can't wait to see the actual code.

Rune00’s picture

Rune00 commented

Nice work. I'm looking forward to follow your progress.
I could really use something like this myself.
How do i start? :)

Keep it up :)

newdru’s picture

newdru commented

nathan,

is your module available for testing? it looks pretty cool. i saw the link above and i'm not sure if that's a link to your module or some other?

thanks

Christefano-oldaccount’s picture

Christefano-oldaccount commented

I'd also like to see this as a contributed module.

jorisx’s picture

jorisx commented

your module and flash interface looks really nice,
would love to test it.

cheers, J!

Http://www.reloadmedia.com

Http://www.reloadmedia.com

p_palmer’s picture

p_palmer commented

Looks like a great starting point, where is the download page ?

StevenSokulski’s picture

StevenSokulski commented

This would be great for assisting users in creating profile pictures of a certain size or aspect ration. Very nice work. Where can we try it out? Or get the code to run it on our own test sites?

scott falconer’s picture

scott falconer commented

I'd be willing to put up a bounty to get this released.

drupalina’s picture

drupalina commented

I think this is the best profile photo solution that I've seen.

Are there any updates about releasing this as a module???

mokargas’s picture

mokargas commented

I'm under the impression boark didn't release this publicly. I've seen youtube videos, discussion etc, but cannot find the module for testing?

vm’s picture

vm commented

imagecache.module provides scaling and cropping for those that want it now..

mokargas’s picture

mokargas commented

Thanks for that, though I'm after that ajaxy/flash scaley goodness :)

BoarK’s picture

BoarK commented

Hi All,

Thanks for your interest. I'm planning to release this as a Drupal module, but there's much to be done before it is ready for general consumption since it is so closely entwined in site specific code.

Since switching over to Jquery UI the code was completely overhauled. The cropping/previewing is done entirely on the client side, thus making it much more responsive. Aspect ratio support is in thanks to braeker's excellent resizable plugin. It is also possible to set derivatives of any size.

TODO:
- make module generic (remove site specific code)
- upgrade the SWFUpload component. I'm still using version 5.2.
- possibly allow for dragndrop placement of image in node body after uploading/editing

I got my CVS account approved but have to finish the project I am currently working on first.

Here's a link to the latest video: You tube

Stay tuned.

Nathan Tran.

AndrewGearhart@drupal.org’s picture

AndrewGearhart@drupal.org commented

Nathan!
I first saw this on YouTube and found the posts by searching for you in Google. Might want to post some comments in your YouTube space about where people can find out more about the module (ie link to this thread).

I'm quite interested in this. I'm looking for good ways to store and manage my own photo gallery. Sure, there are ways out there already, however, none of them are terribly elegant. Your method with the multiple file uploads and the new switch over to using Jquery UI in your code looks quite interesting!

Ideally, I'd love to be able to generate a Drupal distribution for creating a "family site" where a family could sign-up for a web host and keep all of their media (self-created to scrapbook!) in one place:

  • blogs
  • pdfs
    for prints of newspaper articles for example
  • photos
  • videos
  • audio recordings

That has long been my goal with gearhart.org but I've never had quite the time to devote to making it happen (I'm a weekend warrior on this) and too many of the tools out there were too far from my goal to snap things into place. With web hosting with companies like Site5 so cheap and easy to setup... the opportunity is there to get something like this to work. The code just needs to be written.

If there is anything that I can do to help the effort (financial assistance is possible, but I'd rather work on specific coding tasks if I can contribute that way), let me know!

Cheers,
Andrew

xavierbabu’s picture

xavierbabu commented

Hi Nathan,

This is amazing stuff...

Thanks
Babu

mba’s picture

mba commented

Hi Nathan,
I think many people like me have struggled with the default Drupal option and found your module amazing. I am willing to offer $100 for your effort to bring whatever you have into the Drupal community. I am sure others will be more than willing to pitch in if they need to.
What do you say?

pingers’s picture

pingers commented

Looking very good - subscribing :)

Please post when you're ready.

vivianspencer’s picture

vivianspencer commented

subscribing