4

I need for users to upload files (mostly images) without leaving the current webpage. What's the best tool, library or mechanism for doing this? I'm using the latest jQuery and Spring webmvc (with JSP), so if there's already a mechanism within them then that's ideal.

It would also be really great to have some kind of progress bar. Does that mean it requires coordination with the server to read the progress (where Spring would have to come into play)? Or is there a mechanism within JavaScript for this?

Improve this question

4 Answers 4

Reset to default
1

You should check out Plupload.

Plupload offers a cross-browser JavaScript File uploading API that handles multiple file uploads, client-side progress meters, type filtering and even client-side image resizing and drag-and-drop from the desktop. It achieves all of this by providing backends for Flash, Silverlight, Google Gears, HTML5 and Browserplus and picking the most capable available option.

Its really neat! Here's a link to some of their Demos...

http://www.plupload.com/example_jquery_ui.php

... and a screenshot of the jQuery UI queue widget (it has a progress bar!):

jQuery UI queue widget

I hope this helps.
Hristo

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This is kind of exactly what I was looking for. Kind of in the sense that it seems like a standalone mechanism for uploading files. So, for example, I can't have a form with fields like description and tags for the image. That's actually pretty critical, so I need to figure out how to implement something like this. Great that I don't need to involve Spring and still get a progress bar! And I love how they try to give the best experience your browser is capable of.
@at... since you accepted my answer, I'm assuming you're happy :) Why is this "kind of exactly" what you're looking for? Is it kind of or exactly what you're looking for?
I have other form fields, like description and tags, that need to be sent along with the upload, now after reviewing more of the demos and documentation it looks like I can do this with plupload's custom mechanism.
you are really helpful Hristo, I see you also tidied up my question :)
1

I use uploadify pretty regularly: http://www.uploadify.com/

However it does use flash for the upload mechanism and as a result may create some issues if the user is authenticated.

Improve this answer

2 Comments

Seems like a lot of user issues in the forums and not crazy (though not a dealbreaker) about requiring flash. I have to also have regular form fields along with the file upload and not sure how tricky that is with a flash mechanism.
Yeah, it's really easy to implement but has limitations. I've been looking at plupload (hristo's post), and the possibility of creating a simplified custom implementation for a project I'm working on.
1

You should use AJAX on the client side

http://www.webtoolkit.info/ajax-file-upload.html This tutorial covers all client side.

Om the server side This tutorlal covers most of this issue:

http://www.ioncannon.net/programming/975/spring-3-file-upload-example/

Yopu can use jquery as well or any other JS framework.

But the mist important thing is the fact You need to remember that your tag on client side should have. 

enctype='multipart/form-data'

property. it means that your request contains muultipart data.

Improve this answer

1 Comment

I know how to do a regular file upload in Spring, just not an ajax mechanism (which I guess in the webtoolkit example above is just a regular upload). But this doesn't give me a progress bar or other goodies like filesize and multiple selects as the other answers provide.
0

Uploadify does that trick > http://www.uploadify.com/ All samples are php but you should be able to convert it to your platform.

Improve this answer

1 Comment

Responded to the other uploadify answer, not crazy about uploadify compared to plupload..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.