Everything Looks Cool but...

[tayhaithian]

I just downloaded and everything works fine except it doesn't show like what is in your demo, for example after upload an image it shows the pic and we actually able to delete it via the delete icon. How can I do so?

[blueimp]

The server-side of the demo is written in Python on Google App Engine. With App Engine, adding a thumbnail picture for uploaded files is very easy thanks to the get_serving_url method of the Images API. You basically just add a special link to the uploaded file with the thumbnail size as parameter.

For most projects you will want to implement the server-side file handling with your own code. That's why there is only a very simple PHP upload script included in the example and no file deletion method provided.

I will add some documentation sometime in the future on how the demo is set up and how you can implement something similar. The demo uses the exact same jQuey File Upload plugin files with the addition of the jQuery Templates plugin and a slightly customized version of the jQuery Cookie plugin - all minified into one "application.js" JavaScript file with Google's Closure Compiler.

[tayhaithian]

Thanks for quick responding, but sadly I have zero knowledge on Python but think it wouldn't be hard for me to learn. Anyway may I request for sample codes on how to do it so I have much clearer path to go. Again thank you.

[blueimp]

Sure, I will definitely add some more sample codes as soon as I find the time.

You also don't need to learn Python, the jQuery File Upload plugin is compatible to whatever framework you want to use on the server-side. It's just a standard "multipart/form-data" upload. So I think I will add an advanced PHP example as well sometime in the future.

[bhellman1]

incredible work! would also be great to see a Rails 3 example. Curious to hear recommendations on image resizing w/o having to use papercip

[shereefb]

+1 for a Rails 3 example. Thanks for the great work.

[blueimp]

Example server-side implementations that would be nice to have:

• PHP, more advanced than the very limited included example.
• Rails (3), with or without including additional Gems like Paperclip.
• Google App Engine (Python) - an explanation of the demo implementation.
• Django.
• J2EE

However, as the scope of the plugin is definitely on the client-side, I don't think I will add any of these examples to the source-code repository. I honestly also don't know when I will find the time to add such examples myself, so I'm hoping for the community to jump in and provide some advanced usage examples and add documentation to the Wiki.

[blaenk]

I would love to have a rails 3 example with a paperclip back-end (as paperclip is probably the most popular gem for this).

[apneadiving]

Hi, I volunteer to make a Rails 3 tutorial with Paperclip and even cropping.

The only thing I need is a readable version of the script you use in your demo page. It runs so smoothly in all browsers :)

Indeed, I've tried to implement your script myself and it works great in chrome but fails in other browsers. In particular, I can't get the iframe version working.

[blaenk]

Hey Benjamin, I would, as I'm sure many others would, greatly appreciate a tutorial for rails 3 with paperclip. I'm currently trying to set it up myself. I'd be willing to donate for your efforts, probably won't be much, but to show my gratitude. If you don't know when you'll be able to do this, would you mind giving a quick rundown list of the things one must do, even if from a high level?

I look forward to your guide Benjamin, I'm sure it'll be very popular!

[apneadiving]

As I said, I need more info to make it work properly. I still don't really get how to update the iframe.

Whatever, I'll push my work here https://github.com/apneadiving/Pic-upload---Crop-in-Ajax

Feel free to contribute as well.

[blueimp]

Thanks, Benjamin (apneadiving).

Like I wrote above, the demo uses the exact same jQuey File Upload plugin files with the addition of the jQuery Templates plugin and a slightly customized version of the jQuery Cookie plugin - all minified into one "application.js" JavaScript file with Google's Closure Compiler.

Here is the code used to initialize the plugin on the demo page:

node.find('.upload').fileUploadUI({
    uploadTable: node.find('.upload_files'),
    downloadTable: node.find('.download_files'),
    buildUploadRow: function (files, index) {
        return $('#template_upload').tmpl(files[index], tmplHelper);
    },
    buildDownloadRow: function (data) {
        return $('#template_download').tmpl(data, tmplHelper);
    },
    beforeSend: function (event, files, index, xhr, handler, callBack) {
        if (files[index].size > settings.max_file_size) {
            setTimeout(function () {
                handler.removeNode(handler.uploadRow);
            }, 10000);
            return;
        }
        $.get('/file-upload/upload' + (xhr.upload ? '.json' : ''), function (data) {
            handler.url = data.replace(/http(s)?:\/\/[^\/]+/, '');
            callBack();
        });
    }
});

[blueimp]

And for those who are interested, here's the un-minified version of the application script of the demo page (including the jQuery File Upload plugin initialization posted above): http://aquantum-demo.appspot.com/static/js/application.js?v=1.348155646623093894

[apneadiving]

I happened to delete my post: big fingers on iphone screen could be lethal.

To sum up: thanks so much for the details you provided. I understand your code much better. I've made a fonctionnal Rails 3 app available here as an example: https://github.com/apneadiving/Pic-upload---Crop-in-Ajax

Hope this will help.

Thanks again @blueimp ;)

[blueimp]

Thanks for your example rails code. If you find the time, please add a page to the Wiki explaining which steps to take to get the plugin running with Rails.

[apneadiving]

Job's done :)

[blueimp]

Great! Thanks again. :)

[rikkert]

blueimp: the link to your un-minified application was enlightening. I think it would be great to have it in the example folder. Pretty much the same file, without the downloading and removing of files.

[vamsiikrishna]

Hi, can you please tell me , whats the way to display the thumbnail upon upload ? I can manage the thumbnail generation part ... thanks :)

[blueimp]

To display thumbnails before uploading, just add a node with class _file_uploadpreview to your upload row, as shown in How to queue files and start uploads with a button click - this will only work in browsers supporting the File API (not IE nor Opera).

To display thumbnails after uploading), just add an image element to your downloadRow pointing to a server-side created thumbnail. How the demo thumbnails are created is explained here: Demo implementation.

[rikkert]

The HTML element with class="file_upload_preview" will get the image appended. Don't forget to include something like: .file_upload_preview img{width:80px;} to actually get a thumbnail sized image.

[vamsiikrishna]

wow.. thanks :D

Edit : Added code sample for codeigniter . https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-use-the-plugin-with-CodeIgniter-

[blueimp]

Thanks.
I've adjusted your example and added your code snippets directly to the Wiki.

[xnightrex]

just some information to the author of this post, in case if you're still interested in how to delete the uploaded files. you need to first scan the directory in which your files were uploaded to, and make a loop to populate a list of files in it with hyperlinks/buttons/whatever you like so that when the user on-clicks the thing, it calls the function to delete the selected file. functions that you will be using: scandir("your_directory"); unlink("path_of_the_file"); do visit php.net for more information =)

[blueimp]

I just committed a new version that also adds a more advanced PHP-based example on how to use the plugin on server-side. It allows uploading and deleting files based on their filenames, makes use of a single directory and supports resuming previous upload sessions. It might be a good start for someone looking for a PHP-based solution, which works well with the jQuery File Upload Plugin. It's modeled after a REST-style architecture but doesn't pose any restrictions on the uploaded content. It's only a starting point for a complete Uploads Manager.