Accedere ai files in una directory da codice javascript

[wood]

Buongiorno,
Sto creando un sito per un fotografo e mi servirebbe accedere dalla mia app React all'elenco dei files presenti in una data directory tramite url (ad esempio tramite una richiesta dal js della mia app attraverso useAxios all'url www.sito.altervista.org/imgs mi servirebbe ricevere come risposta un oggetto / array / stringa che presenti i nomi di tutti i files presenti nella cartella imgs)
Grazie mille!

[alemoppo]

Puoi farlo senza problemi con PHP, ad esempio utilizzando glob(). Se hai problemi nel farlo chiedi pure.

EDIT:
Forse se vuoi un array, è più semplice utilizzare scandir(), per poi passarlo (ad esempio in json?) con la json_encode().


Ciao!

[wood]

Ciao, grazie del consiglio!
Non so programmare in php purtroppo :/ sapresti dirmi cosa fare? Te ne sarei veramente grato!

[dreadnaut]

Purtroppo stai cercando di fare nel front-end quello che andrebbe fatto nel back-end, complicandoti la vita.

Come indicato da Alemoppo, glob() e json_encode() possono aiutarti. Al minimo, qualcosa del genere:

<?php
echo json_encode([
  'files' => glob('*.jpg'),
]);

[GraphOGLRisorse]

Salve,
questo è un semplice esempio:

<?php
foreach (glob("*.*") as $nomefile) {
  $result = $nomefile;
  echo  $result."</br>";
}
?>

ps. Non avevo visto il messaggio di dreadnaut.

Cordiali saluti.

[wood]

Grazie ad entrambi,
Scusate l'ignoranza ma il codice lo scrivo in un file qualsiasi .php o deve chiamarsi ad esempio index.php?
E deve essere in ogni directory per cui voglio una risposta dal js o solo un file nel root del sito basta?
Grazie ancora a tutti!

[GraphOGLRisorse]

Allora,
i file index con estensione php o html, si usano per le pagina pricipali di strutture come; siti, blog, forum, etc. Può usare un nome qualsiasi eccetto index.

E deve essere in ogni directory per cui voglio una risposta dal js o solo un file nel root del sito basta?

No, basta un file nella root dove mettere più cicli che fanno riferimento a i vari percorsi, assoluti o relativi a sua scelta, di cui ha necessità.

 <?php
// percorso assoluto
foreach (glob(cartella/"*.*") as $nomefile) {
  $result = $nomefile;
  echo  $result."</br>";
}
// percorso relativo
foreach (glob(./cartella/"*.*") as $nomefile) {
  $result = $nomefile;
  echo  $result."</br>";
}
?>

Cordiali saluti.

[darbula]

Se ricordo bene se devi esaminare la cartella thebest dopo la root puoi solamente con percorso assoluto /membri/nickname/thebest/ o /membri2/nickname/thebest/ i server condivisi purtroppo hanno bisogno di questa forma.
Pagina prova.php nella web root.
echo dirname(__FILE__); // /membri/nickname o /membri2/nickname indica sempre il percorso assoluto di quel file.

[dreadnaut]

Grazie ad entrambi,
Scusate l'ignoranza ma il codice lo scrivo in un file qualsiasi .php o deve chiamarsi ad esempio index.php?
E deve essere in ogni directory per cui voglio una risposta dal js o solo un file nel root del sito basta?
Grazie ancora a tutti!

Il codice che ho messo sopra elenca i file nella directory in cui si trova. Puoi salvarlo in un file .php con il nome che preferisci. Aprendone l'indirizzo via browser, vedrai un pezzo di JSON con l'elenco dei nomi. Se chiami il file index.php, viene usato come default quando l'indirizzo non contiene il nome della pagina.

# se lo chiami index.php
http://sito.altervista.org/album/index.php
http://sito.altervista.org/album/

# se gli dai un nome diverso
http://sito.altervista.org/album/elenco-json.php

Se vuoi l'elenco di un paio di directory, puoi copiare il file in ciascuna di esse. Se il numero cresce, ti conviene invece usare uno script solo, e prendere la directory come parametro. La questione si complica un poco:

<?php
# chiama questa pagina il parametro "album"
# e.g., http://sito.altervista.org/elenco-foto.php?album=brugole

# la directory del sito che contiene album e foto
define('PERCORSO_FOTO', './');

$album = isset($_GET['album']) ? $_GET['album'] : '';

# stiamo per usare 'album' come nome di una directory, quindi eliminiamo
# tutti i '../' per sicurezza
$percorso_album = str_replace('../', '', $album);

# assicuriamoci che il nome non cominci o finisca con '/'
$percorso_album = trim($percorso_album, '/');

# elenchiamo i file nella directory richiesta
$immagini = glob(PERCORSO_FOTO . $percorso_album . '/*.jpg');

# mandiamo in output l'elenco delle immagini
header('Content-Type: application/json');
echo json_encode([
  'album' => $percorso_album,
  # con 'basename' prendiamo solo i nomi dei file, eliminando il percorso
  'files' => array_map('basename', $immagini),
]);

[wood]

Grazie, vi spiego meglio la situazione comunque, il sito su cui sto lavorando è strutturato in modo da avere nella root principale / 3 cartelle chiamate Album, Slideshow e Inizio. Quello che mi serve è quindi aggiungere nella root principale un file che chiamo, ad esempio, response.php in cui scrivo all'interno:

<?php
foreach (glob(Album/"*.*") as $nomefile) {
$result = $nomefile;
echo $result."</br>";
}
foreach (glob(Slideshow/"*.*") as $nomefile) {
$result = $nomefile;
echo $result."</br>";
}
foreach (glob(Inizio/"*.*") as $nomefile) {
$result = $nomefile;
echo $result."</br>";
}
?>

Questo, quindi, mi permetterebbe di ricevere come risposta attraverso useAxios nel js (ad esempio da www.sito.altervista.org/Album) l'elenco dei files all'interno della cartella Album? Ho capito bene? E in che formato li rieverei?
Grazie a tutti per il supporto repentino!

[GraphOGLRisorse]

Attenzione, il nome cartellla e lo slash, fanno parte della stringa, quindi vanno dentro i doppi apici.

foreach (glob("album/*.*") as $nomefile) 

Può fare le prove eseguendo il file php creato con il codice. Nel codice la variabile $result viene stampata nel browser tramite echo, quindi può visualizzare le liste dei file.

E in che formato li rieverei?

In che senso?

I file risulteranno per es:
albun/File1.txt
albun/File2.txt
albun/File1.php
albun/File1.fpg
albun/.........

Nel caso desidera solo il nome senza il percorso, va modificato così:

foreach (glob("album/*.*") as $nomefile) {
    $result = pathinfo($nomefile);
    echo  $result[basename] ."</br>";
} 

Cordiali saluti.

[wood]

Grazie mille,
Intendevo dire in che formato li riceverei nella risposta di Axios (es. Json, un oggetto, un array, una stringa etc)

[GraphOGLRisorse]

Il coidce restituisce come valore una stringa.

Cordiali saluti

[wood]

Salve, ho due problemi:
il primo è che nessun url restituisce una risposta al seguente codice nella mia react app (stampa sempre server error)

const [{loading, data, error}] = useAxios('http://sito.altervista.org/Slideshow');
if (loading) return (<div>Loading...</div>);
if (error) return (<div>Server error</div>);
console.log(data);

Mi da i seguenti errori:
Access to XMLHttpRequest at 'http://sito.altervista.org/Slideshow' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET http://sito.altervista.org/Slideshow net::ERR_FAILED

il secondo è che l'unico modo di vedere i files è http://www.sito.altervista.org/response.php ma, per esempio, la cartella Album che contiene altre cartelle (e non direttamente immagini) ha solo 1 cartella visualizzata (mentre ce ne sarebbero in realtà 3). Devo modificare il codice per leggere anche le cartelle?
A seguire il testo stampato nel browser:

