file upload progress bar/meter

[TeraBIT]

dopo parecchie ricerche sono rimasto anche con la confusione su dove postare visto che il problema non si risolve con un linguaggio solo

ho inserito in un sito wordpress un form per l'invio di file come allegati a delle bozze di articoli, tale TDO mini form che gestisce egregiamente il caricamento e il posizionamento dei file nella cartella corrispondente all'articolo,
tuttavia non viene dato alcun feedback visivo all'utente durante il caricamento e su file di grosse dimensioni diventa alquanto frustrante non riuscire a capire a che punto sia l'operazione, quello che vorrei fare è quindi integrare nel form uno script che si metta "in ascolto" quando il file viene caricato e dia informazioni all'utente come la percentuale del caricamento e il tempo stimato per finire.

insomma non mi serve un sistema di upload ex novo, ma un metro da aggiungere a quello di TDO, ho trovato alcune soluzioni in flash miste a jquery, altre AJAX che richiedono però l'installazione di APC ma sono in hosting condiviso su aruba...nsomma inizia a scoppiarmi la testa, un indizio per andare sulla strada giusta?

[TeraBIT]

la suddetta progress bar/meter andrebbe integrata nel file in oggetto, vi posto il codice così magari dandogli un occhiata vi fate un idea più precisa, ho inserito un paio di commenti html nel form per tenere sott'occhio le aree di interesse, questa è la prima parte, il php che gestisce materialmente l'operazione:

<?php

// Disable revisions *before* everything else
//
define('WP_POST_REVISIONS', false);

//////////////////////////
// Inline upload!       //
//////////////////////////

// 1. User uploads files to a temporary area. Files will be deleted within an
//    hour if not "claimed"
// 2. User submits post.
// 3. Widget copies the files from a temporary area to their proper location and
//    updates post with info about claimed files.
//
// * If post is deleted, files are automatically deleted
// * No direct links to files are exposed (as long as the admins specify a
//   location not directly exposed to the web)

// Session start
//
#if (!isset($_SESSION)) session_start();

// Load up Wordpress
//
$wp_load = realpath("../../../wp-load.php");
if(!file_exists($wp_load)) {
  $wp_config = realpath("../../../wp-config.php");
  if (!file_exists($wp_config)) {
      exit("Can't find wp-config.php or wp-load.php");
  } else {
      require_once($wp_config);
  }
} else {
  require_once($wp_load);
}

// enable all PHP errors
//
if(get_option(TDOMF_OPTION_EXTRA_LOG_MESSAGES) && !get_option(TDOMF_OPTION_DISABLE_ERROR_MESSAGES)) {
  error_reporting(E_ALL);
}

// loading text domain for language translation
//
load_plugin_textdomain('tdomf',PLUGINDIR.DIRECTORY_SEPARATOR.TDOMF_FOLDER);

// Get and verify Form Id
//
if(isset($_REQUEST['tdomf_form_id'])){
  $form_id = intval($_REQUEST['tdomf_form_id']);
} else {
  tdomf_log_message("Inline Upload Form: No form id found!",TDOMF_LOG_BAD);
  exit("TDOMF: No Form ID found");
}
if(!tdomf_form_exists($form_id)) {
  tdomf_log_message("Inline Upload Form: A form id of a non-existant form used $form_id!",TDOMF_LOG_BAD);
  #unset($form_data['tdomf_form_id']);
  #tdomf_save_form_data($form_id,$form_data);
  exit("TDOMF: Bad Form ID");
}
// Get widget instance id
$index = '';
if(isset($_REQUEST['index'])) {
    $index = $_REQUEST['index'];
}

// kick of any widgets taht care!
//
do_action('tdomf_upload_inline_form_start',$form_id,tdomf_generate_default_form_mode($form_id));

// Get form data
//
$form_data = tdomf_get_form_data($form_id);
// is form good?
$all_good = true; 

