Javascript/html - File upload

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:

Upload example

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

Michael Lumbroso · Accepted Answer · 2012-08-20 13:34:13Z

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/

answered Aug 20, 2012 at 13:34

Michael Lumbroso

4,9935 gold badges29 silver badges34 bronze badges

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

2 Comments

Maik Klein Over a year ago

hm, I need to rename the file to something like file+date+rndstring.jpg Any idea how I can do this?

Michael Lumbroso Over a year ago

I think you can use itemTemplate to do so : uploadify.com/documentation/uploadify/itemtemplate

coder · Accepted Answer · 2012-08-20 13:32:19Z

1

You can do something like this from the documentation :

$(function() {
    $("#file_upload").uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php',
        'onSelect' : function(file) {
            alert('The file ' + file.name + ' was added to the queue.');
        }
    });
});

Where you can get the flename once it has been selected.

answered Aug 20, 2012 at 13:32

coder

13.2k32 gold badges116 silver badges221 bronze badges

Comments

Delorean · Accepted Answer · 2012-08-20 13:46:27Z

1

What you're asking for is a LOT really. But to get you started, have a look at this page (uses JQuery):

http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/

The above link is a nice upload utility that you can use for drag-and-drop pretty easily, but it can be used by manually selecting files as well. Well documented.

As for resizing, I've used this with great success (PHP): simpleImage

simpleImage is REALLY easy to use and plug into your website.

edited Aug 20, 2012 at 13:46

answered Aug 20, 2012 at 13:33

Delorean

4915 silver badges18 bronze badges

2 Comments

Maik Klein Over a year ago

I already read though this tutorial and it made no sense to me, but now i read it again and I think I know how it works and how i can implement it in java. I will give it a try, thanks

Delorean Over a year ago

Great. You mean the uploader right? It's easy to follow when you think if it in a bunch of smaller pieces working together. As for the resize utility, you should have no problems using it, it's very simple.

Collectives™ on Stack Overflow

Javascript/html - File upload

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related