Re: [jetpack] Firefox extensions and full file paths from HTML form?
1,444 views
Skip to first unread message
Jeff Griffiths
Aug 30, 2012, 11:15:53 AM8/30/12
to mozilla-la...@googlegroups.com, Alin Tomescu
Hi Alin,
I saw this question on SO (
http://stackoverflow.com/questions/12145622/firefox-extensions-and-full-file-paths-from-html-form
). I upvoted Wladimir's answer, and can't personally think of anything
to add to it. Perhaps someone from the team has some comment on his
solution?
cheers, Jeff
On 12-08-30 4:01 PM, Alin Tomescu wrote:
> Hi everyone,
>
> I have built a Firefox extension using the Addon SDK that opens up a new
> tab with a HTML page from the extensions directory and attaches a
> content script to it.
>
> I have an `<input type="file">` in the HTML file and some code that
> handles the "submit" event in the content-script JS file.
>
> My problem is that, due to security reasons, I cannot access the full
> file path in JS with
> `document.getElementById('uploadid').files[0].name`. I only get the
> file's name.
>
> However, since this is a Firefox extension, I'm wondering if there is
> anyway to override this restriction? I have been looking into
> mozFullPath, but it seems to always be empty when I access it with
> `document.getElementById('uploadid').files[0].name` either using JS in
> the HTML file, or using JS in the content-script.
>
> I have been looking into
> `netscape.security.PrivilegeManager.enablePrivilege("UniversalFileRead")
> but I believe it is deprecated anyway?
>
> In conclusion, I am trying hard to get the selected's file full path,
> since my extension needs to know it, but mozFullPath always comes empty.
>
> You can see my code below, and also the full extension can can be
> downloaded from here: https://dl.dropbox.com/u/2907849/example.tar.gz
>
> CODE
> ----
> ### lib/main.js ###
> <!-- language: lang-js -->
>
> var self = require('self');
> var tabs = require('tabs');
> var data = self.data;
> var jsLoadForm = "load-form.js", htmlLoadForm = "load-form.html";
>
> exports.onUnload = function(reason) {};
> exports.main = function(options, callbacks) {
> openHtmlLoadFormTab(htmlLoadForm, jsLoadForm);
> };
>
> function openHtmlLoadFormTab(htmlFileName, jsWorkerFileName) {
> tabs.open({
> url: data.url(htmlFileName),
> onReady: function(tab) {
> var tabWorker = tab.attach({
> contentScriptFile: [ data.url(jsWorkerFileName) ]
> });
> }
> });
> }
>
> ### data/load-form.html ###
> <!-- language: lang-html -->
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <title>Form</title>
> <script lang="text/javascript">
> function fileChanged(e) {
> // this is just the file name
> alert("html js: files[0].name: " + e.files[0].name);
> // mozFullPath is indeed empty, NOT undefined
> alert("html js: files[0].mozFullPath: " +
> e.files[0].mozFullPath);
> }
> </script>
> </head>
>
> <body>
> <form name="my-form" id="my-form" action="">
> <div>
> <label for="uploadid1" id="uploadlabel1">File (JS
> in HTML):</label>
> <input type="file" name="uploadid1" id="uploadid1"
> onchange="fileChanged(this)"/>
> </div>
> <div>
> <label for="uploadid2" id="uploadlabel2">File (JS
> in content script): </label>
> <input type="file" name="uploadid2" id="uploadid2"/>
> </div>
> </form>
> </body>
> </html>
>
> ### data/load-form.js ###
> <!-- language: lang-js -->
>
> document.addEventListener("DOMContentLoaded", function() {
> try {
>
> document.getElementById("uploadid2").addEventListener('change',
> function(e) {
> console.log("e.target.files[0].name: " +
> e.target.files[0].name);
> console.log("e.target.files[0].mozFullPath: " +
> e.target.files[0].mozFullPath);
> });
> } catch(e) {
> console.log('adding event listener failed: ' + e);
> }
> }, false);
> I have also asked this question on StackOverflow.com, where I got some
> very useful suggestions but I am still looking for a solution, if there
> is one.
>
> --
> You received this message because you are subscribed to the Google
> Groups "mozilla-labs-jetpack" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/mozilla-labs-jetpack/-/XUF15scr5foJ.
> To post to this group, send email to mozilla-la...@googlegroups.com.
> To unsubscribe from this group, send email to
> mozilla-labs-jet...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/mozilla-labs-jetpack?hl=en.
I saw this question on SO (
http://stackoverflow.com/questions/12145622/firefox-extensions-and-full-file-paths-from-html-form
). I upvoted Wladimir's answer, and can't personally think of anything
to add to it. Perhaps someone from the team has some comment on his
solution?
cheers, Jeff
On 12-08-30 4:01 PM, Alin Tomescu wrote:
> Hi everyone,
>
> I have built a Firefox extension using the Addon SDK that opens up a new
> tab with a HTML page from the extensions directory and attaches a
> content script to it.
>
> I have an `<input type="file">` in the HTML file and some code that
> handles the "submit" event in the content-script JS file.
>
> My problem is that, due to security reasons, I cannot access the full
> file path in JS with
> `document.getElementById('uploadid').files[0].name`. I only get the
> file's name.
>
> However, since this is a Firefox extension, I'm wondering if there is
> anyway to override this restriction? I have been looking into
> mozFullPath, but it seems to always be empty when I access it with
> `document.getElementById('uploadid').files[0].name` either using JS in
> the HTML file, or using JS in the content-script.
>
> I have been looking into
> `netscape.security.PrivilegeManager.enablePrivilege("UniversalFileRead")
> but I believe it is deprecated anyway?
>
> In conclusion, I am trying hard to get the selected's file full path,
> since my extension needs to know it, but mozFullPath always comes empty.
>
> You can see my code below, and also the full extension can can be
> downloaded from here: https://dl.dropbox.com/u/2907849/example.tar.gz
>
> CODE
> ----
> ### lib/main.js ###
> <!-- language: lang-js -->
>
> var self = require('self');
> var tabs = require('tabs');
> var data = self.data;
> var jsLoadForm = "load-form.js", htmlLoadForm = "load-form.html";
>
> exports.onUnload = function(reason) {};
> exports.main = function(options, callbacks) {
> openHtmlLoadFormTab(htmlLoadForm, jsLoadForm);
> };
>
> function openHtmlLoadFormTab(htmlFileName, jsWorkerFileName) {
> tabs.open({
> url: data.url(htmlFileName),
> onReady: function(tab) {
> var tabWorker = tab.attach({
> contentScriptFile: [ data.url(jsWorkerFileName) ]
> });
> }
> });
> }
>
> ### data/load-form.html ###
> <!-- language: lang-html -->
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <title>Form</title>
> <script lang="text/javascript">
> function fileChanged(e) {
> // this is just the file name
> alert("html js: files[0].name: " + e.files[0].name);
> // mozFullPath is indeed empty, NOT undefined
> alert("html js: files[0].mozFullPath: " +
> e.files[0].mozFullPath);
> }
> </script>
> </head>
>
> <body>
> <form name="my-form" id="my-form" action="">
> <div>
> <label for="uploadid1" id="uploadlabel1">File (JS
> in HTML):</label>
> <input type="file" name="uploadid1" id="uploadid1"
> onchange="fileChanged(this)"/>
> </div>
> <div>
> <label for="uploadid2" id="uploadlabel2">File (JS
> in content script): </label>
> <input type="file" name="uploadid2" id="uploadid2"/>
> </div>
> </form>
> </body>
> </html>
>
> ### data/load-form.js ###
> <!-- language: lang-js -->
>
> document.addEventListener("DOMContentLoaded", function() {
> try {
>
> document.getElementById("uploadid2").addEventListener('change',
> function(e) {
> console.log("e.target.files[0].name: " +
> e.target.files[0].name);
> console.log("e.target.files[0].mozFullPath: " +
> e.target.files[0].mozFullPath);
> });
> } catch(e) {
> console.log('adding event listener failed: ' + e);
> }
> }, false);
> I have also asked this question on StackOverflow.com, where I got some
> very useful suggestions but I am still looking for a solution, if there
> is one.
>
> --
> You received this message because you are subscribed to the Google
> Groups "mozilla-labs-jetpack" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/mozilla-labs-jetpack/-/XUF15scr5foJ.
> To post to this group, send email to mozilla-la...@googlegroups.com.
> To unsubscribe from this group, send email to
> mozilla-labs-jet...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/mozilla-labs-jetpack?hl=en.
Alin Tomescu
Aug 30, 2012, 11:23:04 AM8/30/12
to Jeff Griffiths, mozilla-la...@googlegroups.com
Hi Jeff,
Thanks for the prompt response! Yes, Wladimir's answers have been helpful and have steered me in the right direction.
I am hoping someone here might know of a way to access the mozFullPath from within the HTML page/content-script/main.js?
Cheers!
Alin
To post to this group, send email to mozilla-labs-jetpack@googlegroups.com.
To unsubscribe from this group, send email to
Reply all
Reply to author
Forward
0 new messages