// First pass security check
//
$tdomf_verify = get_option(TDOMF_OPTION_VERIFICATION_METHOD);
if($tdomf_verify == false || $tdomf_verify == 'default') {
  if(isset($form_data['tdomf_upload_key_'.$form_id.'_'.$index]) && isset($_POST['tdomf_upload_key_'.$form_id.'_'.$index]) && $form_data['tdomf_upload_key_'.$form_id.'_'.$index] != $_POST['tdomf_upload_key_'.$form_id.'_'.$index]){
     #tdomf_log_message_extra("Upload form submitted with bad key from ".$_SERVER['REMOTE_ADDR']." !",TDOMF_LOG_BAD);
     unset($form_data['tdomf_upload_key_'.$form_id.'_'.$index]); // prevents any "operations" on uploads
     $all_good = false;
     #exit("TDOMF: Bad data submitted");
  }
} else if($tdomf_verify == 'wordpress_nonce') {
  if(!isset($_POST['tdomf_upload_key_'.$form_id.'_'.$index]) || !wp_verify_nonce($_POST['tdomf_upload_key_'.$form_id.'_'.$index],'tdomf-form-upload-'.$form_id.'-'.$index)) {
    unset($form_data['tdomf_upload_key_'.$form_id.'_'.$index]);
    $all_good = false;
  }
}

// URL for this form
$tdomf_upload_inline_url = TDOMF_URLPATH . 'tdomf-upload-inline.php';

// Permissions check
//
if(!tdomf_can_current_user_see_form($form_id)) {
  tdomf_log_message("Someone with no permissions tried to access the inline-uplaod form!",TDOMF_LOG_BAD);
  unset($form_data['tdomf_upload_key_'.$form_id.'_'.$index]);
  $all_good = false;
  tdomf_save_form_data($form_id,$form_data);
  exit("TDOMF: Bad permissions");
}

// Widget in use check
//
if((empty($index) && !in_array("upload-files",tdomf_get_widget_order($form_id))) ||
   (!empty($index) && !in_array("upload-files".$index,tdomf_get_widget_order($form_id)))) {
  unset($form_data['tdomf_upload_key_'.$form_id.'_'.$index]);
  tdomf_save_form_data($form_id,$form_data);
  exit("TDOMF: Upload feature not yet enabled");
}

// Grab options for uploads
//
#$options = tdomf_widget_upload_get_options($form_id);
global $tdomf_widget_uploadfiles;
$options = $tdomf_widget_uploadfiles->getOptions($form_id,$index);

// Placeholder for error messages
//
$errors = "";

// Files recorded in session
//
$sessioncount = 0;
$mysessionfiles = array();

// Files uploaded now
//
$myfiles = array();
$count = 0;

// Double check files in $_SESSION!
//
if(isset($form_data['uploadfiles_'.$form_id.'_'.$index])) {
  $sessioncount = 0;
  $mysessionfiles = $form_data['uploadfiles_'.$form_id.'_'.$index];
  for($i =  0; $i < $options['max']; $i++) {
    if(/*isset($mysessionfiles[$i]['path']) &&*/ !file_exists($mysessionfiles[$i]['path'])) {
      unset($mysessionfiles[$i]);
    } else {
      $sessioncount++;
    }
  }
}

// Allowed file extensions (used when file is uploaded and in javascript)
//
$allowed_exts = explode(" ",strtolower($options['types']));

// Only do actions if key is good!
//
if($all_good) {

  // Delete files at user request
  //
  if(isset($_POST['tdomf_upload_inline_delete_all_'.$form_id.'_'.$index])) {
    for($i =  0; $i < $options['max']; $i++) {
      tdomf_delete_tmp_file($mysessionfiles[$i]['path']);
    }
    $mysessionfiles = array();
    $sessioncount = 0;
    unset($form_data['uploadfiles_'.$form_id.'_'.$index]);
  }

  // Only worry about uploaded files if the upload secruity key is good
  //
  else if(isset($_POST['tdomf_upload_inline_submit_'.$form_id.'_'.$index])) {

    // Move the uploaded file to the temp storage path
    //
    for($i =  0; $i < $options['max']; $i++) {
      $upload_temp_file_name = $_FILES["uploadfile".$form_id.'_'.$index."_".$i]['tmp_name'];
      $upload_file_name = sanitize_file_name($_FILES["uploadfile".$form_id.'_'.$index."_".$i]['name']);
      $upload_error = $_FILES["uploadfile".$form_id.'_'.$index."_".$i]['error'];
      $upload_size = $_FILES["uploadfile".$form_id.'_'.$index."_".$i]['size'];
      $upload_type = $_FILES["uploadfile".$form_id.'_'.$index."_".$i]['type'];
      if(is_uploaded_file($upload_temp_file_name)) {
        // double check file extension
        $ext = strtolower(strrchr($upload_file_name,"."));
        if(in_array($ext,$allowed_exts)) {
          $storagepath = tdomf_create_tmp_storage_path($form_id,$index);
          $uploaded_file = $storagepath.DIRECTORY_SEPARATOR.$upload_file_name;
          tdomf_log_message_extra("Saving uploaded file to $uploaded_file");
          // Save the file
          if(move_uploaded_file($upload_temp_file_name,$uploaded_file)) {
            $uploaded_file = realpath($uploaded_file);
            // Remember the file
            $myfiles[$i] = array( "name" => $upload_file_name, "path" => $uploaded_file, "size" => $upload_size, "type" => $upload_type );
            $count++;
            tdomf_log_message("File $upload_file_name saved to tmp area as $uploaded_file. It has a size of $upload_size and type of $upload_type" );
            // within an hour, delete the file if not claimed!
            wp_schedule_single_event( time() + TDOMF_UPLOAD_TIMEOUT, 'tdomf_delete_tmp_file_hook', array($uploaded_file) );
          } else {
            tdomf_log_message("move_uploaded_file failed!");
            $errors .= sprintf(__("Could not move uploaded file %s to storage area!
","tdomf"),$upload_file_name);
          }
        } else {
          tdomf_log_message("file $upload_file_name uploaded with bad extension: $ext");
          $errors .= sprintf(__("Files with %s extensions are forbidden.
","tdomf"),$ext);
        }
      } else if($upload_error != 0 && !empty($upload_file_name)){
        tdomf_log_message("There was a reported error $upload_error with the uploaded file!");
        switch($upload_error) {
          case 1 :
            $errors .= sprintf(__("Sorry but %s was too big. It exceeded the server configuration.
","tdomf"),$upload_file_name);
            break;
          case 2:
            $errors .= sprintf(__("Sorry but %s was too big. It was greater than %s. It exceeded the configured maximum.
","tdomf"),$upload_file_name,tdomf_filesize_format($options['size']));
            break;
          case 3:
            $errors .= sprintf(__("Sorry but only part of %s was uploaded.
","tdomf"),$upload_file_name);
            break;
          case 4:
            $errors .= __("Sorry file does not exist.
","tdomf");
            break;
          default;
            $errors .= sprintf(__("Upload of %s failed for an unknown reason. (%s)
","tdomf"),$upload_file_name,$upload_error);
            break;
        }
      } else {
        tdomf_log_message_extra("No file here",TDOMF_LOG_ERROR);
      }
    }
    // Store in session!
    $mysessionfiles = array_merge($myfiles, $mysessionfiles);
    $form_data['uploadfiles_'.$form_id.'_'.$index] = $mysessionfiles;
    // Recount
    $sessioncount = 0;
    for($i =  0; $i < $options['max']; $i++) {
      if(/*isset($mysessionfiles[$i]['path']) &&*/ file_exists($mysessionfiles[$i]['path'])) {
        $sessioncount++;
      }
    }
  }
}

// Create new security key
//
unset($form_data['tdomf_upload_key_'.$form_id.'_'.$index]);
tdomf_save_form_data($form_id,$form_data);
$form_data = tdomf_get_form_data($form_id);
//
if($tdomf_verify == 'wordpress_nonce' && function_exists('wp_create_nonce')) {
  $nonce_string = wp_create_nonce( 'tdomf-form-upload-'.$form_id.'-'.$index );
  $form_data["tdomf_upload_key_".$form_id.'_'.$index] = $nonce_string;
} else if($tdomf_verify == 'none') {
    // do nothing! Bad :(
} else {
  $upload_key = tdomf_random_string(100);
  $form_data["tdomf_upload_key_".$form_id.'_'.$index] = $upload_key;
}
//
tdomf_save_form_data($form_id,$form_data);
$form_data = tdomf_get_form_data($form_id);

// Now the fun bit, the actually form!
//
?>

[TeraBIT]

questa è la seconda parte (si trova tutto nello stesso file), il form viene inscatolato in un iframe e presentato nella pagina in cui viene richiesto tramite shortcode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<?php tdomf_stylesheet(); ?>
<script type="text/javascript">
// <![CDATA[
function endsWith(str,ends){
   var startPos = str.length - ends.length;
   if (startPos < 0) {
      return false;
   }
   return (str.lastIndexOf(ends, startPos) == startPos);
}
function validateFile(id,msg) {
  var e1 = document.getElementById(id);
  if(e1 != null) {
    var f = e1.value.toLowerCase();
    if(f.length > 0) {
      <?php foreach($allowed_exts as $e) {
        if(!empty($e)) { ?>
          if(endsWith(f,"<?php echo $e; ?>")) { return true; }
      <?php } } ?>
    } else {
      // Nothing to validate so okay
      return true;
    }
    if(msg) {
      alert("<?php printf(__("The file must be of type %s!","tdomf"),$options['types']); ?>");
    }
    return false;
  }
  // Nothing to validate so okay
  return true;
}
function validateForm() {
  <?php for($i =  0, $j = 0; $i < $options['max']; $i++) { ?>
  if(!validateFile('uploadfile<?php echo $form_id; ?>_<?php echo $i; ?>'),false) {
    var f = document.getElementById('uploadfile<?php echo $form_id; ?>_<?php echo $i; ?>').value;
    alert( "<?php printf(__('File %s has a bad extension and cannot be upload!','tdomf'),'" + f + "'); ?>" );
    return false;
  }
  <?php } ?>
  return true;
}
// ]]>
</script>
</head>
<body>

<?php if($errors != "") { ?>
  <div class="tdomf_upload_inline_errors">
  <?php echo $errors; ?>
  </div>
<?php } ?>

<form name="tdomf_upload_inline_form" id="tdomf_upload_inline_form" enctype="multipart/form-data" method="post" action="<?php echo $tdomf_upload_inline_url; ?>"  >
  <?php if(isset($form_data['tdomf_upload_key_'.$form_id.'_'.$index])) { ?>
  <input type='hidden' id='tdomf_upload_key_<?php echo $form_id; ?>_<?php echo $index; ?>' name='tdomf_upload_key_<?php echo $form_id; ?>_<?php echo $index; ?>' value='<?php echo $form_data['tdomf_upload_key_'.$form_id.'_'.$index]; ?>' >
  <?php } ?>
  <input type='hidden' name='MAX_FILE_SIZE' value='<?php echo $options['size']; ?>' />
  <input type='hidden' id='tdomf_form_id' name='tdomf_form_id' value='<?php echo $form_id; ?>' />
  <input type='hidden' id='index' name='index' value='<?php echo $index; ?>' />
  <?php if($sessioncount > 0) { ?>
  

<?php _e("Your files will be kept on the server for 1 hour. You must submit your post before then.","tdomf"); ?></p>
  <?php } ?>
  <?php if($sessioncount < $options['max']) { ?>
  

[size="1"]
  <?php printf(__("Max File Size: %s","tdomf"),tdomf_filesize_format($options['size'])); ?>

  <?php printf(__("Allowable File Types: %s","tdomf"),$options['types']); ?>

  [/size]</p>
  <?php } ?>
  <?php for($i =  0, $j = 0; $i < $options['max']; $i++) {
      if(isset($mysessionfiles[$i])) { ?>
        <input type='hidden' name='deletefile[]' value="<?php echo $i; ?>" />
        <?php printf(__("[i]%s[/i] (%s) Uploaded","tdomf"),$mysessionfiles[$i]['name'],tdomf_filesize_format($mysessionfiles[$i]['size'])); ?>
        

    <?php } else {
      if(($sessioncount + $j) < $options['min']) { ?> 
        <label for='uploadfile<?php echo $form_id; ?>_<?php echo $index; ?>_<?php echo $i; ?>' class='required'>
      <?php } else { ?>
        <label for='uploadfile<?php echo $form_id; ?>_<?php echo $index; ?>_<?php echo $i; ?>'>
      <?php } _e("Upload: ","tdomf"); $j++; ?>
      <input type='file' name='uploadfile<?php echo $form_id; ?>_<?php echo $index; ?>_<?php echo $i; ?>' id='uploadfile<?php echo $form_id; ?>_<?php echo $index; ?>_<?php echo $i; ?>' size='30' onChange="validateFile('uploadfile<?php echo $form_id; ?>_<?php echo $i; ?>',true);" /></label>

  <?php } }?>
  <?php if($sessioncount < $options['max']) { ?>
  <input type="submit" id="tdomf_upload_inline_submit_<?php echo $form_id; ?>_<?php echo $index; ?>" name="tdomf_upload_inline_submit_<?php echo $form_id; ?>_<?php echo $index; ?>" value="<?php _e("Upload Now!","tdomf"); ?>" />
  <?php } ?>
  <?php if($sessioncount > 0) { ?>
  <input type="submit" id="tdomf_upload_inline_delete_all_<?php echo $form_id; ?>_<?php echo $index; ?>" name="tdomf_upload_inline_delete_all_<?php echo $form_id; ?>_<?php echo $index; ?>" value="<?php _e("Delete All!","tdomf"); ?>" />
  <?php } ?>
</form>

</body>

[Santino83_02]

io ho usato con soddisfazione swfupload per dare il feedback dell'upload... comunque una soluzione veloce potrebbe essere che al submit del form, il form scompare e al suo posto metti una bella gif animata con la ruotina che gira e la scritta "uploading file"... abbastanza soddisfacente e veloce da realizzare

[TeraBIT]

eh lo sò ma il problema è che il form deve essere usato per caricare dei file video, i quali superano facilmente la decina di mega e a prescindere dalla larghezza di banda ci vuole parecchio tempo a caricarli, senza un feedback reale la pagina sembra morta

cmq mi servirebbe un indizio in tal senso, sono riuscito ad implementare nel form di cui sopra la jQuery progress bar, ho inserito il div seguendo le istruzioni ma con stile inline display:none, ho quindi aggiunto alla riga 378 in corrispondenza dell'output successivo al caricamento un echo con <style>#UploadProgressbar {display:block !important;}</style>, in questo modo dopo il caricamento la barra compare, inoltre legandola alla funzione che ho trovato in questo articolo la barra si muove fino al completamento,
insomma funziona e ci siamo quasi, quello che mi serve adesso è :

1 - vincolare l'apparizzione della barra allo stadio intermedio tra il form iniziale e il caricamento effettuato, insomma dopo il submit del form quando il file viene caricato ovviamente

2 - vincolare la funzione di aggiornamento della barra allo stato attuale dell'upload

intanto provo a studiare il funzionamento di questa demo per vedere se riesco a capire dove mettere le mani...

[TeraBIT]

la maggior parte delle fonti che trovo in rete richiedono l'installazione delle librerie APC per php al fine di ottenere lo stato dell'upload da passare alla progressbar jquery...io però sono su hosting condiviso e non ho possibilità di estendere il php nè tanto meno di metter mano poi al php.ini per inserire il parametro necessario al suo funzionamento...

non credo di essere il primo ad affrontare questa problematica, però non riesco a trovare neppure un indizio su come affrontare il problema...suggerimenti?

[TeraBIT]

up!

[TeraBIT]

ho legato l'apparizione della barra al caricamento inserendo nella riga iniziale del form

onsubmit="showProgress()"

ho quindi creato una funzione che aggiunge dentro un contenitore invisibile lo stile per farla apparire

function showProgress()
{//fa apparire la barra causa maggiore specificità
	document.getElementById("stile").innerHTML += '<style>#UploadProgressbar {display:block ;}</style>';
}

infine ho inserito nell'eco del caricamento effettuato una controregola che non faccia apparire la barra al submit del tasto per cancellare i file caricati

 <?php for($i =  0, $j = 0; $i < $options['max']; $i++) {
      if(isset($mysessionfiles[$i])) { ?>
        <input type='hidden' name='deletefile[]' value="<?php echo $i; ?>" />
        <?php printf(__("[i]%s[/i] (%s) Uploaded","tdomf"),$mysessionfiles[$i]['name'],tdomf_filesize_format($mysessionfiles[$i]['size']));
        /*!!!EVITA LA RICOMPARSA DELLA BARRA CANCELLANDO I FILE!!!*/ echo '<style>#UploadProgressbar {display:none !important;}</style>'; ?>

resta un unica cosa da risolvere...fare in modo che la barra mostri il reale stato dell'aggiornamento...attualmente è mossa da una funzione che la aggiorna di +1% ogni tot millisecondi finchè non raggiunge il 100 :

  $(document).ready(function() {
	  
   // $("#UploadProgressbar").progressbar({ value: 66 }); //IMPOSTA LA BARRA A UN VALORE PREDEFINITO
	
	$(function() {
		ufNow=5; //variabile valore!!
$("#UploadProgressbar").progressbar({ value: ufNow });
setTimeout(updateProgress, 500);
});

function updateProgress() {
  var progress;
  progress = $("#UploadProgressbar")
    .progressbar("option","value");
  if (progress < 100) {
      $("#UploadProgressbar")
        .progressbar("option", "value", progress + 1);
      setTimeout(updateProgress, 500);
  }
}
	
  });

ma così com'è si comporta come una giffona...come gli si passa il valore reale senza le estensioni APC e simili? ho trovato questo tutorial che pare usi apache per lo stato ma non capisco come funziona...

[TeraBIT]

ho tentato invano l'installazione di PEAR tramite ftp seguendo questa guida per aruba e queste informazioni per riparare un errore nel recupero di alcuni file da installare, ma la procedura fallisce lo stesso

Preparing installer..................

Warning: include_once(Config.php) [function.include-once]: failed to open stream: No such file or directory in /web/htdocs/www.miosito.it/home/go-pear.php on line 754

Warning: include_once() [function.include]: Failed opening 'Config.php' for inclusion (include_path='/web/htdocs/www.miosito.it/home/temp') in /web/htdocs/www.miosito.it/home/go-pear.php on line 754

Warning: include_once(Command.php) [function.include-once]: failed to open stream: No such file or directory in /web/htdocs/www.miosito.it/home/go-pear.php on line 755

Warning: include_once() [function.include]: Failed opening 'Command.php' for inclusion (include_path='/web/htdocs/www.miosito.it/home/temp') in /web/htdocs/www.miosito.it/home/go-pear.php on line 755

Warning: include_once(Registry.php) [function.include-once]: failed to open stream: No such file or directory in /web/htdocs/www.miosito.it/home/go-pear.php on line 756

Warning: include_once() [function.include]: Failed opening 'Registry.php' for inclusion (include_path='/web/htdocs/www.miosito.it/home/temp') in /web/htdocs/www.miosito.it/home/go-pear.php on line 756

Fatal error: Class 'PEAR_Config' not found in /web/htdocs/www.miosito.it/home/go-pear.php on line 759

a questo punto mi arrendo, è evidente che utilizzare librerie php APC su un hosting condiviso è impossibile...mi sembra inverosimile però che solo per fare uso di una cosa tanto elementare come una progress bar si debba per forza ricorrere ad hosting dedicati spendendo vagonate di soldi al mese...
l'unica alternativa sono allora le soluzioni in flash come suggerito da Santino83_02, lo stesso file uploader integrato in wordpress mostra un progressbar flash caricando file sul server quindi in teoria dovrebbe funzionare, però c'è il problema di riuscire ad integrare una soluzione flash con il form php già esistente in modo da non alterare la gestione e destinazione dei file ricevuti, mi servono solo le informazioni sullo stato dell'upload (progress bar/tempo rimanente)...

basilarmente vorrei ottenere il risultato della prima demo (Basic Demo) :
http://www.uploadify.com/demos/

un aiutino?

[intaccabile]

io sono nelle stesse condizioni, mica hai trovato una soluzione?