possible to display a local image on my form in MOzilla?

sneakyimp · 02-25-2006, 12:25 AM

I have a popup dialog i'm working that allows users to manage images. When they want to choose an image for a particular purpose, they have the option of selecting an image for upload.

so i have a form with a file input that allows them to select an image from their hard drive. i want to allow them to preview that image by loading an iframe on the page with the form. Here's the form page code below. The basic idea is that the onChange event of the FILE INPUT triggers a javascript function which causes the preview i frame to be loaded.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="admin.css" rel="stylesheet" type="text/css">
<title>Site Administration :: CHOOSE AN IMAGE TO UPLOAD</title>
</head>
<body class="popup_body" onLoad=""><div id="upload_form">
<form action="save_uploaded_image.php?sid=" name="upload_form" enctype="multipart/form-data" method="POST">
<input name="input" type="hidden" value="thumb">

<table class="edit_form" border="0" width="100%">
 <tr>
  <td class="prompt1" valign="middle" height="40">Click 'Browse' to locate an image on your hard&nbsp;drive:<input type="file" name="file_to_upload" onchange="preview_local_file(this.value);"></td>
 </tr>
 <tr>
  <td align="center" valign="top"><iframe name="image_preview" id="image_preview" width="450" height="310"
src="image_preview.php?choosing=1&local=1"></iframe></td>
 </tr>
</table><img src="/demo/imagespixeltrans.gif" width="1" height="10"><br>
<input type="button" value="UPLOAD THIS PHOTO" ID="upload_this_image_button" onClick='ValidateAndSubmit(document.upload_form);' disabled>&nbsp;<input name="use_existing_photo" type="button" value="USE AN UPLOADED PHOTO" onclick="window.location='choose_image.php?element=&input=thumb&bg=';">&nbsp;<input
type="button" name="cancel" value="CANCEL" onclick="window.close();">
</form>
</div>
<div id="busy_message" style="display:none;">
<table width="100%">
 <tr><td height="310" align="center" valign="middle">UPLOADING FILE...</td></tr>
</table>
</div>
<script language="Javascript">
<!--
var btnUploadThisImage = document.getElementById('upload_this_image_button');

function EnableImageButtons() {
	btnUploadThisImage.disabled=false;
}
function DisableImageButtons() {
	btnUploadThisImage.disabled=true;
}
function showBusyMessage() {
  var objForm = document.getElementById('upload_form');
  objForm.style.display = "none";
  var objBusy = document.getElementById('busy_message');
  objBusy.style.display = "block";
}
function ValidateAndSubmit(form) {
	if (!form.file_to_upload.value) {
		alert('You must choose a file to upload.');
		form.file_to_upload.focus();
		return false;
	}
	btnUploadThisImage.disabled=true;
	form.use_existing_photo.disabled=true;
	form.cancel.disabled=true;
	showBusyMessage();
	form.submit();
}
//-->
function preview_local_file(localfile) {
//alert('attempting to preview local file');
  var objIframe = document.getElementById('image_preview');
  if (!objIframe) {
    alert("Iframe not found.");
  }
//  objIframe.src = "image_preview.php?choosing=1&img=file://" + escape(localfile) + "&local=1";
  objIframe.src = "image_preview.php?choosing=1&img=" + escape("file://" + localfile) + "&local=1";
}
</SCRIPT>
</body>
</html>

This works fine and dandy in IE. But in Mozilla, nothing gets displayed and the Javascript Console reports this error:

Quote:

Security Error: Content at http://www.oddballsinvitations.net/d...an.jpg&local=1 may not load or link to file:///D:%5Ctrash%5Clohan.jpg.

Is it possible in mozilla to display a local image on my form when the user selects a file on my form? If not, that's a total drag

kitchin · 02-25-2006, 06:40 AM

I didn't know IE still had that bug! Anyway, change \ to /, then try this:
Links to local pages don't work
That is probably the security policy you need to change.
Note, you will have to edit the user.js file in your Mozilla profile directory.

Always use / instead of \. IE will accept it.

sneakyimp · 02-25-2006, 09:00 PM

Well like I said IE works on my machine. Sadly, I'm still running windows 98 and that is probably why. Apparently XP has this security hole fixed by default and you have to get users to change their security settings.

Given that my users are not very computer-savvy. I'm leaning toward an REG file or installer or maybe even an applet to help me do this. THANKS for your response.

***Weedpacket*** · 02-25-2006, 10:43 PM

If you don't mind the delay, or the increased traffic load, or the need to upload the file to preview it (some users, I'm guessing will assume that "if they can see it on the page, it's uploaded" anyway...), you could have the JS code doing the upload, and rewriting the page to include an <img> with an appropriate URL to get it back again.

sneakyimp · 02-26-2006, 12:45 AM

I had seen that suggested somewhere, but I really worry about how my less intelligent users might behave while the file (up to maybe 150K) is uploading. This issues touches upon my personal pet peeve about the apparent impossibility of seeing an upload progress indicator in PHP.

I think it's time I got into Java/ActiveX land anyway. I'm thinking I'll make an upload manager of some kind--eventually anyway.

***Weedpacket*** · 02-26-2006, 05:52 AM

Quote:

Originally Posted by sneakyimp

This issues touches upon my personal pet peeve about the apparent impossibility of seeing an upload progress indicator in PHP.

Not counting the workaround in the coding FAQ, start a wee animation ticking over (and perhaps add the label "uploading" somewhere as well) before starting the upload, and turn it off when the upload is completed? Not as informative, I admit.

sneakyimp · 02-26-2006, 05:48 PM

Thanks, weedpacket. I had seen a hybrid php/perl solution before but I wasn't aware of that one in the FAQ. I have to admit that it's encouraging to see that! Still seems a bit clunky but I'm definitely going to check that out.

On the other hand, it doesn't solve my image preview problem. I think that, rather than creating some kind of weird workaround for each different browser/platform possibility, I'll just make an uploader manager applet in Java. I've downloaded Net Beans and am hoping to figure it out. Unfortunately, the documentation and tutorials don't match the current version of the software.

kitchin · 02-26-2006, 06:20 PM

In WinXP, the user can coose "thumbnails" from the file chooser. Icon on the top right.