• [MOD] Progress Popup for Image Upload 5 0 5 1
Currently:  

Author Topic: [MOD] Progress Popup for Image Upload  (Read 44416 times)

0 Members and 1 Guest are viewing this topic.

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
[MOD] Progress Popup for Image Upload
« on: August 11, 2006, 11:03:59 PM »
Vorwort / Features :
  • Diese Modifizierung wurde hier im Forum angefragt.
  • Mit diesem MOD wird, gleich wie im ACP, beim Bild- / Datei-Upload für die Dauer des Uploads ein Popup mit einer Animation angezeigt. Dieses Fenster schließt sich dann automatisch nach abgeschlossenem Upload.
  • Dem User wird also auch beim Upload von größeren Dateien angezeigt, dass der Uploadprozess noch im Gange ist und er nicht voreilig die Seite wechselt.
  • In dieser Basisversion wird der gleiche Inhalt im Popup angezeigt wie im ACP.
  • Es ist aber natürlich auch möglich einen eigenen / anderen Inhalt im Popup anzeigen zu lassen. Wobei dann eine neue progress_2.php bzw. -.html erstellt werden müsste, auf die dann im Java Script verwiesen wird.


Dateien die zu ändern sind :
  • In dieser Basisversion ist nur eine Datei betroffen.
  • templates/<dein_template>/member_uploadform.html

Dateien die neu zu erstellen sind :
  • admin/progress_2.php


1. Schritt
folgendes Java-Script ist in den unmittelbaren Anfang der member_uploadform.html zu kopieren :
Code: [Select]
<script language="JavaScript">
    <!--
    var statusWin, toppos, leftpos;
    toppos = (screen.height - 401)/2;
    leftpos = (screen.width - 401)/2;
    function showProgress() {
      statusWin = window.open('admin/progress_2.php','Status','height=150,width=350,top='+toppos+',left='+leftpos+',location=no,scrollbars=no,menubars=no,toolbars=no,resizable=yes');
      statusWin.focus();
    }

    function hideProgress() {
      if (statusWin != null) {
        if (!statusWin.closed) {
          statusWin.close();
        }
      }
    }
   // -->
</script>


2. Schritt
finde folgende Zeile kurz vor Ende der member_uploadform.html :
Code: [Select]
<input type="submit" name="uploadbutton" value="{lang_submit}" class="button" />
und ersetze sie durch die folgende Zeile :
Code: [Select]
<input type="submit" name="uploadbutton" value="{lang_submit}" class="button" onClick="showProgress()" />


3. Schritt
folgendes Java-Script ist an das Ende der member_uploadform.html zu kopieren :
Code: [Select]
<script language=javascript>
   <!--
   showProgress();
   hideProgress();
   // -->
</script>


4.Schritt
Erstelle eine Kopie deiner admin/progress.php mit dem Namen progress_2.php, die auch im admin-Ordner zu speichern ist, wobei vorher noch folgende Änderungen vorzunehmen sind.
Finde in deiner neuen progress_2.php folgendes :
Code: [Select]
define('IN_CP', 1);
define('ROOT_PATH', './../');
require('admin_global.php');
und lösche es .

Weiterhin finde :
Code: [Select]
<title><?php echo $lang['upload_progress']; ?><</title>
und setze hier dein Titel für das Popupfenster ein, etwa so ...
Code: [Select]
<title>Dateiupload</title>
Wie bereits oben beschrieben ist die Datei nun im admin-Ordner zu speichern.


Viel Spaß beim Uploaden mit dem neuen Popup, natürlich auch für eure User ...  :wink:
mawenzi
« Last Edit: August 12, 2006, 06:31:34 PM by 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 Stinus

  • Newbie
  • *
  • Posts: 12
    • View Profile
    • Veteranbrannbiler - Old Fire Truck
Re: [MOD] Progress Popup for Image Upload
« Reply #1 on: August 11, 2006, 11:47:17 PM »
Hi
Is it possibility that you can translate this post / mod to English :?:. I don't understand deutsch so verry mutch. :wink:
Stian


