Read local file content and send it to server using Javascript - javascript

I am writing a very simple Elearning application for my virtual class. I wander if there may be a way using Javascript that works on the background to read the content of a file located on the user's computer and send its content to my server. Any one knows an open source code of Javascript doing this ?
I think that this can be done using XMLHttpRequest, i.e. AJAX, but I could not graps my way through. Any help

You can't gain access to a local file in browser because you are in sandbox, but there are some File API for Html 5 that you can programmatically select them and access their data just have a look at the following link
File API
Web applications should have the ability to manipulate as wide as possible a range of user input, including files that a user may wish to upload to a remote server or manipulate inside a rich web application. This specification defines the basic representations for files, lists of files, errors raised by access to files, and programmatic ways to read files. Additionally, this specification also defines an interface that represents "raw data" which can be asynchronously processed on the main thread of conforming user agents. The interfaces and API defined in this specification can be used with other interfaces and APIs exposed to the web platform.

Unfortunately there is no way to give JavaScript any access to the user's local files.
There is a very serious security issue with that.
There is however API for that on IE browsers (Which give nice big warning when you attempt to access the files)
I recommend to ask from the user to upload his own file (using <input type="file" />) and upload it to the server.

HTML5 specifications specify an API to access the local filesystem. It is supported in the latest versions of Chrome. See here for details http://net.tutsplus.com/tutorials/html-css-techniques/toying-with-the-html5-filesystem-api/.
If the environment is controlled (i.e in a classroom or intranet) you can build your application using this API.

Related

How do a web application access local file?

I am trying to have a web application access local files. A web IDE like vscode can directly change or rename local files. While vscode doesn't seem to use a tag like <input type="file" />
My hope is to load a local directory and control the files like remove/rename through my web application. The web IDE's solution may provide some reference.
How does vscode access the local file?
vscode.dev uses the File System Access API, which allows web applications to directly read and modify the filesystem.
Rather than using a <input type="file" />, it calls window.showOpenFilePicker() to get a FileSystemFileHandle, which can then, in turn, be read and converted into a FileSystemWritableFileStream to which the browser can write and save files. Similarly, the API can handle directories and browse the file hierarchy.
Of course, this is a simplification, as I could not possibly go through every detail of the API in this answer. The MDN article has a lot of examples and thorough documentation that you will want to read through. For testing, it should be noted that the API is only available on sites served through HTTPS, so you're going to need to set up SSL for your localhost. Also, the API is not available in all browsers, so be sure to check the compatibility table.

Microsoft Javascript Add-In: read/write to Excel, Access

I am trying to create a Microsoft Word Add in. I would like the javascript Add in to have the ability to read and write to Microsoft Access and Microsoft Excel files. This is trivial with VBA, but I do not want to divide up the user experience between my Javascript add in and a VBA button in the original Word document. I would like to be able to read and write from the Javascript add in somehow.
I know I have access to things like Word.run(function (context) {..... from the docs, but example functions have nothing to do with accessing other documents.
What is the right way to access other Microsoft documents from a Javascript add in to read and write?
Thanks.
By "other Microsoft documents" I'll assume you are talking about any related files the user has stored on their PC. But these JavaScript for Office add-ins are essentially just web pages running in an embedded browser, and applications running in a browser are sandboxed and just don't have access to the local computer (without installing client helper applications).
So your app will need to prompt the user to upload a file to your web server where you can interact with the file using a relevant API (which would be a completely different topic). Or you can use web-based APIs to interact with web-based file systems (OneDrive/Graph, Dropbox, etc.).

How can I get the current Excel file in Office JavaScript API?

I am developing a tab pane app in Excel which needs to read the current document. In Word, the Office JavaScript API has the method Office.context.document.getFileAsync(), but this is not available in Excel.
I can get the URL of the document with Office.context.document.getFileProperties(), and then I thought I could read the file with this.
I tried using the HTML5 FileReader() object, but this only works for files selected from the file input control. I tried manipulating a hidden file input control so it automatically uses the current document, but JavaScript understandably prevents you from doing this for security reasons. I could ask the user to browse to the document they are currently using but that would be a poor user experience.
So I tried using ActiveXObject('Scripting.FileSystemObject') but ActiveX is not allowed in tab pane apps at all, whatever the current security setting are in IE.
What other options do I have?
According to the API road map, Office.context.document.getFileAsync() is not available in Excel at this moment.
I don't think it's feasible by using getFilePropertiesAsync(). It only returns the URL. Usually browser forbids developer touching any content in the file system. Therefore, it's hard to access the local file system in JavaScript code.
Besides, the file may not be in local file system. For example, it could be hosted in Onedrive or SharePoint. getFilePropertiesAsync() should return its real URL in Onedrive/SharePoint, instead of local file system.
I guess Microsoft will support getFileAsync() in the future.

Search string in a directory jquery

I am novice in javascript. Is it possible to search in a directory of html files for a text content or string?
If possible can anyone suggest me how to implement this or any reference.
JavaScript has no native ability access files or directories. You need an API provided by the host environment to do that.
NodeJS, for example, provides the File System module.
JavaScript embedded in a webpage has no access to the client's file system (for security reasons). It can access URLs (via XMLHttpRequest) which a web server can map onto a file system.
Well yes it is possible. But modern browsers will restrict access to the client's disk so no you will not be allowed to read the disk without serious changes in browser specific security settings.

Is it possible to create something like Google Chrome's Workspaces in the browser?

Is it possible to create something like Google Chrome's Workspaces, but with HTML5, Javascript or some other web based language?
I'm currently working on a web based ide, and I'm interested in implementing something similar to how Google Chrome handles local file editing. Basically asking the user for permission for accessing files in a particular directory that they select.
I've managed to open files that the user selects and show its content, but after editing there's no way to save it back to the same file, short of downloading it every time they save.
Is this possible with current technologies? or would I have to use something like Java?
The Achilles heel of your plan comes from a misunderstanding of the File System API. The most common misunderstanding about the File System API is that it might somehow give scripts direct read/write access to the client's local file system (e.g., C://whatever). As has been widely documented, including in the tag Wiki for HTML5-FileSystem here on Stackoverflow, "the File System API cannot directly access the local file system." The API provide access to a "virtual" file system, not the user's local file system. You cannot, therefore, use the File System API to "ask the user for permission for accessing files in a particular directory that they select," as you're seeking to do for your browser-based IDE project.

Categories

Resources