DropZone dentro form - PHP

[FiloRp]

Ciao a tutti, dovrei aggiungere ad un form tramite dropzone delle foto.
Il form in questione ha già altri campi tra cui un id univoco arbitrario, e ad ogni id verranno associate più immagini.
Il DB MySQLi è già creato e logicamente funzionante, devo solo capire come trasferire le immagini in una determinata cartella (dalla quale verranno lette dal sito) e leggere il nome di ogni immagine per trasferirli, insieme a tutti i dati inseriti nel form, in un'altra pagina.

Grazie in anticipo

 

[Giacomo Furlan]

Ciao FiloRp,

credo tu stia mischiando involontariamente due tecnologie: frontend (HTML+CSS+JS) e backend (in questo caso PHP).

Frontend: la "drop zone" altro non è che un campo (di tipo file) mascherato da drop zone. L'esempio più semplice che ho trovato sulla rete è il seguente: https://css-tricks.com/drag-and-drop-file-uploading/ (puoi evitare tranquillamente di usare jQuery, tecnologia vetusta!)

Parlando esclusivamente del lato PHP invece, puoi gestire i file caricati tramite la variabile $_FILES. Sul sito di PHP c'è un esempio molto chiaro su come conoscere il nome del file temporaneo e di come spostarlo a piacere: http://php.net/manual/en/features.file-upload.post-method.php

 

[FiloRp]

Ciao FiloRp,

credo tu stia mischiando involontariamente due tecnologie: frontend (HTML+CSS+JS) e backend (in questo caso PHP).

Frontend: la "drop zone" altro non è che un campo (di tipo file) mascherato da drop zone. L'esempio più semplice che ho trovato sulla rete è il seguente: https://css-tricks.com/drag-and-drop-file-uploading/ (puoi evitare tranquillamente di usare jQuery, tecnologia vetusta!)

Parlando esclusivamente del lato PHP invece, puoi gestire i file caricati tramite la variabile $_FILES. Sul sito di PHP c'è un esempio molto chiaro su come conoscere il nome del file temporaneo e di come spostarlo a piacere: http://php.net/manual/en/features.file-upload.post-method.php

Confermo che all'inizio era così, avevo anche usato dell'ajax facendo un obrobrio.
Nel frattempo ho risolto molti dubbi ma ne ho molti altri che sono più complessi.

Sono riuscito ad inserire correttamente la dropzone nel form, ad inserire i file (immagini) ma ottengo i seguenti problemi:
- La query viene inviata correttamente e salvata nel DB ma non risultano variabili post nello strumento di debug dei browser
- L'immagine viene caricata correttamente graficamente nella dropzone ma non nella cartella segnalata nella varibile $pathname, pensavo fosse perchè viene inviata cliccando su "Invia" ma così non è, sembra che venga caricata immediatamente dopo il drop, non dopo il click sul pulsante del form.
- Le variabili $_FILES non ritornano niente, ottengo sempre l'errore "index not found" (parliamo del nome dell'immagine che viene caricata tramite form) quando clicco invio e quindi la seconda query (sono due query collegate tramite FK) non viene eseguita.

Se hai qualche idea per risolvere specialmente l'ultimo punto sarebbe fantastico.
Grazie in anticipo.

 

[Giacomo Furlan]

Ciao FiloRp!

Credo tu stia facendo effettivamente un po' di confusione :)

