[MOD] - Image Preview in Upload [AJAX] [IE/FF/Opera/Chrome]

[trez]

Hey there,

Ever choose an image to upload, fill in all the fields, send the form and realize you took the wrong picture? Yeah, it's a pain in the ***.
Well, use this MOD and your user's will be happy to get a preview of the image they choose to upload. Best thing is, it happens via AJAX and it's compatible
with all modern browsers.

What: This MOD displays the image a user chooses to upload below the "browse" button via AJAX $_Post, without sending the form.
Tested with: 4images 1.7.10 with Firefox 3.X, Chrome 14.X, Opera 11.52, Internet Explorer 8

So let's get this party started.


STEP 1

Create a folder named "preview" in your 4images/data/ directory (4images/data/preview) and CHMOD it to 777




STEP 2

open notepad and insert:

Code: [Select]

<?php
$upload_dir = 'data/preview/'; 
$preview_url = 'http://yourdomain.com/4images/data/preview/';
$filename= '';
$result = 'ERROR';
$result_msg = '';
$allowed_image = array ('image/gif', 'image/jpeg', 'image/jpg', 'image/pjpeg','image/png');
define('PICTURE_SIZE_ALLOWED', 2242880); // bytes

if (isset($_FILES['media_file'])) 
{
 if ($_FILES['media_file']['error'] == UPLOAD_ERR_OK)  
 {
 if (in_array($_FILES['media_file']['type'], $allowed_image)) {
 if(filesize($_FILES['media_file']['tmp_name']) <= PICTURE_SIZE_ALLOWED) 
 {
 $filename = $_FILES['media_file']['name'];
 move_uploaded_file($_FILES['media_file']['tmp_name'], $upload_dir.$filename);

//phpclamav clamscan for scanning viruses
//passthru('clamscan -d /var/lib/clamav --no-summary '.$upload_dir.$filename, $virus_msg); //scan virus
$virus_msg = 'OK'; //assume clamav returing OK.
if ($virus_msg != 'OK') {
unlink($upload_dir.$filename);
$result_msg = $filename." : ".FILE_VIRUS_AFFECTED;
$result_msg = '<font color=red>'.$result_msg.'</font>';
$filename = '';
}else {
// main action -- move uploaded file to $upload_dir
$result = 'OK';
}
}else {
$filesize = filesize($_FILES['media_file']['tmp_name']);
$filetype = $_FILES['media_file']['type'];
$result_msg = PICTURE_SIZE;
}
}else {
$result_msg = SELECT_IMAGE;
}
}
elseif ($_FILES['media_file']['error'] == UPLOAD_ERR_INI_SIZE)
$result_msg = 'The uploaded file exceeds the upload_max_filesize directive in php.ini';
else
$result_msg = 'Unknown error';
}

// This is a PHP code outputing Javascript code.
echo '<script language="JavaScript" type="text/javascript">'."\n";
echo 'var parDoc = window.parent.document;';
if ($result == 'OK') {
echo 'parDoc.getElementById("picture_error").innerHTML =  "";';
}
else {
echo "parDoc.getElementById('picture_error').innerHTML = '".$result_msg."';";
}

if($filename != '') {
echo "parDoc.getElementById('picture_preview').innerHTML = '<img src=\'$preview_url$filename\' id=\'preview_picture_tag\' name=\'preview_picture_tag\' width=\'100\' />';";
}

echo "\n".'</script>';
exit(); // do not go futher

?>

save the file as previewimage.php and upload it to your 4images installation root (like yoursite.com/4images/previewimage.php)



STEP 3

open previewimage.php

find:

Code: [Select]

$preview_url = 'http://yourdomain.com/4images/data/preview/';

and change the path corresponding to your installation

save previewimage.php


STEP 4

open your_template/header.html

find:

Code: [Select]

{if has_rss}


insert ^above

Code: [Select]

