How copy image to data directory in firefox addon - firefox-addon

I have a html page which has input field(my panel html). I need get path to image(in my file system) from input and set it to <img src = "path">(in tab html). I know that browser don't allow to get absolute path to file.
Questions:
1) How can I copy image to my resource:data directory to get images relative path and set it to my <img src>?
2) Are there another alternatives to set path in img src to any image in my file system?

Please see Nandu's solution. You cannot set src of an image to a file:// uri.
Option 1
Make your panel.html a privileged page. Add a chrome.manifest file to your addon, and load the page into the panel with your chrome://***/content/*** path and it can now load file uris.
OR register your resource page as an about: page with this - https://developer.mozilla.org/en-US/docs/Custom_about:_URLs
Option2
Create a resource:// for it then set your src to that.
You can create a resource like this:
let res = Services.io.getProtocolHandler("resource").QueryInterface(Ci.nsIResProtocolHandler);
res.setSubstitution("myAddonId/myimg", Services.io.newURI('file://blah/blah/blah.png',null,null));
Then set src to resource://myAddonId/myimg
Option 3
XHR the image set the responseType = 'blob' and then on the resulting blob do URL.createObjectURL and then set the src of the img to that.
To show a file dialog and get file path do this:
var fp = Cc['#mozilla.org/filepicker;1'].createInstance(Ci.nsIFilePicker);
fp.init(Services.wm.getMostRecentWindow('navigator:browser'), 'Pick directory the icon container file should be saved in', Ci.nsIFilePicker.modeOpen);
// fp.appendFilters(Ci.nsIFilePicker.filterAll);
var rv = fp.show();
if (rv == Ci.nsIFilePicker.returnOK || rv == Ci.nsIFilePicker.returnReplace) {
console.log('path to selected file:', fp.file.path);
}// else { // cancelled }

You need to:
1.) include image in the addon (under data folder) ex: data\image\panelimg.jpg
2.) in the panel.html file, you will reference img by it's relative path in reference to html file. ex:
You can only reference assets bundled with the add-on (and not any image in file system)

Related

Render Images in document.directory in a markdown file in swift(SwiftyMarkdown)

Am using SwiftyMarkdown framework to render my .md file to have dynamic formatted data in my VC. But i am not able to load images in my document directory referenced in .md file. I can load images if they are available in Bundle.
Any other option or framework to fix this issue? I want to dynamically load images from server and save them documents directory and refer them in .md file which is also saved in same documents directory/folder. So the url of image and .md file is same.
"MyFile.md" in documents directory contains below content
Continue your walk, joining up with your original perimeter path of the item. "
In my VC viewdidload, i access the url path and load nsattributed string to my textview using SwiftyMarkdown frmaework
let url = self.getDocumentsDirectory().appendingPathComponent("MyFile.md")
if let md = SwiftyMarkdown(url: url) {
textView.attributedText = md.attributedString()
}
The formatted text is loaded but no image as its not available in my Bundle. But its saved in the same document directory as that of "MyFile.md"
Hope its clear!

Get directory path pointing to the correct folder?

I'm trying to create link for the file upload. I'm calling file upload function from .cfc file. The file should be uploaded in a different folder. Here is what I get if after this code is executed in component.cfc page:
<cfset thisPath = ExpandPath( "./" ) />
C:\\wwwroot\\myapp\\components\\
I need to go level back in myapp and open bug folder. Then in a bug folder I need to direct the path either to folder1/ documents or folder2/documents. That will depend on the form field, here is example:
<cfset folder = trim(form.type) EQ 1 "folder1" : "folder2">
The path should either point to:
C:\\wwwroot\\myapp\\bug\\folder1\\documents\\
or
C:\\wwwroot\\myapp\\bug\\folder2\\documents\\
I'm looking for a solution that will work even if I roll this code to a different server with the same directory structure. Is there a good way to achieve this in ColdFusion?

Why is src different for ui.draggable.attr('src') and ui.draggable[0].src

I'm using jQuery drag n drop to drop a thumbnail image into a div and I notice in the drop handler that if I pull the image src with:
src = ui.draggable.attr('src'); // brings back relative path
I get a relative path: clientImages/t_clown.jpg. But if I get the raw thumb node and get the src from there I get the full absolute path: - http:// . . .mysite/clientImages/t_clown.jpg.
var src= ui.draggable[0].src; // brings back absolute path
Does anyone understand why the different treatment?
Thanks
Because attr uses getAttribute which doesn't do any computation. It returns the attribute's "real" value.
src is the absolute address to the resource

read file from res folder blackberry

I want to read file from "res" folder on blackberry. The file that i used is a file javascript.
I used this code InputStream in = classs.getResourceAsStream("file.js");. But i get "could not find this path" and I use also
String srcFile = "/res/ressourcesWeb/file.js";
FileConnection srcConn = (FileConnection) Connector.open(srcFile, Connector.READ);
InputStream in = srcConn.openInputStream();
but i got an exception.
Can any one help me to read the file and give me the right path that should I use?
Your res folder has to be inside src folder to be accessed from your code.
src folder is the root folder of your project package. And all folders outside of src folder are invisible for the code at runtime.
Check this post for more details: Blackberry runtime error: FRIDG: could not find img/logo.png
There's file location principle described.
You actually do not need to put your resources under the src folder for them to be accessible from your code.
That is one way to do it, but I don't think it's the best way. Files under the src folder should really be source code, not images, or other resources. For JavaScript resources, it's debatable whether those should be under src or not. Most projects I've seen have used the src folder for only Java source code.
In any case, if you would like to keep your file (or other resources, like images) outside the src folder, you can do so. The BlackBerry plugin for Eclipse actually sets it up like this by default, when you create a new project. There is a res folder at the top level, next to (not under) src.
If you have
src\
src\com\mycompany\myapp\
res\
res\resourcesWeb\
res\resourcesWeb\file.js
Then, you can open the file like this:
String jsPath = "/resourcesWeb/file.js";
InputStream input = getClass().getResourceAsStream(jsPath);
byte [] content = IOUtilities.streamToBytes(input);
String contentAsString = new String(content);
P.S. You also can probably do this:
String jsPath = "/file.js";
InputStream input = getClass().getResourceAsStream(jsPath);
and not specify the path to the resource. Obviously, this will only work if there are no naming conflicts in your resource folders (e.g. you don't have /res/resourcesWeb/file.js and also /res/otherPath/file.js)

Get the filepath of an image inserted into TWebBrowser in edit mode

When you insert an image into a TWebBrowser in edit mode, how do you get the filepath of the inserted image? When an image is inserted it includes the full path to the image in the html source, but in my case I need to modify the html source to only include the filename.
EDIT:
This is the html source after the image is inserted:
<IMG border=0 hspace=0 alt=delphi align=baseline
src="C:\Images\delphi.bmp">
I need to change
<IMG border=0 hspace=0 alt=delphi align=baseline
src="C:\Images\delphi.bmp">
to
<IMG border=0 hspace=0 alt=delphi align=baseline
src="HTML\delphi.bmp">
Yes I can get the path from the html but I'd like to try to copy the image file to the HTML folder then change the path to the HTML folder after the image is inserted without parsing the html. If the filepath can be obtained after the image is inserted I can add the code to copy the file to the HTML folder so that the image appears in the webbrowser with the new path...
Have you tried using the browser's DOM interfaces to read the src attribute and update it to what you want? Specifically, look at the src property of the IHTMLImgElement interface.

Resources