How to access image files outside project folder in html? - html

I put the user uploaded image files on separate disk partition on my local dev server(OS windows) which is outside of project folder. I need to access those image files in html pages of web app.
I tried out giving paths like: http://localhost:8080/C://tmp/thumbnails/pl_2001.JPEG but no help. Image is not fetched. How to properly access such files in html pages ?

You will have to use rewrites for this so you don't display sensitive folder names.
if you are using php you can use .htaccess rewrites for a slug something like images/someimage.mime and split/get what's after images/ and have a php function that takes the filename and makes sure it exists and if you want you can check if its a valid mime then send a header to say its a image/somemime so the browser can display the image instead of gibberish it will display without it.
$filename = "C://tmp/" . $file;
if(file_exists($filename)){
$img = getimagesize($filename);
if(in_array($img['mime'], array('jpg','jpeg','gif','png','etc'))){
header("Content-type: image/" . $img['mime']);
readfile($filename);
}else{
//default image
}
}else{
//default image
}
I haven't tested this but it should give you a idea on getting you started. If this isn't the language you are looking for try searching for something similar for your language you are using.

Related

HTML Conditional href

I have a folder containing a large number of pdf files. They are named with a code of 3 digits (XXX.pdf). In that same folder, I have a index.html file, which as its name suggests, is an index for navigating in the folder and opening a specific pdf.
As an example, when I search a specific pdf file but I don't know what's the name of the pdf. I only know its title or authors.
Without that index, I have no solution to find it.
With the index, the pdf are classified according to authors or titles so I can search within the index and click on the link to open the file. The index contain this line for each pdf file:
<STRONG>TITLE001</STRONG><br /> Author001
So, this is the first configuration. I can give the entire folder to a colleague and he can open the index to search for a file as soon as he doesn't change the folder organization because the href link is relative.
Now, I have a second configuration in which I uploaded that folder on a server on a private network. I changed the index.html with the following line:
<STRONG>TITLE001</STRONG><br />Author001
In that way if someone search a specific pdf file, he can download the index and when he click on the like in that index, it will download the correct pdf from the server.
BUT, I would like to have both configuration working:
If my colleague uses a lot that folder, he will maybe prefer to download the entire folder and the index will not work because its not a relative address anymore.
If my colleague uses it occasionally, he will just download the index and it will work.
Is there any solution to merge both solution and to have a conditional href attribute ?
Allowing to use both configurations. Something like:
if "001.pdf" doesn't exist
<STRONG>TITLE001</STRONG><br />Author001
else
<STRONG>TITLE001</STRONG><br />Author001
Can someone help me with that ?
Thanks a lot !
Doubt you will find a way to do that in HTML, how about something with Js ? Do you use JQuery or something ?
Something like that could do it then :
$.ajax({
type: 'HEAD',
url: 'http://personal_cloud/001.pdf',
success: function() {
// here when then file does exist
},
error: function() {
// here when then file does not exist
}
});

LOCAL HTML file to generate a text file

I am trying to generate a TEXT/XML file from a LOCAL HTML file. I know there are a lot of answers to generating a file locally, usually suggesting using ActiveX object or HTML 5.
I'm guessing there is a way to make it work on all browsers (in the end HTML extension is opened by a browser even if it is a LOCAL file) and easily since this is a LOCAL file put in by user himself.
My HTML file will be on client's local machine not accessed via HTTP.
It is basically just a form written in HTML that upon "SAVE" command should be generating an XML file in the local disk (anywhere user decides) and saving form's content in.
Any good way?
One way that I can think of is, the html form elements can be set into class variables and then using the jaxb context you can create an XML file out of it.
Useful Link: http://www.vogella.com/tutorials/JAXB/article.html
What you can do is use base64 data-urls (no support for IE9-) to download the file:
First you need to create a temporary iframe element for your file to download in:
var ifrm = document.createElement('iframe');
ifrm.style.display = 'none';
document.body.appendChild(ifrm);
Then you need to define what you want the contents of the file to download to be, and convert it to a base64 data-url:
var html = '<!DOCTYPE html><html><head><title>Foo</title></head><body>Hello World</body></html>';
htmlurl = btoa(html);
and set it as source for the iframe
ifrm.src = 'data:text/x-html;base64,'+htmlurl;

