Image Upload Preview

[himu]

Here is a little java trick i found at V@no's gallery .. which i did not find in the forum..
later managed to incorporate it with my site... 

When you choose a file to upload you can see a preview of the file before submit.

-----------------------------------------------
Files to edit: only two
template/{your_template}/header.html
template/{your_template}/member_uploadform.html
-----------------------------------------------

Step 1
Open template/{your_template}/header.html

Insert ^above</head> :

Code: [Select]

<script type="text/javascript">
<!-- Begin
/***** CUSTOMIZE THESE VARIABLES *****/
  // width to resize large images to
var maxWidth=150;
  // height to resize large images to
var maxHeight=150;
  // valid file types
var fileTypes=["bmp","gif","png","jpg","jpeg"];
  // the id of the preview image tag
var outImage="previewField";
  // what to display when the image is not valid
var defaultPic="spacer.gif";

/***** DO NOT EDIT BELOW *****/

function preview(what){
  var source=what.value;
  var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
  for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;
  globalPic=new Image();
  if (i<fileTypes.length) globalPic.src=source;
  else {
    globalPic.src=defaultPic;
    alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+fileTypes.join(", "));
  }
  setTimeout("applyChanges()",200);
}
var globalPic;
function applyChanges(){
  var field=document.getElementById(outImage);
  var x=parseInt(globalPic.width);
  var y=parseInt(globalPic.height);
  if (x>maxWidth) {
    y*=maxWidth/x;
    x=maxWidth;
  }
  if (y>maxHeight) {
    x*=maxHeight/y;
    y=maxHeight;
  }
  field.style.display=(x<1 || y<1)?"none":"";
  field.src=globalPic.src;
  field.width=x;
  field.height=y;
}
// End -->
</script>
Step 2
Open template/{your_template}/member_uploadform.html

Find:

Code: [Select]

  <span class="smalltext">
  {lang_max_filesize}<b>{max_media_filsize}</b><br />
  {lang_max_imagewidth}<b>{max_media_imagewidth}</b><br />
  {lang_max_imageheight}<b>{max_media_imageheight}</b><br />
Insert _below:

Code: [Select]

  <img alt="Image preview here" id="previewField" src="{template_url}/images/spacer.gif"><br />
Step 2.1
Find:

Code: [Select]

  <input type="file" name="media_file" class="input" /><br />
Replace with:

Code: [Select]

  <input type="file" name="media_file" onchange="preview(this)" class="input" /><br />

You can customize some of the variables at Step 1
between /***** CUSTOMIZE THESE VARIABLES *****/ and /***** DO NOT EDIT BELOW *****/

That's it. Enjoy... 

This is my first topic post.. hope i did not make any mistakes..

Lastly Thanks V@no.

[V@no]

Note: this only works in IE browser.

[himu]

Note: this only works in IE browser.

Ooopss!..  sorry forgot to mention that..
Thans!

[Lucifix]

Too bad that this mod doesn't work in Firefox. Looks like FF doesn't allow to show local images. You can enable this in about:config but it will work only on your computer.

Anyone has any other idea how to allow users to preview images before they publish them?