I am using a uihtml component inside a uifigure that loads a HTML file in its HTMLSource property. The HTML file just tries to fetch the contents of a text file located in the same folder, and outputs them inside a div component. The body in the HTML looks something like this:
<body>
<div id="viewer"></div>
<script>
fetch("./example.txt")
.then(response => response.text)
.then(textString => {
document.getElementById('viewer').innerHTML = textString;
});
</script>
</body>
The problem is that I always get a "Page Not Found" (the status from the fetch response is 404). The documentation of uihtml says: Common web file types, like JavaScript and CSS, can be referenced from the HTML file you specify for the HTMLSource property, but other web file types might not be supported., so I am not sure if it is even possible to fetch a text/pdf/any other file.
From what I understand, when calling uihtml MATLAB injects an iframe on the webpage displayed by the uifigure. This iframe runs on a local web server, and whenever you append a script tag with a source, the script is also accessed from the web server. For example,
<body>
<div id="viewer"></div>
<script id="script-id" src = "./example.js"></script>
<script>
document.getElementById("viewer").innerHTML = document.getElementById("script-id").src;
</script>
</body>
would display the source of the js file, which corresponds to something like:
https://localhost:31515/static/xxxxxxxx/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/example.js
That same location of the file we could get by appending the undocumented
connector.getBaseUrl
matlab.ui.internal.URLUtils.parseURL('/example.js',0)
I have tried fetching the text file with the full path to that web server location
(https://localhost:31515/static/.../example.txt)
but the 404 error persists.
At this level of HTML/JS is where I start to struggle. It looks like there should be some way to fetch the data of the file since scripts can be loaded, but I can't find a way. Does anybody know how to successfully fetch the file? Do we need a special credential in the fetch request or something like that?
I have few files in doc/docx/pdf format stored on server's folder and their path are saved in database. I wish to fetch the path of these files from database and then display it on my website.
In the database the files are stored in this format
id path
1 abc/request/file1.docx
2 abc/request/file2.pdf
3 abc/request/file3.docx
To display the file i used the following method
$a = $data->path;
$b = 'http://example.com/';
$r = $b.$a;
<iframe src="http://docs.google.com/gview?url=<?php echo $r; ?>&embedded=true" style="width: 100%; height: 600px;" frameborder="0"></iframe>
Issue
Earlier the file was getting displayed but all of a sudden it is not getting displayed now
I did the following checks to see the validity of file
1) File is in proper format and is not corrupted and does exist on server folder
2) The console is not giving any errors
3) Tried to run http://docs.google.com/gview?url=http://example.com/abc/request/file1.docx on browser, there also the file is not getting displayed, however the other example url given on net are working
Can anyone please tell how to correct the error. And I would also appreciate if anyone could tell any other way(using jquery, javascript or any but reliable way) to display the files on website without disturbing the formatting of the original file
For PDF, you can use ViewerJS to render.
For doc/docx, consider using Microsoft Office Viewer as a walkaround if Google Docs Viewer is not stable enough to you
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http%3A%2F%2Fieee802%2Eorg%3A80%2Fsecmail%2FdocIZSEwEqHFr%2Edoc' width='100%' height='900px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>
P/S: Don't know why the code snippet is not working, but you can take a look here: https://jsfiddle.net/gcuzq343/
you can use
1. google docs viewer
<iframe src="http://docs.google.com/gview?url=http://example.com/my-document.doc&embedded=true"></iframe>
2. Microsoft viewer
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://example.com/my-document.doc.doc' width='800px' height='600px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>
It works if the html file is local (on my C drive), but not if the html file is on a server and the image file is local. Why is that?
Any possible workarounds?
It would be a security vulnerability if the client could request local file system files and then use JavaScript to figure out what's in them.
The only way around this is to build an extension in a browser. Firefox extensions and IE extensions can access local resources. Chrome is much more restrictive.
shouldn't you use "file://C:/localfile.jpg" instead of "C:/localfile.jpg"?
Browsers aren't allowed to access the local file system unless you're accessing a local html page. You have to upload the image somewhere. If it's in the same directory as the html file, then you can use <img src="localfile.jpg"/>
C: is not a recognized URI scheme. Try file://c|/... instead.
Honestly the easiest way was to add file hosting to the server.
Open IIS
Add a Virtual Directory under Default Web Site
virtual path will be what you want to browse to in the browser. So if you choose "serverName/images you will be able to browse to it by going to http://serverName/images
Then add the physical path on the C: drive
Add the appropriate permissions to the folder on the C: drive for "NETWORK SERVICE" and "IIS AppPool\DefaultAppPool"
Refresh Default Web Site
And you're done. You can now browse to any image in that folder by navigating to http://yourServerName/whateverYourFolderNameIs/yourImage.jpg and use that url in your img src
Hope this helps someone
we can use javascript's FileReader() and it's readAsDataURL(fileContent) function to show local drive/folder file.
Bind change event to image then call javascript's showpreview function.
Try this -
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;'>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function showpreview(e) {
var reader = new FileReader();
reader.onload = function (e) {
$("#previewImage").attr("src", e.target.result);
}
//Imagepath.files[0] is blob type
reader.readAsDataURL(e.files[0]);
}
</script>
</head>
<body >
<div>
<input type="file" name="fileupload" value="fileupload" id="fileupload" onchange='showpreview(this)'>
</div>
<div>
</div>
<div>
<img width="50%" id="previewImage">
</div>
</body>
</html>
IE 9 : If you want that the user takes a look at image before he posts it to the server :
The user should ADD the website to "trusted Website list".
Newtang's observation about the security rules aside, how are you going to know that anyone who views your page will have the correct images at c:\localfile.jpg? You can't. Even if you think you can, you can't. It presupposes a windows environment, for one thing.
if you use Google chrome browser you can use like this
<img src="E://bulbpro/pic_bulboff.gif" width="150px" height="200px">
But if you use Mozila Firefox the you need to add "file " ex.
<img src="file:E://bulbpro/pic_bulboff.gif" width="150px" height="200px">
starts with file:/// and ends with filename should work:
<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">
I see two possibilities for what you are trying to do:
You want your webpage, running on a server, to find the file on the computer that you originally designed it?
You want it to fetch it from the pc that is viewing at the page?
Option 1 just doesn't make sense :)
Option 2 would be a security hole, the browser prohibits a web page (served from the web) from loading content on the viewer's machine.
Kyle Hudson told you what you need to do, but that is so basic that I find it hard to believe this is all you want to do.
If you're deploying a local website just for yourself or certain clients, you can get around this by running mklink /D MyImages "C:/MyImages" in the website root directory as an admin in cmd. Then in the html, do <img src="MyImages/whatever.jpg"> and the symbolic link established by mklink will connect the relative src link with the link on your C drive. It solved this issue for me, so it may help others who come to this question.
(Obviously this won't work for public websites since you can't run cmd commands on people's computers easily)
I have tried a lot of techniques and finally found one in C# side and JS Side.
You cannot give a physical path to src attribute but you can give the base64 string as a src to Img tag.
Lets look into the below C# code example.
<asp:Image ID="imgEvid" src="#" runat="server" Height="99px"/>
C# code
if (File.Exists(filepath)
{
byte[] imageArray = System.IO.File.ReadAllBytes(filepath);
string base64ImageRepresentation = Convert.ToBase64String(imageArray);
var val = $"data: image/png; base64,{base64ImageRepresentation}";
imgEvid.Attributes.Add("src", val);
}
Hope this will help
background-image: url(${localImage});
If you want to add a file as background to your website locally.
You need to upload the image aswell, then link to the image on the server.
what about having the image be something selected by the user? Use a input:file tag and then after they select the image, show it on the clientside webpage? That is doable for most things. Right now i am trying to get it working for IE, but as with all microsoft products, it is a cluster fork().
I'm just starting to create a blog with Pelican and wanted to link to an image. I did this by including the following line in my Markdown file:
<img src="./myImg1a.png" alt="./myImg.png" style="width: 750px; height: 800px;"/>
This line was successfully reproduced in the html file, which Pelican placed in the output directory (i.e. /myBlog/output). I placed the png files in the output directory (i.e. the same directory as the html files and got the following error:
WARNING:root:Unable to find file /category/myImg1a.png/index.html or variations.
where /category refers to myBlog/output/category. When I, instead, used the following html code:
<img src="/myImg1a.png" alt="/myImg.png" style="width: 750px; height: 800px;"/>
everything worked fine. I don't understand why this should be:
If the image file is in the same directory as the html file, shouldn't "./myImg1.png" be correct and "/myImg.png" be incorrect?
Why was the folder /category/myImg1a.png/index.html being sought at all?
First of all, by design, you should not change the contents of the output directly/manually.
You should put all your static contents in separate directory which is usually named as images or paths. And, then configure the path(s) in pelicanconf.py as:
# ...
PATH = 'content'
STATIC_PATHS = ['images', 'files'] # add any no. of locations
# ...
In that case, when Pelican is building actual page, it will look for any referenced static file in ./content/images and ./content/files locations. If cannot find there, it will emit the error message.
Now, answering to your trouble ...
By,
... src="./myImg1a.png" ...
Pelican look for this myImg1a.png file in your myBlog/content/ folder as you are mentioning ./ which is the root folder for Pelican is working on.
But, when you are referring it as
... src="/myImg1a.png" ...
Pelican eventually finds it in the html file's directory. By getting / as location, Pelican is looking for it in the same directory of your myblog/my-blog-post/index.html which is myblog/my-blog-post/.
Hence, working. But not in the ideal way.
For a deeper understanding, please take a look into Pelican's documentation on this matter.
Why was the folder /category/myImg1a.png/index.html being sought at all?
Pelican, here, just trying to be smart.
I have the following HTML component, trying to display a local image, however it will not show up whether I use <img src="file:/tmp/img.png"> or <img src="/tmp/img.png" />. Any ideas why this doesn't work? Saving the file to a local file and opening it works fine!
var xhtml:XML = <html>
<body>
<img src="file:/tmp/logo.gif" />
</body>
</html>;
myhtml.htmlText = xhtml.toXMLString();
Update:
This works fine, btw, if I save the same xhtml to a file and use webkit to open that file using myhtml.htmlLoader.load(new URLRequest("file:///path/to/html/file")).
Did you check for security sandbox violation?
Also did you try with "tmp/img.png" and "./tmp/img.png"?
Or maybe Air doesn't support xhtml, I'm not sure. Try and remove the slash in the img tag like this:
myhtml.htmlText = "<html><body><img src=\"tmp/logo.gif\"></body></html>";
Did you check for any javascript error in other parts of you webpage? They might be preventing your webpage to open.
Syntax looks OK for embedding image, check it here:
http://www.w3schools.com/htmL/tryit.asp?filename=tryhtml_images2