I am writing a Firefox extension and would like the users to be able to change an image on a web page with a local image. Is it possible, using JavaScript, to change the image source with an image that is saved on the user's local machine?
Let me know if you need more information. Thanks
You can set SRC of an image to a "file://" URI obviously, or any string for that matter. But getting the path may prove more tricky - you'll have to use browser's internals to grab the path.
Of course this is completely impossible from a webpage javascript, but an extension is in a much weaker sandbox than a page, and you can do quite a bit about the filesystem, so answers that suggest it's impossible are plain wrong.
I think this hacks post has some useful information on recent HTML5 feature work to support access to local files:
http://hacks.mozilla.org/2010/02/an-html5-offline-image-editor-and-uploader-application/
I'm not sure about using local files as images directly, but at worst, using the techniques demonstrated there, you could create a data: URL to use instead.
JavaScript cannot access the local filesystem for security purposes. Your plug-in will have to work-around this problem.
Related
I have a text file i want to read in my html page,both are in the same directory and i am not running a server. I intend that my users use the script offline(basically text manipulation based on expressions and preserving new line characters) .
I tried ajax call but mostly cross domain origin problem occured and i know most of the users will have this security tighened up in many browsers , so its not of use to circumvent this in only in my browser.
I want to support many browsers including old browsers as in IE7,8 etc which do not support HTML5 filereader.for the same reason reading using filesystemobject or activex is not good.
Reading the file after user select it as input , is this possible?Otherwise i would have no option then using other technologies like php,java etc which may expect my user to setup these.
Please excuse me if i am repeating this but i am a beginner web developer. I know that reading local files via javascript is not possible but is there any other way?
If you can't support FileReader, then the answer is pretty much no (at least, if you want to support a large range of browsers rather than rely on convenient feature x of browser y). Unless : you indeed increase the requirements for running the application and get some sort of local server going (for instance node.js, Apache, TomCat, etc. but like you said this will greatly increase the requirements and become cumbersome for users).
You could also rethink what it is you're trying to achieve. What are the contents of the file you want to read ? Can't these contents be part of the HTML file you're serving to your users (i.e. a large JSON Object inside a script-tag ?)
On possibility of using node.js:
Node.js is quite easy to install and assuming you are requiring from your users to install it, you can use it as a local server, which is a nodejs script of about two lines in size :). Running it locally would also omit the need to upload anything anywhere as you can directly read from the file system using the fs-object (see sitepoint.com/accessing-the-file-system-in-node-js).
STILL: from both a design and ease-of-use-point of view you might want to resort to using either another technology, or include the text file content inside the HMTL file
I've been doing Code Year at Codecademy and I wanted to start practicing Javascript for myself, but I've been having a tough time figuring out some basic issues.
For my first project, I want to read in from a spreadsheet. I can't figure out how to access the data from its original source online, so I thought I would just save it as a text file. My question, then, is how to read from that.
So it looks like you can't read local files in Javascript. (Although apparently that's changing with HTML5? I don't have any familiarity with that.) So do I have to upload the text file someplace? Can I upload files to JS Bin? If not, does anyone have any recommendations for where I can upload the text file? And either way, once I do, what's the code to read from it?
Thanks in advance. I am sure this question is riddled with misstatements and improprieties, but I've spent a significant amount of time on this and I can't find anything that seems to answer my question. I honestly thought it would be something simple, like "var inputfile = c:\file.txt" but that seems not to be the case. I am totally lost. Thanks!
You can't. File system and storages in Javascript (or rather the client) is sandboxed.
That means you can only read what is written there in the first place. This has to do with security.
You will need to drop (or select) the local files into the browser and have some mechanism there to receive the drop/selection and store the file to one of the local storing mechanisms such as indexedDB or file API (the latter currently only supported in Chrome). For text files localStorage works fine too.
Resources:
http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side
http://www.w3schools.com/html/html5_webstorage.asp
http://www.w3.org/TR/webstorage/
http://www.w3.org/TR/FileAPI/
http://www.w3.org/TR/IndexedDB/
The other option is to upload it to server and download it from there when you need it.
When you get to this point in your development, its time to run your own webserver for testing as it makes things much easier. If you must insist on doing it your way, uploading the file to a file hosting site and reading it in is still possible. Codecademy is great for getting started, but when you get into dealing with persistent data sources (either files or databases) its time to get web hosting or set up your own test server.
Even then you don't REALLY need your own test server, just a folder on your computer. You can access the files with File://, and link in the file you want to read as a relative path. If the .txt file is in the same directory, you just link it in as "Example.txt" when you open the html file in that directory.
Like in the title. With jQuery, or even simple JavaScript code, I can get table of all scripts (CSSes and images) that particular page uses, and I'm looking, if there is any solution to get each resource file size?
I think I did a quite good research here. Most answers are about files uploaded to server, being uploaded or just before being uploaded, so that is not, what I'm looking for. There is some support introduced in HTML5, but again, it seems to be for uploaded files only.
Of course, I'm looking for a cross-browser solution, so using some crappy file-object, introduced in old IE, is also not, what I'm looking for. Also, please let me underline, that I'm talking purely about checking file size of a file stored on server, accessible by given URL. So, please, don't write answers like, that I can't access local files, from JavaScript, for security reasons. I already know that.
I found quite great solution on SO, but it uses AJAX request to solve the problem. Although it is very interesting (sending request of HEAD type), it might not work on all servers (but was tested by answer's author that is supported to all major browsers). And I'm a bit thrilling about firing AJAX request for each resource I find on each analysed page.
So, I'm assuming that there isn't such solution. And I would be happy, if someone could prove that my assumption is wrong. But, then, on the other hand, how do they do this in for example Firebug? If I'm not mistaken, XPI extensions are written in JavaScript, right? And Firebug certinally can measure sizes of resuorces used in current website.
To verify content length from inline scripts you can use their .text attribute.
document.getElementsByTagName('script')[0].text.length //works for inline scripts
For external scripts, where .src attribute refer to another file/resource, there's a problem with Access-Control-Allow-Origin security constraint, unless you allow them in your browser settings. If the external scripts are from the same domain as the page where you are trying to catch them, is ok.
I created a fiddle to demonstrate how to get their content length.
UPDATED 20/07
Firebug has its own implementation to intercept page loads that extends the Mozilla.org observer-service.
Question 'An observer for page loads in a custom xul:browser' should give you an idea of how to implement this kind of interceptor using Mozilla Add-on API.
got some great feedback last time.
I'm essentially setting up a Wiki-type system on my local computer. I'm linking between HTML files, with some already existing and some not. I'm using XMLHttpRequest to check to see if the files exist.
The problem comes when I need to check files that are in different directories. I've come to find out this is a security thing in place. However, I'd like to disable it if possible, just for my local files. It seems rather odd that I can't have simple Javascript that returns the text on any web page at all, but even more so on my own computer.
I don't have any sort of server software running, just a bundle of HTML files with Javascript in them.
Thanks in advance!
javascript can not talk to the local filesystem. The reason for this is to keep people from writing destructive scripts that break your computer.
If this isn't a learning exercise, perhaps you might be interested in TiddlyWiki?
As you mention your self, "this is a security thing in place". In general, JavaScript is not allowed to access local files as it violates the sandbox.
However, have a look at these SO posts that discuss a few possible solutions:
Can JavaScript access a filesystem?
Local file access with javascript
You can also have a look at this HTML5 feature:
Reading local files in JavaScript
Suppose that, I have local image path that get from <input type="file"... web control using javascript.
I want to pass this path to Flash object and display that image in it.
I believe what you are looking for info on is FlashVars.
Flash Vars are ways to pass data to swf files. Very similar to Query Strings.
They size limit is 64k and are support on Flash Player 6 and newer I believe.
Here is the adobe site on them.
I hope this helps some