I have implemented an AJAX file uploader in HTML5 using xHR2 and File api for an internal project. We were only required to support Firefox/Safari/Chrome. I used the following links as a reference
http://www.html5rocks.com/en/tutorials/file/xhr2/
http://www.html5rocks.com/en/tutorials/dnd/basics/
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
Now I am required to support Internet Explorer 10 and below. IE 10 supports XHR2 but File API support is lacking. Is there a way to detect that these APIs are not supported? If I can detect that the APIs are not supported, then how do I implement AJAX file upload for IE?
I am using Google Closure JS library not jQuery or any other library. The choice of library cannot be changed. Please use jQuery or some ones to that effect in the response. However, any code snippets that use jQuery are perfectly alright.
probably the easiest way to detect if the File API exists is to
typeof File
In a browser that supports the File API it should return an object or function - Internet Explorer returns undefined
as far as how to fallback and make it work for all users
I've used this tool https://github.com/valums/ajax-upload that creates an iframe and posts the upload to the iframe and emulates an AJAX file upload - its all pure javascript no libraries required and supports all the way back to IE6
Recently I've been working on a file uploader to be used together with google closure library. I found the fine-uploader library a good start. It's not written with the closure library, but it provides me the basic guidelines: uses xhr to upload a file if supported, otherwise fallback to form post into a hidden iframe.
In my code, I implemented two classes: one uses a XMLHttpRequest to upload a file, and the other use goog.net.IframeIo's sendFromForm method to upload a file.
Take a look at the goog.net.iframeIo class in the Google Closure Library. This will take a file input element from a form and post it to an iFrame, giving the equivalent of an AJAX experience, even if it isn't in an actual XHR.
Here's a link to Google's documentation on how to implement it:
https://code.google.com/p/closure-library/source/browse/closure/goog/net/iframeio.js#48
Related
I have a feature that allows my client to design his own personal portal, I would like to allow my user to preview a picture from his computer prior to uploading it to the server.
is it possible?.
No docs, and no result on Google, if anyone wonders why am I asking such an allegedly stupid question.
IMPORTANT: I am using this library since it has support for some deprecated browsers such as IE 8-9, hence I need a solution that can work without file API, or a good reliable file API fallback for old IE versions.
Can anyone help me as i am stuck in creating a file(temporary) with extension(say .csv) in the local disk, i tried using ActiveX object but it works fine only in internet explorer,got a error when i tried with other browsers. By googling i got to know ActiveX works only in IE so it produces error when its tried in different browser.
var fso, f1;
fso = new ActiveXObject("Scripting.FileSystemObject");
f1 = fso.GetFile("c:\\test.txt");
alert(f1);
Can anyone suggest me with the alternative which can be very useful to.
The problem you have is that browser implementations of ECMAScript (JavaScript) don't allow you to write to the clients' disk. Microsoft reverse-engineered JavaScript, and dubbed it JScript. Though the base is the same, MS added those ActiveX objects, and a compiler (JScript can be compiled, yes).
In short, JScript can be used for more than just browser tasks, so MS provided ActiveX objects to enable some form of I/O. The only thing you can do on browsers other than IE, is using HTML5's new DOM Storage objects. Teemu provided a link to the documentation for that
The other posts cover all the information about storing to the local machine using Html 5 so I won't go into any more detail about that but this is only going to work on Html 5 compatible browsers (although most browsers are Html 5 compatible now, I don't know your project requirements).
Another alternative would be to create / save the file using server side code (ASP.NET, PHP etc) and then provide a link to the user so they can download the file. You can still save this as a .csv file so that the user can open it in Excel after they have downloaded it.
Edit:
What I would do is change your web service so that it saves the file to disc (more info: here). Then instead of returning the file from the web service, return the Url to download it instead. You can then redirect the user to that link using JS.
I'm working on a Chrome Extension: when you drag an image, it will be saved to your computer.
I learned that in HTML5 there is FileWriter API, but really can't find any example of it, and does Chrome support it?
No, there isn't a FileWriter API in HTML5. What you probably mean is the File API that allows you to read files. And in Chrome even extensions aren't allowed to write files, for reasons of security. So unless you want to bundle an NPAPI plugin with your extension (which would trigger a huge warning upon installation) all you can do is trigger a download message that the user might choose to accept - or not. See Cross-browser Save As .txt for a possible approach (Flash objects like Downloadify being the other).
Edit: I was wrong, there is a FileWriter API proposal. It is very far from being done however.
I found this. http://www.html5rocks.com/en/tutorials/file/filesystem/
You can find some examples.
Edit This is screenshot from the article. I'm using chrome 12.0
FileWriter API browser support message http://s3.amazonaws.com/twitpic/photos/full/329503613.png?AWSAccessKeyId=AKIAJF3XCCKACR3QDMOA&Expires=1308932374&Signature=DXBdFSjbNqaeJPr%2F0fSAqPWyh2E%3D
I don't think the FileWriter API will be ready and usable for some time yet.
You could get the image data in hex, then use a DataURI to 'export' it from the browser. Although this leads to a file saved with a filename such as "download(1)". Each browser seems to have different size limitations for DataURIs, and they're not big, although ahould be fine for a reasonably sized image.
http://en.wikipedia.org/wiki/Data_URI_scheme
Alternatively you could use a Downloadify to save it with a proper filename (Requires flash and may be tricky to embed into the chrome extension).
http://davidwalsh.name/downloadify
I'm busy experimenting with TiddlyWiki and trying to get it to run on my Nokia E51, which uses S60v3. The browser is based on webkit, which should mean that I'd be able to get it to work, but no luck so far.
Does anyone have any experience with saving files locally on this platform?
I skimmed through the source of TiddlyWiki. For its file operations it is using the jQuery.twFile plugin which in turn uses a custom Java applet on Webkit-based browsers. The S60 browser does not support java applets so I'm afraid you're out of luck.
I may be wrong here but a quick look at the widget training course on forum Nokia makes it seem like file system access from JavaScript isn't available on S60.
http://www.forum.nokia.com/Tools_Docs_and_Code/Documentation/Web_Technologies/
It really look like you're supposed to retrieve persistent data from the network.
I would hope the web browser cache allows you to query remote data several times while only transfering it once.
On my E51 I am able do download files the old-fashion way: A simple link to a file with a fitting mimetype.
I don't want to use jQuery, but I'd like to use Ajax to do file uploading. Is that possible?
If so, where can I find information/tutorial on it?
No, it isn't possible to do this with javascript.
In order to give the 'AJAX' feel, however, you can submit a form to a hidden iframe and output the script results to it, then process from there. Google ajax iframe upload and get started from there.
If you are using jQuery, there is also the Form plugin which will automatically create this iframe for you if your form has any file fields in it. I haven't used it to do this, but I've heard good things.
As pointed out in the comments, you can also use something like the very popular SWFUpload to accomplish the desired effect with Flash.
Incase anyone is finding this question much later: yes this is possible with JavaScript now.
HTML5 defined 2 new APIs that you use together to accomplish this: Drag and Drop API and the File API. You can use jQuery to interact with the APIs effectively letting people drag and drop files for upload.
Here is a tutorial on how to do it.
The code currently works in Chrome 6+ and Firefox 3.6+, Safari 6 and IE 10. If you need Safari 5 support, the code stays almost exactly the same but you use the FormData object instead for the uploaded file list (more information in the post).
Opera supports the File API as of 11, but not the DnD API, the drop operation does not initiate the upload, but they support you getting access to the file with the API. I imagine in 12 they will finish off support for DnD API.
01-20-14 Update: All the major browsers implement all the standard APIs now so this tutorial works in all browsers.
i use swfupload for multiple ajax-like uploads (its javascript/flash based)
Here's a bit of detail about how gmail does it, using an iframe:
http://www.sajithmr.com/upload-files-like-gmail/
Assuming you are using Java, DWR version 3.0 (currently in RC1) has support for binary file upload/download, which makes the problem trivially easy. I have not had a chance to try this out yet but we use DWR extensively with total success; it is a great Ajax toolkit.
http://directwebremoting.org/blog/joe/2008/12/16/dwr_version_3_0_release_candidate_1.html
Strictly speaking there are possibilities to do real AJAX file uploads, but this is only possible in Firefox 3+, Safari 4 and Chrome 2. In all other browsers you must use a workaround like the iframe technique or a Flash based uploader.
Haven't used it personally, but Ajax Uploader is a component I recently came across which says it can do file uploads inside an UpdatePanel (assuming you're using ASP.NET).