<script>
function ajaxFileUpload(upload_field)
{
// Checking file type
var re_text = /\.jpg|\.gif|\.jpeg/i;
var filename = upload_field.value;
if (filename.search(re_text) == -1) {
alert("File should be either jpg or gif or jpeg");
upload_field.form.reset();
return false;
}
document.getElementById('picture_preview').innerHTML = '<div><img src="progressbar.gif" border="0" /></div>';
upload_field.form.action = 'previewimage.php';
upload_field.form.target = 'upload_iframe';
upload_field.form.submit();
upload_field.form.action = '';
upload_field.form.target = '';
return true;
}
</script>

save your_template/header.html


STEP 5

open your_template/member_uploadform.html

find:

Code: [Select]

<form method="post" action="{url_member}" enctype="multipart/form-data" onsubmit="uploadbutton.disabled=true;">


add ^above

Code: [Select]

<!-- iframe used for ajax file upload-->
<!-- debug: change it to style="display:block" -->
<iframe name="upload_iframe" id="upload_iframe" style="display:none;"></iframe>
<!-- iframe used for ajax file upload-->


find:

Code: [Select]

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


replace with:

Code: [Select]

 <input type="file" name="media_file" id="picture" class="input" onchange="return ajaxFileUpload(this);" /><br />
 <span id="picture_error"></span>
 <div id="picture_preview"></div>


save your_template/member_uploadform.html


STEP 6



save this image and upload it to your root directory (yoursite.com/4images/progressbar.gif)


THATS IT

Now, when you choose an image it have to look like this:





TWEAKS

1) You can edit the image size displayed in the previewimage.php (find "width=\'100\')
2) Empty once a week the folder "/preview" or do a cron-job to empty it


Viel Spass

Georgi, aka treZ

[mawenzi]

Hallo Georgi ...

sehr nützliche Modifikation, so wie du es in deinem Anfangs-Statement beschrieben hast. V@no hatte irgendwo dazu vor Zeiten auch mal ein Code-Schnipsel veröffentlicht, der jedoch nur im IE funktionierte und dann aber ab Vers.8.0 auch den Dienst verweigerte.
Von daher danke für die Veröffentlichung. Kannst du noch das passende "progressbar.gif"-Bild als Anhang beifügen ? Der Pfad zu diesem Bild müsste dann ggf. noch angepasst werden.

cu mawenzi

[trez]

@mawenzi, hab den post redaktiert und ein *.gif eingefuegt. Pfad ist korrekt wenn man den Anweisungen folgt

Am Anfang dachte ich auch es wie V@no zum machen, sprich nur JavaScript ohne AJAX usw, hat aber leider nur in Chrome und FF geklappt. Ich hoffe mal dass dies ne Dauerloesung ist, vieleicht kann es ja mal jemand mit Safari und IE7 probieren, muesste aber klappen.

[Jan-Lukas]

gerade eingebaut (Testseite) klappt ausgezeichnet (Firefox 7.0.1)  bin begeistert,
Eine wirklich nützliche Modifikation

Danke

[Sunny C.]

Sehr tolle Mod.
Kann man das für Media Sites erweitern?
Es wäre ebenfalls super, wenn man die previewimage.php mit den zugelassenen Dateitypen von 4images anpassen kann, so das es weiterhin über das ACP verwaltet werden kann

[whwsammler]

Unter Step 6 wird das image nicht angezeigt. Wäre nett wenn das jemand anhängt

[Jan-Lukas]

ist doch da  :
hier die Bildadresse
http://gruncharov.com/sneak/progressbar.gif

[mawenzi]

@whwsammler

... direkt unter "Step 6" dreht sich die ganze Zeit die  "progressbar.gif" ...
... Hinweis wie speichere ich Bilder aus dem Web : rechte Maustaste -> Bild speichern unter -> Ziel eingeben ... 

[whwsammler]

thx.  Na das ist mir jetzt aber peinlich!

[Jan-Lukas]

kleines Problem seit dem Firefoxupdate, nun wird das Vorschaubild nicht mehr angezeigt
Chrome und IE klappt es weiter

ist vielleicht nur eine Kleinigkeit ?

LG