HTML/ display images in a HTML page

I created a HTML page.
Now, I try to display all the pictures that are in a specific folder (/folder1) in this HTML page (Note: I don't know the names of these images).
I try to create a loop, which read all this images, and display it in this HTML.
There is an easy way to do that?
You are looking for something which HTML cannot do. You are going to need some sort of backend language, whether that be Rails, PHP, Python, or something else doesn't really matter.
HTML is and always will be only a Markup Language.
Here is a similar post which has code that might help you:
How To Display All Images in Folder
With php you can use function scandir() to retrieve all the files in a directory, and save them as an array.
Then iterate over that array and display any image with something like:
echo '<img src="path/to/folder1/'$files_array[i]'">
where $files_array contains the names of every image file in that directory.
if your images are stored in a server you can read the directory and get the image name them send to the font end.
if you are work in a local file system such as
/dir/index.html
/dir/images/
/dir/images/xxx.png
/dir/images/aaa.png
/dir/images/other image.png
you can rename all images in batch to 1.png 2.png 3.png ...and so on then use javascript in html to
generate the image
var body = document.getElementsByTagName("body")[0];
for (var i = 0; i < 100; ++i) {
var img = document.createElement("img");
img.src = "images/" + i + ".png";
body.appendChild(img);
}

Store Images in App_Data and address them absolute make errors

I've generated an image tag like below:
<td>
<img src='#item.SourceAddress' alt="#item.Description"/>
</td>
and the result is somrthing like this:
<td>
<img src='C:\Users\leo\Workspace\Team Foundation Server\Sources\HRS\HRS\App_Data\user\Photos\test.jpg' alt="desc"/>
</td>
The problem is I only see blank space and no image at all(in firefox I only see alt text). the path is correct. I copied the img tag itself into another html file and I see the image crystal clear.
somrthing that might help: I opened the source with firefox and when I clicked on source of image I got following error:
Firefox doesn't know how to open this address, because the protocol
(c) isn't associated with any program.
and sorry for terrible english by the way.
Edit: I Edited the title. It is make more sence now!
This may be due to you providing a local path name (i.e. a directory in C:) rather than a relative path via Razr. If you start debug in Firefox then the console output sometimes eludes to this.
You could try something similar to:
<img src="#Url.Content(Item.SourceAddress)" alt="desc"/>
And check that SourceAddress is in the format of:
~/MyImages/Photos/test.jpg
Also worth checking all the obvious things like double quotes over single quotes etc.
Finally found out what is the problem!
First of all I used App_Data Folder to store files. this folder is special purpose and is used to store some special database files and IIS wont give direct access to this folder. and I had to make another folder like Image and store files there.
Second problem is I gave the path directly from Root (C:\...). The Web Browser doesen't have access to the Server File System Directly (Due to some security reasons). Because of this I had to gave the path relative address. The absolut path should be used by Server Code only and not in html source.
I managed to convert absolute path to relative like below:
`public static class HttpServerUtilityExtensions
{
public static string RelativePath( this HttpServerUtilityBase utility, string path, HttpRequestBase context )
{
return path.Replace( context.ServerVariables[ "APPL_PHYSICAL_PATH" ], "/" ).Replace( #"\", "/" );
}
}`
and:
``

how to display image from upload directory on show.php page

Images are stored in the folder name upload in my website directory.
can anybody tell me how will i display it in another page name show.php
This question might be very basic level but I am very new to php.
Scan the directory for all image names and then output the image tag with the src set to the path for the image.
<img src="/upload/name-of-image-file-here" />
assuming the upload directory is web-accessible and whatnot. If not, then you'll need to do a script to handle the output of the image, of which there are plenty of sample questions/answers on this site.
You want to use PHP to scan the directory with the images in it and then generate HTML to show them.
You might want to look into the Directory Iterator object. You can use that to loop through the images and then generate the HTML as needed.
For getting files, you might want to use the following code (based on this PHP Documentation sample):
<?php
$iterator = new DirectoryIterator(dirname(__FILE__));
foreach ($iterator as $fileinfo) {
if ($fileinfo->isFile()) {
//Add filetype check here and then echo the HTML
echo $fileinfo->getFilename();
}
}
?>