A site about Old Fire Truck - Gallery - Forum

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: [MOD] Progress Popup for Image Upload
« Reply #2 on: August 12, 2006, 12:24:25 AM »
... a translation is coming soon ...
... in the meantime you can try this ...
... Google MOD translation ...  :mrgreen:
... please note, use this link only for the instructions, the code should be copyed from this original page
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 grafcux

  • Newbie
  • *
  • Posts: 45
    • View Profile
Re: [MOD] Progress Popup for Image Upload
« Reply #3 on: August 12, 2006, 11:23:32 AM »
Ja, auch bei mir schließt sich das Fenster nicht automatisch, es wird lediglich unten links "fertig" angezeigt, das Papier fliegt aber unendlich von links nach rechts!

Offline tdkpaul

  • Full Member
  • ***
  • Posts: 205
    • View Profile
Re: [MOD] Progress Popup for Image Upload
« Reply #4 on: August 12, 2006, 12:06:55 PM »
danke für den fabelhaften MOD

manchmal frage ich mich warum soetwas nicht in der Standart Version von 4images enthalten istl

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: [MOD] Progress Popup for Image Upload
« Reply #5 on: August 12, 2006, 05:53:39 PM »
... @ Alle ...
... zunächst mal danke für eure Reports ...
... nun im einzelnen ...

@ ivan
... es ist richtig, dass das Fenster beim Aufruf des Uploadformulars kurz geöffnet und gleich wieder geschlossen wird ...
... das liegt an der Funktionsweise des Scripts ... event. kann man das noch optimieren ...
... das nach dem Laden das Fenster nicht geschlossen wird ? ... hast du das mal im IE probiert ... ?
... das mit der Passworteingabe liegt an der progress.php im Admin-Ordner mit "require('admin_global.php');" ...
... es ist also doch besser eine progress_2.php bzw. -.html wie oben im Vorwort beschrieben zu erstellen ...
... in dieser Datei sollte dann "require('admin_global.php');"  nicht erscheinen ...
... so läuft es auch auf meiner Seite ...
... ich werde die MOD-Beschreibung dahingehend nochmals ändern ...

@ grafcux
... siehe @ ivan ...

@ tdkpaul
... hast du dir eine neue progress_2.php erstellt, so dass bei dir alles problemlos läuft ... ?
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 JensF

  • Addicted member
  • ******
  • Posts: 1.028
    • View Profile
    • http://www.terraristik-galerie.de
Re: [MOD] Progress Popup for Image Upload
« Reply #6 on: August 12, 2006, 09:00:03 PM »
Hallo zusammen,

ich habe das eben auch mal eingebaut und kann mich dem Problem der anderen nur anschließen.

Das Fenster schließt sich leider nicht von alleine wenn der Upload abgeschlossen ist.

Außerdem muss der Pop-Up Blocker abgeschaltet werden sonst beschwert sich der Browser. Und ich denke das kann man von niemanden verlangen das er den Blocker abschaltet, oder?
Gibt es dafür vielleicht noch ne andere Lösung???
Mit freundlichem Gruß
Jens Funk



-> Sorry for my bad English <-

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: [MOD] Progress Popup for Image Upload
« Reply #7 on: August 13, 2006, 01:51:21 PM »
@ JensF

... ich hätte noch eine andere Lösung, mit Layern ...
... schau mal hier -> http://www.4homepages.de/forum/index.php?topic=14008.msg75746#msg75746 ...
... nur wurde sich halt dort für diese Variante mit Popup entschieden ...
... das Schließen des Popupfensters muss ich noch mal überprüfen ...
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 JensF

  • Addicted member
  • ******
  • Posts: 1.028
    • View Profile
    • http://www.terraristik-galerie.de
Re: [MOD] Progress Popup for Image Upload
« Reply #8 on: August 13, 2006, 02:56:27 PM »
Wo finde ich denn die Version mit Layern bei dir?? Habe eben im Forum und in der Download Area geschaut aber entweder bin ich blind oder es ist nicht da :)
Mit freundlichem Gruß
Jens Funk



-> Sorry for my bad English <-

Offline tdkpaul

  • Full Member
  • ***
  • Posts: 205
    • View Profile