Album/Italia. Un paese maginifico
Slideshow/green-1072828_960_720.jpg
Slideshow/road-1072823_960_720.jpg
Slideshow/scotland-1761292_1920.jpg
Inizio/ImmagineInizio.jpg

Comunque non sto riuscendo quindi a passare al js della mia app react la risposta dei files presenti nella directory...
Grazie per il supporto!

[GraphOGLRisorse]

Ha abilitato le connessioni Server To Server?
Se non sono abilitate, puo farlo da qui.

Per informazioni, può guradare anche: Abilitare connesioni Server To Server.

Per ottenere il contenuto di tutte e 3 le cartelle, deve uare tre cicli, ognuno con il nome di una della cartelle, come aveva esposto nel messaggio # 10.

Le ricordo di stare attento ad includere il nome della cartella dentro i doppi apici, altrimenti non le finziona.

Cordiali saluti.

[wood]

Ho abilitato il collegamento esterno senza restrizioni nelle connessioni server to server e non mi da più il primo messaggio di errore, però continua a non andare a buon fine (persiste l'errore GET http://sito.altervista.org/Slideshow net::ERR_FAILED).

Questo è il codice che ho scritto nel response.php

<?php
foreach (glob("Album/*.*") as $nomefile) {
  $result = $nomefile;
  echo $result."</br>";
}
foreach (glob("Slideshow/*.*") as $nomefile) {
  $result = $nomefile;
  echo $result."</br>";
}
foreach (glob("Inizio/*.*") as $nomefile) {
  $result = $nomefile;
  echo $result."</br>";
}
?>

Inoltre per caso c'è un modo di iterare le cartelle dentro la cartella Album per farlo in automatico? Mi spiego meglio: vorrei solo dover aggiungere una cartella dentro Album senza dover aggiungere anche delle linee di codice nel php.

Un'ultima cosa: la richiesta Axios la devo fare a http://www.sito.altervista.org per ricevere tutti i dati o a http://www.sito.altervista.org/response.php, http://www.sito.altervista.org/Album, http://www.sito.altervista.org/Slideshow etc...?

Grazie mille

[GraphOGLRisorse]

Le metto un'altro codice che esegue la lista dei file presenti in tutte e 3 le cartelle.

<?
function ListaFile($base, $dir1, $dir2, $dir3)
{
  foreach(glob($base.'*') as $file){
      $tmp = pathinfo($file);
  }  
  
  if($dir_check = opendir($base)) 
  {
    while(($dir = readdir($dir_check))!==false) 
    {
      if($dir!="." && $dir!="..") 
      {
        if(is_dir($base. "/" .$dir)) 
        {
           ListaFile($base.'/'.$dir, $dir1, $dir2, $dir3); 
        }
        else
        {
           if($dir != "." && $dir != ".." && ($tmp[basename]==$dir1 || $tmp[basename]==$dir2 || $tmp[basename]==$dir3))
           {
               $result = $base.'/'.$dir;
           // codice contenete la funzione Axios 
           // esempio: useAxios($result);
               echo '<a href="'.$result.'">'.$result."</a><br>";
           }
       }
     }
   }   
   closedir($dir_check);
  
}else {echo "Percorso non valido";}
}    

// eseguzione della funzione
ListaFile("../", "Album", "Slideshow", "Inizio");
?>

Unica cosa, mettendo la lmitazione alle 3 cartelle, viene meno il rilevamento automtico delle sottocartelle. Al moento non ho trovato una soluzione valida per sitemare la cosa.

Comunque può facilmente aggiungere le sottocartelle, semplicemnte aggiungento il controllo del nome.

<?php
if($dir != "." && $dir != ".." && ($tmp[basename]==$dir1 || $tmp[basename]==$dir2 || $tmp[basename]==$dir3 || $tmp[basename]=="NomeCartella")) { }
?>

Per funzionare, il codice js per Axios va messo nel ciclo della funzione, dove c'e la parte commentata.

Intanto provi con questo, se riesco a risolvere la questione delle sottocartelle, la informo qui.

Cordiali saluti.

[dreadnaut]

(Per reinventare meno ruote, vedi anche DirectoryIterator e la versione ricorsiva.)

[wood]

Grazie per l'impegno,
purtroppo mi stampa sempre: Percorso non valido, forse sto sbagliando l'url a cui contatto?

il sito su cui sto lavorando è www.pierobosco.altervista.org (ho messo response.php nella root con il codice di GraphOGLRisorse).
Contattando www.pierobosco.altervista.org/response.php stampa sempre percorso non valido

Inoltre ancora non mi è chiaro a che url devo contattare per ottenere una risposta dal js (per caso www.pierobosco.altervista.org/response.php ?)

Nel caso il codice js di Axios sarebbe il seguente:

const [{loading, data, error}] = useAxios('http://pierobosco.altervista.org/response.php');
if (loading) return (<div>Loading...</div>);
if (error) return (<div>Server error</div>);
console.log(data);

È questo che devo sostituire a

// codice contenete la funzione Axios
// esempio: useAxios($result);

?

[darbula]

Per le richieste AJAX la url destinataria deve essere simile alla url iniziale.
Cioè http://nickname.altervista.org/percorso/ a http://nickname.altervista.org/altro_percorso/ ma il protocollo lo schema host e la porta devono essere uguali e cioè non puoi usare www prima e poi usi senza www.

[GraphOGLRisorse]

Nel caso il codice js di Axios sarebbe il seguente:

const [{loading, data, error}] = useAxios('http://pierobosco.altervista.org/response.php');
if (loading) return (<div>Loading...</div>);
if (error) return (<div>Server error</div>);
console.log(data);

È questo che devo sostituire a

// codice contenete la funzione Axios
// esempio: useAxios($result);

Sì, è quello.

Se si esegue il codice Axios con il link al file php dove c'è il codice che le ho dato, è normale che non funzioni.

Il codice per essere esguito va inserito nel seguente modo:

<?php
//resto del codice php

echo "<script>
const [{loading, data, error}] = useAxios('".$result."');
if (loading) return (<div>Loading...</div>);
if (error) return (<div>Server error</div>);
console.log(data);  
</script>";

//resto del codice php
?>

Coridali saluti.

[dreadnaut]

L'errore "Percorso non valido" è un messaggio definito nel codice di GraphOGLRisorse, che appare se non riesce a trovare le directory specificate. Stai chiamando la pagina giusta, me il codice è sbagliato (oltre che intricato).

Prova invece così:

<?php
$cartelle = [ 'Inizio', 'Slideshow' ] + glob('Album/*', GLOB_ONLYDIR);

$raccoglitore = function ($elenco, $cartella) {
  return $elenco + glob($cartella . '/*.{jpg,JPG}', GLOB_BRACE);
};

header('Content-Type: application/json');
echo json_encode([
  'immagini' => array_reduce($cartelle, $raccoglitore, []),
]);

Questo produce JSON, che dovrebbe essere più semplice da digerire in Javascript.

----

Detto questo, visto il sito che stai costruendo, mi sembra che ti stia complicando la vita. Inoltre, React è lo strumento sbagliato in questo caso: il sito sarà lento e pesante (soprattutto con molte foto), ed ostico per i motori di ricerca (poco niente senza Javascript). Se invece stai facendo esperimenti per imparare, buon lavoro!

[wood]

Grazie mille,
si un json sarebbe più gestibile.

In ogni caso però non mi visualizza tutte le immagini presenti nelle cartelle (anche se sono tutte jpg, inoltre se ci fossero dei png per esempio?)

Il mio problema principale comunque è il come ottenere una risposta dal javascript, ovvero come faccio ad ottenere quel json dal codice della mia app react? (comunque sto facendo un sito molto easy, soprattutto per sperimentare)

[GraphOGLRisorse]

Per includere altri formati, basta aggiunere l'estensione nel filtro di glob().

glob($cartella . '/*.{jpg,JPG,png,PNG}', GLOB_BRACE); 

Cordiali saluti.

[dreadnaut]

Lato Javascript, puoi usare fetch().

<script>
fetch('/response.php').then(data => console.log(data.json()));
</script>