ανέβασμα αρχείων με drag & drop στο παράθυρο του φυλλομετρητή

26.03.10

Ο firefox από την έκδοση 3.6 και μετά υποστηρίζει το νέο File API της javascript το οποίο επιτρέπει την μεταφορά και απόθεση αρχείων απευθείας στο παράθυρο του φυλλομετρητή για μεταφόρτωση στο server. Αυτό επιτρέπει την εύκολη και γρήγορη μεταφορά πολλών αρχείων. Το API είναι της javascript και εκτός απροόπτου θα υποστηριχθεί και από τους υπόλοιπους browsers πολύ σύντομα.

Υπάρχουν ήδη κάποιες μέθοδοι μεταφοράς και απόθεσης αρχείων στο παράθυρο του φυλλομετρητή αλλά όλες προαπαιτούν τη χρήση κάποιου πρόσθετου που πρέπει ο χρήστης να εγκαταστήσει, όπως το image uploader tool ActiveX της Microsoft, το Google Gears ή το Drag and drop plugin του firefox.

Υπάρχουν διάφορα παραδείγματα ανά το internet αυτής της εφαρμογής όπως αυτό

http://demos.hacks.mozilla.org/openweb/uploadingFiles/

αυτό

http://yehudab.com/apps/drag-n-drop/demo.html

και αυτό

http://www.thecssninja.com/demo/drag-dropupload/v2/

Κανένα από αυτά δεν είναι όμως ολοκληρωμένα και το πιο βασικό κανένα από αυτά δεν δίνει παράδειγμα του κώδικα που τρέχει στον server για να δεχτεί το αρχείο. Σε όλα τα παραδείγματα φαίνεται πως το server-side script είναι ένα τυπικό αρχείο uploader σε php ή perl κάτι που όμως δεν ισχύει, γιατί η μέθοδος του drag and drop στέλνει το αρχείο με streaming στο server, και όχι γεμίζοντας το array $FILES όπως συνήθως.

Τη λύση βρήκα εδώ

http://lenss.nl/2010/01/drag-drop-uploads-with-xmlhttprequest2-and-php/

όπου υπάρχει άλλο ένα παράδειγμα τέτοιου προγράμματος.

 

Ήθελα όμως μια εφαρμογή που να συνδυάζει όλα τα πλεονεκτήματα αυτών των λύσεων καθώς και κάτι παραπάνω:

  1. Μπάρα προόδου
  2. Μικρογραφίες και εικονίδια των αρχείων που ανεβαίνουν
  3. Δυνατότα διαγραφής μεμονωμένου αρχείου

Έτσι παίρνοντας τα καλύτερα στοιχεία έφτιαξα τη δικιά μου εφαρμογή upload

Μπορείτε να τη δείτε live εδώ

http://qwazix.outofbounds.gr/dragdrop/ (μην ανησυχείτε δεν μαζεύω τα αρχεία σας. Στην πραγματικότητα στο demo δεν γίνονται ποτέ upload)

και να την κατεβάσετε από εδώ

http://qwazix.outofbounds.gr/programs/dragdropupload.zip

Στο αρχείο path.php ορίζεται που θα ανεβαίνουν τα αρχεία. Προτείνεται να ανεβάζετε στον προσωρινό φάκελο temp και να μεταφέρετε τα αρχεία μετά εκεί που θέλετε. Στην παρούσα υλοποίηση τα αρχεία με ίδιο όνομα αντικαθίστανται χωρίς προειδοποίηση.

Το αρχείο stub.txt υπάρχει στο φάκελο temp μόνο για λόγους συμπίεσης. Μπορείτε να το σβήσετε.