Re: [MOD] Progress Popup for Image Upload
« Reply #9 on: August 17, 2006, 04:53:59 PM »
falls es hier jemand geschafft hat, so poste bitte die Lösung.
Das Problem mit dem Popblocker habe ich leider auch.


Falls nicht auch egal.
Wäre aber praktisch, da man nicht so recht weiß als Newbie ob das Bild gerade geupt wird. Allein die Statusanzeige unten links im Browser verrät über einen Uplaodvorgang

Offline macmaster_it

  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: [MOD] Progress Popup for Image Upload
« Reply #10 on: August 25, 2006, 02:56:37 PM »
Hi Leute, hab heut mal an dem Mod rumgespielt. Ergebnis: Totalumbau!!
also macht alles wieder rückgängig und folgt mir....
damit es alle verstehen, wechsel ich auf englisch...Mit der Bitte meinen geänderten Mod an 1.Stelle zu setzten und den "Versuch" zu entfernen...


Hi all,
after I've add this Mod at my Homepage it don't work exaktly and I have changed it totally.
And now it works fine.
Remake all modifications and lat beginn anotherone...

File to modify:
  • ./template/<yourtemplate>/member.html
  • ./template/<yourtemplate>/member_uploadform.html
  • ./lang/english/main.php
  • ./lang/deutsch/main.php

File to make:
  • ./progress_2.php

File:
./template/<yourtemplate>/member.html

after:
Code: [Select]
{header}add:
Code: [Select]
<script language="JavaScript">
    <!--
    var statusWin, toppos, leftpos;
    toppos = (screen.height - 401)/2;
    leftpos = (screen.width - 401)/2;
    function showProgress() {
      statusWin = window.open('progress_2.php','Status','height=150,width=350,top='+toppos+',left='+leftpos+',location=no,scrollbars=no,menubars=no,toolbars=no,resizable=yes');
      statusWin.focus();
    }

    function hideProgress() {
      if (statusWin != null) {
        if (!statusWin.closed) {
          statusWin.close();
        }
      }
    }
   // -->
</script>
{hideProgress}
at the end before:
Code: [Select]
[footer}add:
Code: [Select]
<script language=javascript>
   <!--
   showProgress();
   hideProgress();
   // -->
</script>

File:
./template/<yourtemplate>/member-upload.html

at the top of the file ad:
Code: [Select]
<script language="JavaScript">
    <!--
    var statusWin, toppos, leftpos;
    toppos = (screen.height - 401)/2;
    leftpos = (screen.width - 401)/2;
    function showProgress() {
      statusWin = window.open('progress_2.php','Status','height=150,width=350,top='+toppos+',left='+leftpos+',location=no,scrollbars=no,menubars=no,toolbars=no,resizable=yes');
      statusWin.focus();
    }
   // -->
</script>
then find:
Code: [Select]
    <input type="submit" name="uploadbutton" value="{lang_submit}" class="button" />
and replace with
Code: [Select]
    <input type="submit" name="uploadbutton" value="{lang_submit}" class="button" onClick="showProgress()" />

File:
./lang/english/main.php
find:
[qcode]$lang['new_upload_validate_desc'] = "Your image will be validated once it has been reviewed.";[/qcode]
and add after:
Code: [Select]
$lang['upload_progress'] = "File upload in progress....";
$lang['upload_progress_desc'] = "This window will close automatically once the upload is completed.";


File:
./lang/deutsch/main.php
find:
Code: [Select]
$lang['new_upload_validate_desc'] = "Nach Überprüfung durch einen Administrator wird Ihr Bild freigeschaltet.";
and add after:
Code: [Select]
$lang['upload_progress'] = "Datei wird hochgeladen....";
$lang['upload_progress_desc'] = "Dieses Fenster schliesst sich automatisch,<br/>wenn der Datei-Upload beendet ist.";

than create File:
progress_2.php

(in the Root-Directory)
with this code:
Code: [Select]
<?php
/**************************************************************************
 *                                                                        *
 *    4images - A Web Based Image Gallery Management System               *
 *    ----------------------------------------------------------------    *
 *                                                                        *
 *             File: progress.php                                         *
 *        Copyright: (C) 2002 Jan Sorgalla                                *
 *            Email: jan@4homepages.de                                    *
 *              Web: http://www.4homepages.de                             *
 *    Scriptversion: 1.7.3                                                *
 *                                                                        *
 *    Never released without support from: Nicky (http://www.nicky.net)   *
 *                                                                        *
 **************************************************************************
 *                                                                        *
 *    Dieses Script ist KEINE Freeware. Bitte lesen Sie die Lizenz-       *
 *    bedingungen (Lizenz.txt) für weitere Informationen.                 *
 *    ---------------------------------------------------------------     *
 *    This script is NOT freeware! Please read the Copyright Notice       *
 *    (Licence.txt) for further information.                              *
 *                                                                        *
 *************************************************************************/

define('ROOT_PATH''./');
include(
ROOT_PATH.'global.php');

?>

<html>
<head>
<title><?php echo $lang['upload_progress']; ?><</title>
<link rel="stylesheet" href="./admin/cpstyle.css">
<script language="javascript1.2">
<!--
var start_pad = 2;
var end_pad = 2;
var sel = 0;
var mod = 3;
var timer;

var image_on = new Image();
image_on.src = 'admin/images/arrow.gif';
var image_off = new Image();
image_off.src = 'admin/images/spacer.gif';

function animate() {
  for (var i = start_pad; i < document.images.length - end_pad; i++) {
    if (i % mod == sel) {
      document.images[i].src = image_on.src;
    }
    else {
      document.images[i].src = image_off.src;
    }
  }
  sel++;
  if (sel == mod) {
    sel = 0;
  }
  start_animation();
}

function start_animation() {
  timer=window.setTimeout("animate();",250);
}

function stop_animation() {
  window.clearTimeout(timer);
}

// -->
</script>
</head>

<body onload="start_animation()">
<center>
<span class="title"><?php echo $lang['upload_progress']; ?></span>
<p>
<?php echo $lang['upload_progress_desc']; ?>
<p>
<table border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td> <img src="admin/images/folder_big.gif"> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/spacer.gif" width="8" height="11" /> </td>
  <td> <img src="admin/images/folder_big.gif" /> </td>
 </tr>
</table>
</center>
</body>

OK
that's all folk's

upload all files and have fun....

Thank's for the Idea!!!

Offline tdkpaul

  • Full Member
  • ***
  • Posts: 205
    • View Profile
Re: [MOD] Progress Popup for Image Upload
« Reply #11 on: August 25, 2006, 07:10:47 PM »
BIG BIG BIG BIG BIG Thanx  :D :D :D


it is very nice

Offline JensF

  • Addicted member
  • ******
  • Posts: 1.028
    • View Profile
    • http://www.terraristik-galerie.de
Re: [MOD] Progress Popup for Image Upload
« Reply #12 on: August 31, 2006, 11:10:07 AM »
Quote
Hi Leute, hab heut mal an dem Mod rumgespielt. Ergebnis: Totalumbau!!
also macht alles wieder rückgängig und folgt mir....

Hi,

habe das jetzt mal getestet aber das funzt auch nicht.

1. Stört wieder der Pop-Up Blocker (weiso stört der nicht wenn das Fenster im Admin Bereich aufgeht wenn man direkt was hochlädt??)

2. Das Pop-Up öffnet sich nicht wenn das Bild hochgeladen wird sondern sobald man die member_uploadform aufruft. Also viel zu früh :)


Beim wem funktioniert das ganze denn ohne Probleme???
Mit freundlichem Gruß
Jens Funk



-> Sorry for my bad English <-

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: [MOD] Progress Popup for Image Upload
« Reply #13 on: August 31, 2006, 11:37:45 AM »
Beim wem funktioniert das ganze denn ohne Probleme???

... bei mir ...  :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 JensF

  • Addicted member
  • ******
  • Posts: 1.028
    • View Profile
    • http://www.terraristik-galerie.de
Re: [MOD] Progress Popup for Image Upload
« Reply #14 on: August 31, 2006, 12:27:50 PM »
Beim wem funktioniert das ganze denn ohne Probleme???

... bei mir ...  :wink:

und da stört kein Pop-Up Blocker???
Mit freundlichem Gruß
Jens Funk



-> Sorry for my bad English <-