1. la chiamata al server è di tipo GET o POST?
2. se di tipo POST, ha comunque delle variabili GET? (ossia nell'URI qualcosa come variabile=valore&a=b&etc)

Anziché usare delle librerie che eseguono l'upload per te, potresti decidere di realizzare una versione base delle stesse esclusivamente per l'area di drag e drop, sfruttando gli eventi del DIV "bersaglio":

• dragenter (es. "illumini" l'area (ossia: gli cambi il colore di sfondo) per segnalare che hai il mouse sopra e puoi rilasciare il file)
• dragleave (es. rimuovi la precedente illuminazione)
• dragover (quando hai il mouse sopra al div di drop)
• drop (momento del drop con il quale, grazie ai dati ricevuti dall'evento, sei in grado di valorizzare il 'value' dell'input di tipo 'file')

 

[FiloRp]

Ciao FiloRp!

Credo tu stia facendo effettivamente un po' di confusione :)

1. la chiamata al server è di tipo GET o POST?
2. se di tipo POST, ha comunque delle variabili GET? (ossia nell'URI qualcosa come variabile=valore&a=b&etc)

Anziché usare delle librerie che eseguono l'upload per te, potresti decidere di realizzare una versione base delle stesse esclusivamente per l'area di drag e drop, sfruttando gli eventi del DIV "bersaglio":

• dragenter (es. "illumini" l'area (ossia: gli cambi il colore di sfondo) per segnalare che hai il mouse sopra e puoi rilasciare il file)
• dragleave (es. rimuovi la precedente illuminazione)
• dragover (quando hai il mouse sopra al div di drop)
• drop (momento del drop con il quale, grazie ai dati ricevuti dall'evento, sei in grado di valorizzare il 'value' dell'input di tipo 'file')

La chiamata è di tipo POST (pensavo di averlo esplicitato prima).
Nessuna GET, non è una porcheria fare una GET più una POST nello stesso form?

La libreria è funzionante, semplicemente ottengo un problema con l'index del file nel form.

 

[Giacomo Furlan]

Sì sarebbe una porcata, ma i programmatori in erba spesso non se ne rendono conto :) sempre meglio controllare!

Fai un bel var_dump($_FILES)... se non esce nulla, il problema è lato frontend, non backend.

 

[FiloRp]

Sì sarebbe una porcata, ma i programmatori in erba spesso non se ne rendono conto :) sempre meglio controllare!

Fai un bel var_dump($_FILES)... se non esce nulla, il problema è lato frontend, non backend.

E' sicuramente lato frontend, come dicevo secondo me invia i dati appena viene uploadato ma non quando si clicca invia, quindi i dati dei file inviati non vengono inviati correttamente tramite $_FILES

 

[Giacomo Furlan]

Quindi, come volevo farti arrivare, il plugin di drop zone che stai utilizzando non "carica" il file nell'input di tipo file...

 

[FiloRp]

Quindi, come volevo farti arrivare, il plugin di drop zone che stai utilizzando non "carica" il file nell'input di tipo file...

Lo so bene, e probabilmente è un problema dato dal javascript ma non so come modificarlo per fare in modo che "uppi" solo dopo aver cliccato Invio

 

[Giacomo Furlan]

Un piccolo script come quello che ti ho fatto al volo dovrebbe fare al caso tuo :)

http://jsfiddle.net/57svckp1/35/

 

[FiloRp]

Un piccolo script come quello che ti ho fatto al volo dovrebbe fare al caso tuo :)

http://jsfiddle.net/57svckp1/35/

Interessante.

Ho aggiunto un piccolo submit sotto la dropzone, come modifico il js in modo che carichi solo dopo aver cliccato il pulsante e non dopo l'upload?

 

[Giacomo Furlan]

È già così :)

Di fatto la drop zone non fa altro che impostare il campo di input, esattamente come faresti cliccando sull'input e selezionando il file :)

 

[FiloRp]

È già così :)

Di fatto la drop zone non fa altro che impostare il campo di input, esattamente come faresti cliccando sull'input e selezionando il file :)

Applicando il codice e i relativi css e js non sembra funzionare, se cerco di caricare un file non rimane neanche l'icona nella dropzone

 

[Giacomo Furlan]

È normale che non rimanga né icona né immagine, in quanto il codice javascript non legge il file, ma si limita a "metterlo" nell'input. Quando droppi il file, ti compare il nome dello stesso nell'input file? Inoltre c'è qualche errore nella console? (F12 -> console)

 

[FiloRp]

Interessante.

Ho aggiunto un piccolo submit sotto la dropzone, come modifico il js in modo che carichi solo dopo aver cliccato il pulsante e non dopo l'upload?

dz.js:18
Uncaught TypeError: Cannot set property 'files' of null at HTMLDocument.document.addEventListener.ev (dz.js:18)
document.addEventListener.ev @ dz.js:18