How to implement gmail like file upload/attachment using HTML 5 - javascript

I remember some options where Ajax like(No post back world) file upload was supported,
Hidden iframe
Using flash object (Though i still have curiosity of why SWF is used ? and what advantages it offer ?)
However by looking at blogs it appears that HTML 5 is promising, i tried some small examples and it really works :)
But recently i found that gmail has new drap drop file feature implemented using the HTML 5 (No flash).
Can some one guide me how this can be achieved and what all i need to prepare ? Is there change in XMLHTTP...(Ajax object) api in HTML 5 ?
Any threads will be helpful
thanks all,

I could be wrong, but I think the only help that HTML5 gives for such an upload-pattern is that it supports the attribute 'multiple' for upload fields.
This allows you to select multiple files from the file-chooser dialog without using flash
.
The uploading itself still has to be done by JS or PHP or [yourfavorite]. A nice helper could be
http://code.google.com/p/jquery-html5-upload/
for example.

Related

Async file upload in IE 9 and 10 only

Objective
I am creating a web application and have been looking for an async file upload solution other than iframe and form support.
Browser Support
I am fully willing to exclude everything but IE9+. IE tends to be the browser I have the most trouble with.
Goal
I have a table and I want to be able to click on a link, show a file dialog and then upload the file immediately after selection. No page refresh.
More specifically I am trying to figure out how Trello does their file uploads. After looking through the javascript, I found that they bind the the file input to an on change listener, but after that I can't see what they are doing. Im under the impression that they use websockets with node.js to transfer data, but after doing a little research, most people say that websockets wouldn't be good for that. Trello blocks all versions of IE except 9 and 10 so I looked into HTML5 File upload think that may be a solution. However, after some research IE9 does not support the HTML5 File API.
Question
So finally I am looking for some way to upload files without the iframe and form solution. Can someone list the possible methods I could use?
Sidenote
I am using Rails for backend and Ember.js for front end.
If the browser does not support the File API and XMLHttpRequest level 2, there is no other way to upload files in an async/"ajaxy" manner other than reverting to the hidden iframe method. You could, of course, use Flash or Java, but neither of those (especially Java) seem like a good solution to me.
Regardless of the browser, you will have to include a file input element on the page if you want to provide a file chooser for the user. The onchange listener you speak of is vital to determining when the user has actually selected a file or files. In browsers that support the File API, you can also allow users to drop files they wish to upload onto your page. This behavior alone does not require a file input element.
IE9 and older do not support the File API.
I'm quite familiar with this territory as I maintain a fairly popular javascript-only upload library: Fine Uploader.

Multiple file upload (client side)

I'm looking for multiple file upload component with alternative ways.
I need HTML5, Flash and normal upload support, depended by device.
I don't like FancyUpload, because it uses mootools and mootools is very big library.
Also I can't use jQuery, because I'm writing on Ext js and it's not good idea to use two big library like jQuery and Ext js.
I can write it myself but I don't have a time.
If everyone knows any library like this, please post link here.
Thanks!
I am a big fan of Plupload
Here is an example of all run times supported (Flash, HTML4, HTML5, etc...): http://www.plupload.com/example_all_runtimes.php
You can also include only the run times you want.
Here is an ExtJS 4 wrapper I wrote for SWFUpload: https://github.com/JarvusInnovations/Ext.ux.SWFUpload
I'm interested in having a more robust ExtJS4 upload widget though that supports HTML5 and normal form upload too. Maybe we can build one if nothing else turns up.

Web Based WYSIWYG Editor with Photo Upload support

Does anyone know what my options are for Web-based WYSIWYG editors (the type which acts like a textarea but produces HTML) are?
I need one with support for image uploads - This would be for a basic CMS that I am developing which needs to be fairly user-friendly. I can handle the server-side upload processing, but I need an upload option to be there.
A combination of CKEditor and CKFinder may have been ideal, but CKEditor seems to have been commercialised - I'm looking for something which is free/open source.
I think that this post belongs here... It was a tossup between stackoverflow and webmasters. Sorry if I'm wrong!
I use TinyMCE and there are several upload plugins that you can use with it, including these here.

Javascript(or maybe not) text editor with Image Upload functionality

I'm working in Ruby On Rails 2.3.8 and I need to use a text editor in which I could upload images.
Currently, I'm using TinyMCE, but doesn't have that feature. So, I've tried the TinyFCK, but I could not make it work (it uses PHP, so I'm not sure whether it will work or not in ruby on rails).
Does anybody know any?
Here a TinyMCE Rails version with Image Uploading.
So you've tried ckeditor? It's Javascript, not PHP. Some of the upload examples show PHP scripts to handle the browsing and uploading of images on the server but there's nothing to stop you creating these with Ruby.
You might want to have a look at TinyFCK or other plugins described and evaluated here.

file upload using ajax

I am looking for an AJAX method that can be used to file upload.
It will be super if I find a function that uses Prototype + Script.acul.us
File uploads are not possible using pure Ajax, because Javascript can't get direct access to the local file.
Tools like the jQuery form plugin work around this by generating an invisible iframe on the fly, and submitting to that.
There probably is a Prototype based, or framework independent solution for this as well.
there is no native ajax support for this, however Uploadify does a workaround using flash (uses jquery but is able to be used with other api's since 2.0)
http://teamco-anthill.blogspot.com/2009/01/ajax-progress-indicator-with-prototype.html
?
As others have pointed out, javascript is not able to asynchronously upload files (otherwise javascript enabled sites could steal any file off your harddrive). The best approaches are:
A flash uploader, as already suggested
Or simulate an Ajax request using an iframe
The iframe approach means that it's the iframe which reloads, instead of the page displayed to your users, so that to the end user, the experience looks as if it's Ajax.
If you're using rails, which I gather you might be due to using prototype and scriptaculous, there's a plugin available which handles the tricky bits of this approach for you called responds_to_parent, It's been ages since I implemented this in a rails app myself, but step 6 from this blog looks like a good example of how to use it.

Categories