Question

I have a news section where I can post some news.

-> Thumbnail , title and content

What I want:

• The user should be able to upload an image file without leaving the page
  -> progress bar

• Send the file as a post request to my server.

• Then I can get the image file from the post request, then I can resize/rename the image and upload it to amazon s3.

• If I have to use a javascript library, I would prefere to use jquery.

This should looks something like this:

If I submit the news, I want to save the image path in my database. Now I would need a way to get the image name from my post method.

I’ve found some uploading solutions, but I have problems to understand how they are working.

http://blueimp.github.com/jQuery-File-Upload/

http://www.uploadify.com/

I only know get/post to retrieve information but they integrate somehow php files in the form.
for example:

$(function() {
    $('#file_upload').uploadify({
        'swf'      : 'uploadify.swf',
        'uploader' : 'uploadify.php'
        // Put your options here
    });
});

I am lacking information to do this on my own. What would you recommend me?

Ps: I am using Java with Play2

Answer 1

Uploadify is definitely the way to go.
All the steps for implementation are to be found here : http://www.uploadify.com/documentation/uploadify/implementing-uploadify/

You need to configure the path where your uploads go in the uploadify.php script.

As for amazon S3 here is an implementation : http://code.google.com/p/uploadify-amazon-s3/

I think onUploadSuccess method better fits than onSelect : http://www.uploadify.com/documentation/uploadify/onuploadsuccess/