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;
Related
So I've been looking for a solution to implement in my site that allows for multiple files and large files (>2 GBs) to be uploaded, without using any plug-ins, desktop clients, etc. I also have a requirement to support browsers as far back as IE 7. FineUploader seems to fit the bill perfectly, but one aspect I have been trying to figure out is how it uses iframe to support non-HTML5 browsers? Is it basically serving up HTML content, so it still allows users to upload files, but with legacy limitations (one file at a time, not able to read file size prior to upload, etc.)? What functionality of FineUploader do I lose in non-HTML5 browsers?
Thanks,
Stas
I'm the maintainer of Fine Uploader and I will provide an answer to your questions.
For browsers that do not support the File API (IE9 and older, Android 2.3.x) Fine Uploader must rely on a commonly known "trick" to allow for "ajax" uploading. In these browsers, you must submit a form containing a file input element (one for each file). Fine Uploader creates a hidden iframe containing a form and a file input for the associated file. A separate iframe is created for each selected file. Fine Uploader then submits the form when it comes time to upload the associated file or files. The response text from the server is loaded into this iframe when the server response is received, and the library parses this response (which must be a valid JSON response, regardless of the browser).
The following limitations are in place on non-File API browsers:
You can only select one file at a time (one per "choose a file" dialog). This is due to the fact that none of these browsers do not support the multiple attribute on file input elements.
Dragging and dropping of files is not supported. This feature depends on File API support.
Progress bars do not appear, as there is no easy way to determine the upload progress of a file in browsers that do not support the File API. There may be efforts in the future to allow for progress calculation, such as a documented convention that results in periodic GET requests to check the progress, or support for the UploadProgress module in nginx or apache.
Client-side file size information is not available. So, any features related to or dependent on file size are not enabled. This information is simply not available unless the browser supports the File API.
Chunking and auto-resume features are not enabled since this explicitly depend on File API support.
Luckily, all "modern" browsers, including IE10, support the File API.
Hope this helps.
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
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've got an app on Google App Engine that will accept image uploads from users. The problem that I envision is that users will upload these images directly from their cameras, and file sizes are often greater than 1MB, which is the limit for the image API (which would be used to resize the images).
What's the best way to accept the upload of say a 1.5MB image file, and resize it to under 1MB?
While this is not clear in the App Engine documentation, this is possible by using a combination of the Blobstore and the Image Manipulation Service.
You must:
Upload the Image into the Blobstore
Retrieve the Image from the Blobstore
Perform the Image Manipulation with an Image resulting in less than 1mb in size
I've written up a post about this -> http://socialappdev.com/uploading-and-re-sizing-large-images-on-app-engine-11-2010.
Here are two (similar) ways to solve this:
If you want to keep everything controlled yourself, you can put a resize script on a server of yours, which takes the URL to the raw uploaded image (which can be up to 10MB due to HTTP response size limit, but you would have to store it as 1MB chunks in the datastore), downloads it from your application, resizes it, and then POSTs it back to your application. All this interaction would need some kind of authorization of course, so that it can't be abused. Alternatively, POST the image directly to your external server, but then you have to either send the other form data back to your application, or use a separate form for the image upload.
Use an external imaging service. I would recommend Picnik. See their API documentation. As you can see, it lets you make a form that posts the image directly to their servers, then the user can edit the image (and resize), then the image is posted back to your server. With this solution you have to upload the image in a separate form, since Picnik receives all your POST data.
I recommend point 2, because it doesn't require you to go around Google App Engine limitations and since your users are uploading images straight from the camera, they will probably want to do something with them anyways (such as crop.)
That's a conundrum. The "obvious" answer, using google.appengine.api.images.resize, won't work because it's too big. :) So you will have to use third-party software, either on the server (which will be tricky because of App Engine's limitations) or the cilent (e.g. a Java uploader).