I'm using Ruby on Rails 3 deployed at heroku. Now I have working fine a multiple image attachment using paperclip and amazon s3 for storage. But, when I submit the form, I have to wait too long time. For this reason I would upload the images asynchronously, using Ajax. Any example or tip? Thanks!
UPDATE: There is something that I don't understand. When you are filling the form of Post (for example) that have a multiple image attachment, the Post isn't created until you submit the form, then it don't have an ID. The Images belongs_to Post througt the post_id, then: How the plugin Jquery Uploader or Uploadify can save the images asyncronaly?
Asynchronous file uploading (with progress indication) via XMLHttpRequest isn't yet supported by all browsers, but the best jQuery plugin I've come across to do it is jQuery-File-Upload (demo here). It works with Chrome, Safari, Firefox, Opera, and MSIE, although MSIE doesn't yet have support for progress indication, unfortunately. The uploader is for all file types by default, but you can limit it to images.
Hopefully in future all browsers will be able to do this via AJAX, though at the moment you'll have to use Flash for completely cross-browser support.
I made the paperclip_upload gem. With this gem you can:
Upload your file to an endpoint POST /api/uploads for example. This will return an identifier like this: { "identifier": "9j3gp54p" }
You can repeat step 1 all you want (using ajax, as you said in 2011 :P)
You can send all the upload_identifiers in a lighter POST to /api/attachments for example. The gem will do the rest...
Check the README
Related
I have an application that allows users to upload files. Some of these files may be quite large. Because of this, I want to chunk up the file (if possible) and monitor its upload progress. Currently, I have a basic HTML form that posts back to my MVC controller
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UploadFile(IEnumerable<HttpPostedFileBase> files)
{
// Save file here.
HttpStatusCodeResult result = new HttpStatusCodeResult(200);
return result;
}
This approach allows me to upload a file. However, this appoach is one single opeation. I need to be able to kick off an upload and monitor its progress. Uploadify will not work in my case because it uses Flash. I have a strict No-Flash requirement.
I'm open to a hybrid approach where, if the user's browser supports HTML 5, I would use the File API, otherwise, I would use my current approach. However, even with HTML 5, I'm not sure how to kick off an upload and monitor its progress.
Can someone help me out?
Thanks!
I've had a good experience with Plupload. It plays nice with jQuery UI as well.
Here are some higlighted features:
Chunking
Drag/Drop
PNG Resize
JPEG Resize
Type filtering
Stream upload
Multipart upload
File size restriction
Upload progress
Custom headers
It supports the following plugins/technologies for near complete cross browser usage (with varying degrees of feature support):
Flash
Gears
HTML 5
Silverlight
BrowserPlus
HTML 4
You may take a look at Valums AJAX upload. Personally I have used it many times and am very satisfied with it.
Features
multiple file select, progress-bar in FF, Chrome, Safari
drag-and-drop file select in FF, Chrome
uploads are cancellable
no external dependencies
doesn't use Flash
fully working with https
keyboard support in FF, Chrome, Safari
tested in IE7,8; Firefox 3,3.6,4; Safari4,5; Chrome; Opera10.60;
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?
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!):
I hope this helps.
Hristo
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.
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.
Uploadify does that trick > http://www.uploadify.com/
All samples are php but you should be able to convert it to your platform.
I know how to POST/GET text values with ajax,
but never know how to upload files with ajax.
Can someone just give a simple demo here?
GMail is actually using Flash for uploading files now... You could try looking into something like SWFUpload.
Ajax could certainly upload files by posting a HTML form with a input type="file" in it.
Some links to get you started:
http://www.webtoolkit.info/ajax-file-upload.html
http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html
Depending on the server/server side language you could probably send some kind of progress info to the client to render as a progress bar.
Check out this Ajax upload scripts, it has examples in Php and .Net. The basic idea behind the script is that you have to create an iFrame to handle this.
The YUI uploader is a flash based uploader that is designed to be very easy to integrate into javascript, with minimal knowledge of flash.
If you want a progress bar, I believe a pure javascript solution would require a server side piece to send back the current completion percentage via ajax, which would add quite a bit of complexity compared to a flash solution.
I recently came across http://chromeexperiments.com/. I found a couple of projects there that are quite intriguing: 100 Tweets and twitterbrowse (I'd post links to them but I'm not yet allowed). These both work fine for me in Firefox 3.5 under Ubuntu 9.04. The thing that I find particularly peculiar is the fact that these two "experiments" seem to issue Ajax requests to other domains than the ones they are hosted on (to twitter.com, more exactly). I have tried the same thing on an HTML5 page (using <!DOCTYPE html>), but I can't get it to work.
I'm using MooTools to create the requests, but that shouldn't be a problem, it's still Ajax, right?
Any idea how those sites are doing this?
XMLHttpRequest Level 2 allows for cross-domain AJAX. Read more about it here.
Have a look at http://snook.ca/archives/javascript/cross_domain_aj/
I personnaly was able to do this using the JSON method on a personal project where I had to receive ajax response from a different domain's server.
They aren't using HTML5 for the ajax request, they're using JSONP which is essentially a getter for JSON, but can be made across any domain
I need to create a portable script to give to others to implement on their websites that will dynamically show content from my database (MySQL).
I know AJAX has a cross-site problem, but it seems that Google's ad's somehow manage the effect in a cross-browser / cross-site fashion.
Knowing that I have to give people a simple cut/paste snippet to put in their website...how can I achieve this? How did Google?
They use an <iframe>, so the ad is served from their server, and can talk to their database. I'm not actually sure that they use any sort of AJAX from their ads, though; they appear to just be mostly static content, with a few scripts for tweaking the formatting (which are optional, since they want their ads to be visible even if users have JS turned off).
Remember, you can always look into this on your own, and see what they did. On Firefox, use Firebug to explore the html, css, and scripts on a site. On WebKit based browsers (Safari, Chrome, and others), you can use the Web Inspector.
Google's ad code is loaded via a script tag that calls a remote javascript file. The AJAX restrictions that are generally enforced with xmlhttp, iframe, and similar AJAX requests don't apply when it comes to loading remote javascript files.
Once you've loaded the javascript file, you can create iframes in your page that link back to the actual hosted content on your server (and feed them any data about the current page that you wish).
jQuery has built in support for jsonp in their ajax calls. You may want to lookin in to using that if you are really needing to use ajax.
http://api.jquery.com/
http://docs.jquery.com/Ajax
You don't need iFrames and you don't need AJAX. It's really, really simple!
You pull in a remote JS file that is actually a constructed file from php/asp/whatever. In your JS file you have a document.write script that writes the content. It's that simple.
We do this all the time with media stored on separate sites. Here's an example.
YOUR SERVER: file.php (which outputs js)
<script>
document.write("I'm on a remote server");
</script>
OTHER SITE:
<script src='http://www.yourserver.com/file.php'></script>
And it will output the content generated by the script. To make the content customized you can put in script vars above the script call that will adjust what your file pulls out. From there it's pretty straightforward.
I realize this question is a year old, but I've written a library that can help with the document.write part of the problem (whether this is a TOS violation, I don't know) writeCapture.js. It's pretty simple:
$('#ads').writeCapture().html('<script src="whatever-your-adsense-code-is"> </script>');
The example uses jQuery, but you can use it standalone as well.