imgur uploader και drag n drop

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
philos
Δημοσιεύσεις: 264
Εγγραφή: 30 Αύγ 2007 23:32

imgur uploader και drag n drop

Δημοσίευση από philos » 17 Ιαν 2015 17:54

Καλησπέρα :D

Λοιπόν, προσπαθώ να χρησιμοποιήσω αυτόν τον imgur uploader:
http://techslides.com/demos/imgur-uploa ... imgur.html
http://techslides.com/html5-image-zip-a ... d-to-imgur

Όσον αφορά το drag n drop:
Σε Chrome και Opera δουλεύει κανονικά. Στον Firefox μου βγάζει error η κονσόλα:

Κώδικας: Επιλογή όλων

TypeError: e.dataTransfer.items is undefined
... και αφορά τον κώδικα:

Κώδικας: Επιλογή όλων

            drag.ondrop = function(e) {
                e.preventDefault();
                  var length = e.dataTransfer.items.length;
[...]
}
Πως μπορώ να το διορθώσω;
Να σημειωθεί ότι έκανα προσπάθεια να αλλάξω τον κώδικα σε:

Κώδικας: Επιλογή όλων

 var length = e.dataTransfer.files.length;
... και το προσπέρασε, αλλά κόλλησε πάλι στο:

Κώδικας: Επιλογή όλων

var entry = e.dataTransfer.items[i].webkitGetAsEntry();
Ευχαριστώ :)

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

imgur uploader και drag n drop

Δημοσίευση από giannis17 » 17 Ιαν 2015 23:35

άλλαξε το

Κώδικας: Επιλογή όλων

var entry = e.dataTransfer.items[i].webkitGetAsEntry();
με

Κώδικας: Επιλογή όλων

if(e.dataTransfer.items[i].getAsEntry){
    var entry = e.dataTransfer.items[i].getAsEntry(); //internet explorer 9+
} else {
   if(e.dataTransfer.items[i].webkitGetAsEntry){ 
        var entry = e.dataTransfer.items[i].webkitGetAsEntry();  //safari+chrome
    } else {
        var entry = e.dataTransfer.items[i].mozGetDataAt(0); //firefox
    }
}
το webkit παίζει σε safari/chrome, τo moz σε firefox, και η απλή HTML5 σε IE9+
"There is only one problem with common sense; it’s not very common."
– Milt Bryce

Άβαταρ μέλους
philos
Δημοσιεύσεις: 264
Εγγραφή: 30 Αύγ 2007 23:32

imgur uploader και drag n drop

Δημοσίευση από philos » 18 Ιαν 2015 14:23

Ευχαριστώ για την απάντηση! :D

Λοιπόν το δοκίμασα και στον Firefox μου βγάζει error στην κονσόλα:
TypeError: e.dataTransfer.items is undefined
Για τη γραμμή:
if(e.dataTransfer.items.getAsEntry)


Δοκίμασα διάφορα του τύπου if(typeof(e.dataTransfer.items.getAsEntry) !== 'undefined')
αλλά χωρίς αποτέλεσμα. Δε μπορώ να καταλάβω γιατί βγάζει error η κονσόλα για μια μεταβλητή που είναι μέσα σε if. Αφού υποτίθεται ότι η if κάνει τον έλεγχο, ποιο το νόημα του λάθους;

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

imgur uploader και drag n drop

Δημοσίευση από giannis17 » 18 Ιαν 2015 14:35

μου τη δίνει που το DOM έχει διαφορετικές ονομασίες σε events/parameters στο κάθε engine.

ρίξε μια ματιά εδώ: http://stackoverflow.com/questions/1081 ... annot-read
"There is only one problem with common sense; it’s not very common."
– Milt Bryce

Άβαταρ μέλους
philos
Δημοσιεύσεις: 264
Εγγραφή: 30 Αύγ 2007 23:32

imgur uploader και drag n drop

Δημοσίευση από philos » 18 Ιαν 2015 17:27

Δεν κατάφερα κάτι. :-?

Δοκίμασα διάφορα και πάντα παίρνω error για το .items

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

imgur uploader και drag n drop

Δημοσίευση από alou » 18 Ιαν 2015 21:01

Αν κάνεις

console.log(e.dataTransfer);

θα δεις τις διαφορές στις διαθέσιμες μεθόδους για chrome και mozilla.

Εικόνα

Εικόνα

'Οπως μπορείς να δεις και εδώ
https://developer.mozilla.org/en-US/doc ... taTransfer

δεν υπάρχει items.

