Skip to main content

Best non-flash upload component for web applications?



I would like recommendations for upload scripts/components. My criteria:





  • No flash



  • Plain Javascript ok, jquery ok



  • Must provide progress bar (updated from for instance ajax call).







Probably isn't relevant, but I use ASP.NET MVC on server side.





Thanks





UPDATE Yes, I know there will need to be a server side component to this, but I can provide that. I'm more interested in the client side scripts. (Perhaps some solutions will be tied to their server side implimentations though - I don't know)





Just to clarify - it doesn't have to be .net specific. I'm happy to use a component that only comes with (for instance) PHP server side scripts, and roll my own for .net.








Thanks for all the answers - some very useful info there. In the end I accepted the 'AJAX uploader' - It didn't meet the progress bar requirement, but it seems that nothing might (at least without flash). I think I will also look into the possibililty of creating my own, based on some of the info here - will post back if I have any luck.



Source: Tips4all

Comments

  1. Ajax Uploader We use this and it's pretty good, worth a try anyway.

    Edit: For some reason I thought we used Uploadify, turns out it was this.

    ReplyDelete
  2. We've played around with this some for an internal project, and I don't think your criteria of a non-Flash progress display can be met. The reason Flash-based uploaders are so popular is that JavaScript is incredibly restricted on client-side web browsers: for security reasons, JavaScript can't access any files on the client's hard drive (so no checking file length before uploading and no reading chunks of the file itself to upload), it's very restricted in how much it can manipulate <input type='file'> controls (since otherwise it could select and upload files itself without the user's knowledge), and it can only upload the file as an all-or-nothing POST'ed form submission (so no progress reports).

    Even if you could work out these client-side problems, as far as I know, any generic web server is going to wait until it's received the entire POST'ed file upload before passing it on to the server-side web app, so there's no opportunity for a server-side component to update status as it receives each chunk.

    It looks like something like AJAX Upload is the best you can do.

    ReplyDelete
  3. The server-side technology is very relevant for what you are trying to do. Server interaction is necessary for such kind of things.

    I don't know of any ready made component, but this article could be helpful.

    Based on your update it seems that you are looking for a client component bound to a specific server technology and feel confident that you can easily convert this to .NET. In my opinion this won't be easy. To implement the progress bar thing you need a file upload listener. In Java, I had luck doing something similar using Apache Commons FileUpload and by implementing the ProgressListener interface. Basically I have followed the instructions on this article. Besides the progress listener, I needed to implement a servlet that returned the current percentage of the upload and at the client side use a progress bar jQuery plug-in, which I regularly updated by Ajax calling the percentage servlet. These are the easy bits. As I've commented, you can easily implement them yourself in no time.

    The hard part is the progress listening and this is very much different, depending on the server technology. So I recommend that you start from there. Find out how you can listen to the progress of a file uploaded using ASP.Net MVC. The article linked above is a good starting point.

    ReplyDelete
  4. The flash upload components in most JavaScript implementations are there because they provide a greater amount of information about the file and it's upload. which allows you to continually provide and event framework for progress bars. the most popular is of course http://swfupload.org/

    Flash has access to the file information before the upload actually begins. using a pure JavaScript solution you only have access to the length of the file stream on the server until the whole file has been received in full and saved to the server hard drive.

    The following very old classic ASP script provides a file that your javascript could poll which would siply contain the percentage of the completed upload received on the server so far.

    http://www.freeaspupload.net/

    it's not classy it just does a good job of what it does. I haven't seen a more modern .net version yet.

    ReplyDelete
  5. Use PHP's APC module to be able to get progress for the upload. Here's a decent article on how to set this up.

    http://www.haughin.com/2007/10/23/php-upload-progress-with-php-52-apc/

    Obviously this requires PHP, but if that is possible for you, then you are all set.

    ReplyDelete
  6. Try AsyncFileUpload for asp.net web applications.

    ReplyDelete
  7. You didn't mention a price requirement at all, so I'll throw the Telerik control out there. I've used it and it was pretty easy to implement. They have a server-side and client-side API, progress bars, client-side validation, and is Ajax enabled.

    Demo site:
    http://demos.telerik.com/aspnet-ajax/upload/examples/overview/defaultcs.aspx

    ReplyDelete
  8. I don't think that there is a component that matches your requirements, because as far as I know, every solution that provides a progress bar is flash based. ;)

    But, like TWith2Sugars I've used AjaxUpload, and it works beatifully, but no progress bar.

    ReplyDelete

Post a Comment

Popular posts from this blog

[韓日関係] 首相含む大幅な内閣改造の可能性…早ければ来月10日ごろ=韓国

div not scrolling properly with slimScroll plugin

I am using the slimScroll plugin for jQuery by Piotr Rochala Which is a great plugin for nice scrollbars on most browsers but I am stuck because I am using it for a chat box and whenever the user appends new text to the boxit does scroll using the .scrollTop() method however the plugin's scrollbar doesnt scroll with it and when the user wants to look though the chat history it will start scrolling from near the top. I have made a quick demo of my situation http://jsfiddle.net/DY9CT/2/ Does anyone know how to solve this problem?

Why does this javascript based printing cause Safari to refresh the page?

The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex