• [MOD] - Image Preview in Upload [AJAX] [IE/FF/Opera/Chrome] 5 0 5 1
Currently:  

Author Topic: [MOD] - Image Preview in Upload [AJAX] [IE/FF/Opera/Chrome]  (Read 18749 times)

0 Members and 1 Guest are viewing this topic.

Offline trez

  • Hero Member
  • *****
  • Posts: 613
    • View Profile
    • blog / photography
[MOD] - Image Preview in Upload [AJAX] [IE/FF/Opera/Chrome]
« on: October 21, 2011, 03:21:46 PM »
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
« Last Edit: October 21, 2011, 05:00:57 PM by trez »

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: [MOD] - Image Preview in Upload [AJAX] [IE/FF/Opera/Chrome]
« Reply #1 on: October 21, 2011, 04:35:52 PM »
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
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

Offline trez

  • Hero Member
  • *****
  • Posts: 613
    • View Profile
    • blog / photography
Re: [MOD] - Image Preview in Upload [AJAX] [IE/FF/Opera/Chrome]
« Reply #2 on: October 21, 2011, 05:04:43 PM »
@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.


Offline Jan-Lukas

  • Addicted member
  • ******
  • Posts: 1.289
    • View Profile
    • Discover the New World of Kindersurprise
Re: [MOD] - Image Preview in Upload [AJAX] [IE/FF/Opera/Chrome]
« Reply #3 on: October 21, 2011, 07:24:17 PM »
gerade eingebaut (Testseite) klappt ausgezeichnet (Firefox 7.0.1)  bin begeistert,
Eine wirklich nützliche Modifikation

Danke
Danke Harald




Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.805
  • I ♥ 4I
    • View Profile
Re: [MOD] - Image Preview in Upload [AJAX] [IE/FF/Opera/Chrome]
« Reply #4 on: November 28, 2011, 04:45:17 PM »
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

Offline whwsammler

  • Jr. Member
  • **
  • Posts: 57
    • View Profile
    • Winterhilfswerk und andere Fotogalerien
Re: [MOD] - Image Preview in Upload [AJAX] [IE/FF/Opera/Chrome]
« Reply #5 on: December 03, 2011, 09:33:09 AM »
Unter Step 6 wird das image nicht angezeigt. Wäre nett wenn das jemand anhängt
Anonymous Sympathisant

Offline Jan-Lukas

  • Addicted member
  • ******
  • Posts: 1.289
    • View Profile
    • Discover the New World of Kindersurprise
Re: [MOD] - Image Preview in Upload [AJAX] [IE/FF/Opera/Chrome]
« Reply #6 on: December 03, 2011, 10:10:07 AM »
ist doch da  :?:
hier die Bildadresse
http://gruncharov.com/sneak/progressbar.gif
Danke Harald




Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: [MOD] - Image Preview in Upload [AJAX] [IE/FF/Opera/Chrome]
« Reply #7 on: December 03, 2011, 10:11:30 AM »
@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 ...  :wink:
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

Offline whwsammler

  • Jr. Member
  • **
  • Posts: 57
    • View Profile
    • Winterhilfswerk und andere Fotogalerien
Re: [MOD] - Image Preview in Upload [AJAX] [IE/FF/Opera/Chrome]
« Reply #8 on: December 03, 2011, 10:40:41 AM »
thx.  Na das ist mir jetzt aber peinlich! :oops: :oops: :oops:
Anonymous Sympathisant

Offline Jan-Lukas

  • Addicted member
  • ******
  • Posts: 1.289
    • View Profile
    • Discover the New World of Kindersurprise
Re: [MOD] - Image Preview in Upload [AJAX] [IE/FF/Opera/Chrome]
« Reply #9 on: August 02, 2014, 07:25:13 PM »
kleines Problem seit dem Firefoxupdate, nun wird das Vorschaubild nicht mehr angezeigt
Chrome und IE klappt es weiter

ist vielleicht nur eine Kleinigkeit ?

LG
Danke Harald