Multiple File Select in IE9 and Passing FileReference Data to Javascript - javascript

So, Ive created a HTML5 XHR multi file uploader using javascript and jquery. Now I want to be able to offer a flash based fall back for browsers who only allow the selection of one file at a time (like Internet Explorer).
My question is, can I get flash to pass any of the raw file data over to javascript?
If I cannot get at the raw file data through an External Interface call, is there anyway I can give javascript enough information from flash for it to get the file data itself?
Failing all of this, what is the best way of offering multiple file selection in IE9?
TIA.

You should be able to pass ByteArray through ExternalInterface.
See http://ria.dzone.com/articles/javascript-flash

Related

Writing data to a local file using HTML5 and Javascript in Chrome

I have created an interactive quiz using html and javascript which will be run on a touchscreen at an event and I need to write the results to a local csv file (so no internet connection). It needs to write to an already existing file, so it cannot be done where the data is stored locally and a download link is generated through the browser.
How would I go about doing this? All methods I have found are either unreliable or no longer supported. The browser I am using is Chrome, so it does not need to be cross-browser compatible.
Can anybody help or point me in the right direction please?
Install a web server.
Point the browser at http://localhost.
Send the data to the server using Ajax or a form submission.
Process the data (including storing it in a file) using the server side language of your choice.
When javascript is used only in the client-side cannot write data as you want.
Follow the #Quentin recommendation about install some web server, as apache using php for instance(It is pretty straight forward!). I also recommend you to create restFull methods to do it with jquery calls from the client side, it is easy to find many examples in the internet and quicky...
If you want something more easy you could work with html post using forms in php, the most easy way to do it.

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.

Allow user to import a file from a Greasemonkey script?

From what I can gather this does not even seem possible but here goes:
I am finishing up a Greasemonkey script. In this script the end user is able to save certain things to an html5 localStorage variable (not the purpose of the script, only for one part of it).
Since a cache clear can wipe these storage values I have created an export feature which is simply an unknown datatype which forces a download of the file.
data:something;charset=utf-8,'+encodeURIComponent(somevariable)
My question is on creating an import feature. Since the file saves with no extension and this script will be used exclusively in Linux, opening the file directly in a text program and pasting the data into a textarea would be an easy way to import.
However, is there any way without some sort of server-side scripting or external server to let the user choose a file to import?
Such as a dialog box that allows the end-user to select the file from the computer in which I can then manipulate from my end?
HTML5 introduces the HTML5 File API
Using the File API, which was added to the DOM in HTML5, it's now possible for web content to ask the user to select local files, then read the contents of those files. This selection can be done by either using an HTML element, or by drag and drop.
You can hook on change events and check evt.target.files;
Also, you can use Blobs to handle your data, you don't have to rely on data uris.
Here is a good tutorial about it
HTML 5 File API to the rescue!
http://www.html5rocks.com/en/tutorials/file/dndfiles/
Not supported in IE9, but most modern browser do support it :
http://caniuse.com/#search=file%20api

In-browser conversion of MS Word document to PDF

I would like to implement an in-browser Microsoft Word document merge feature that will convert the merged document into PDF and offer it to the user for download. I would like to this process to be supported in Google Chrome and Firefox. Here is how I would like it to work:
Client-side JavaScript obtains the Word template document in docx format, either from a server, or by asking the user for a file upload (which it can then read using the FileReader API)
The JavaScript uses its local data structures (e.g., data lists it has obtained via Ajax) to expand the template into a document. It can do this either directly, by unzipping the docx file and processing its contents, or using DOCx.js. The template expansion is just a matter of substituting template variables with values obtained from the local data structures.
The JavaScript then converts the expanded template into PDF.
The JavaScript offers the PDF file to the user for download, e.g., using Downloadify.
The difficulty I am having is in step 3. My understanding (based on all the Googling I have done so far) is that I have the following options:
Require that the local machine is a Windows machine, and invoke Word on it, to convert to PDF. This can be done using a little bit of scripting using WScript.shell, and it looks doable with Internet Explorer. But based on what I have read, it doesn't look like I can call WScript.shell from within either Chrome or Firefox, because of their security constraints.
I am open to trying Silverlight to do the conversion, but I have not found enough documentation on how to do this. Ideally, if I used Silverlight, I would like to write the Silverlight code in JavaScript, because (a) I don't know much CSharp, and (b) I think it would be much easier in JavaScript.
Create a web service that will convert a given docx file to a pdf file, and invoke that service via Ajax. I would rather not do this, if possible, for a few reasons: (a) I tried using docx4java (I am a reasonably skilled Java programmer) but the conversion process is far too slow, and it does not preserve document content very well; and (b) I would like to avoid a call out to the network, to avoid security issues. It does seem possible to write a little service on a Windows server for doing the conversion, and if there is no other good option, I might go that route.
If I have been unclear about anything, please let me know. I would appreciate your ideas and feedback.
I love command line tools.
Load the doc to your server and use LibreOffice to convert it to PDF via the command line
soffice.exe --headless --convert-to pdf --outdir E:\Docs\Out E:\Docs\In\a.doc
You can display a progress bar to the user and when complete give them the option to download the doc.
More info on LibreOffice's command line parameters go here
Done.
Old old question now, but for anyone who stumbles across this, web assembly (wasm) now makes this sort of approach possible.
We've just released https://www.npmjs.com/package/#nativedocuments/docx-wasm which can perform the conversion locally.

How to use the HTML5 file API to read a pre-specified file?

All the tutorials for the HTML5 file API talk about getting the FileList from a text box. I already have the name of the file (e.g. foo.json), I can't figure out how to read a file given a file name.
This is not for a web app. I'm producing some data in JSON format, and I'd like to format it using Javascript, essentially producing some interactive bar charts. Much in the way that XML can be formatted with XSLT, I want to distribute a JSON file along with some JavaScript code, and when someone clicks the JavaScript file, they have a simple interactive exploration of the data.
So my first problem is to read the JSON file from Javascript. Note that there's no webserver involved.
The short answer is "You can't". It's a security issue; if you find a way please submit a bug report to the browser bug-tracker. Its not even possible to pre-fill the dialog with a filename.
However, for your specific usecase; there doesn't seem to be a need to read a separate file at all. Just include the data as a literal in your JavaScript code.

Categories