Πιθανώς μια δοκιμή θα ήταν να χρησιμοποιήσεις dataTransfer.files.length ? που θέλει κάποια μελέτη στο script για να δεις αν θα μπορούσε να παίξει με αυτή τη λογική, το σίγουρο είναι ότι το συγκεκριμένο implementation, δεν κάνει ως έχει για mozilla και δεν έχει να κάνει με proprietary code (moz, o, webkit κλπ) αλλά με μεθόδους που έχει ο καθένας στο api του (που είναι βέβαια κάτι αντίστοιχα ενοχλητικό για να βρεις cross browser λύσεις).
Συνημμένα
Screen Shot 2015-01-18 at 8.41.36 μ.μ..png
Screen Shot 2015-01-18 at 8.41.22 μ.μ..png

Άβαταρ μέλους
philos
Δημοσιεύσεις: 264
Εγγραφή: 30 Αύγ 2007 23:32

imgur uploader και drag n drop

Δημοσίευση από philos » 19 Ιαν 2015 15:57

Η μόνη λειτουργία που αφορά τη μεταβλητή entry που προσπαθούμε να ορίσουμε είναι για να δούμε αν αυτό που ανεβάζει ο χρήστης είναι αρχείο ή φάκελος.

Κώδικας: Επιλογή όλων

                  var length = e.dataTransfer.files.length;
                  for &#40;var i = 0; i < length; i++&#41; &#123;
                        
                      if&#40;e.dataTransfer.items&#91;i&#93;.getAsEntry&#41;
                      &#123;
                          var entry = e.dataTransfer.items&#91;i&#93;.getAsEntry&#40;&#41;; //internet explorer 9+
                      &#125; 
                      else 
                      &#123;
                         if&#40;e.dataTransfer.items&#91;i&#93;.webkitGetAsEntry&#41;
                         &#123;
                              var entry = e.dataTransfer.items&#91;i&#93;.webkitGetAsEntry&#40;&#41;;  //safari+chrome
                         &#125; 
                         else 
                         &#123;
                              var entry = e.dataTransfer.items&#91;i&#93;.mozGetDataAt&#40;0&#41;; //firefox
                         &#125;
                      &#125; 
                      
                    var file = e.dataTransfer.files&#91;i&#93;;
                    var zip = file.name.match&#40;/\.zip/&#41;;
                    if &#40;entry.isFile&#41; &#123;
                        if&#40;zip&#41;&#123;
                            unzip&#40;file&#41;;
                        &#125; else &#123;
                          var file = e.dataTransfer.files&#91;i&#93;;

                          if&#40;file.type.match&#40;/image.*/&#41;&#41;&#123;
                            upload&#40;file&#41;;
                          &#125; else &#123;
                            document.getElementById&#40;"error"&#41;.innerHTML = file.name+" is not an image.";
                          &#125;                       
                        &#125;


                    &#125; else if &#40;entry.isDirectory&#41; &#123;
                     traverseFileTree&#40;entry&#41;;
                    &#125;
                  &#125;
Υπάρχει κάποιος πιο cross browser τρόπος να κάνουμε αυτό που θέλουμε;

alou σε ευχαριστώ για το μήνυμα. Δεν έχω μεγάλη εμπειρία με τη Javascript, πολύ χρήσιμη η πληροφορία σου για το conslole.log. :)

Άβαταρ μέλους
philos
Δημοσιεύσεις: 264
Εγγραφή: 30 Αύγ 2007 23:32

imgur uploader και drag n drop

Δημοσίευση από philos » 25 Ιαν 2015 09:59

Ερώτηση σχετικά με τα APIs:
Πχ στο IMGUR δίνεται το API Key (Client ID) και ένα Secret Code
σε τι χρησιμεύει συνήθως το Secret Code?
πχ στον uploader δε χρειάστηκε πουθενά...

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

imgur uploader και drag n drop

Δημοσίευση από giannis17 » 25 Ιαν 2015 12:25

είναι κάτι αντίστοιχο με username, password. πολλές υπηρεσίες δίνουν 1 γενικό key+secret και μετά άλλο ένα ζευγάρι (auth, token ή όπως το λέει ο καθένας) για κάθε εφαρμογή/domain/ip που θα συνδέεται στο API

Ανάλογα τα δεδομένα που ζητάς από το API αυτά υπάγονται σε κάποιο layer ασφάλειας που απαιτεί κανέναν ή περισσότερους από τους κωδικούς που σου έχουν δώσει.
"There is only one problem with common sense; it’s not very common."
&#8211; Milt Bryce

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες