File upload flow

[Predatorkill]

Καλησπερα παιδες, μπορει καποιος να πει ποιο/τι τροπους ακολουθει οταν θελει να αποστειλει μια φορμα με text fields και μια εικονα;

 

Ετσι οπως το εχω κανει εγω τωρα τα στελνει ολα μαζι πακετο στον σερβερ και κατα τη καταχωρηση της φορμας (οταν πατησει αποστολη) εμφανιζεται μια progress bar. Η καθε εικονα γινεται rename στον σερβερ και μπαινει σε συγκεκριμενο φακελο που δημιουργειται αυτοματα.

 

Σε καποια sites που εχω δει με το που διαλεγεις τη φωτογραφια αυτη ανεβαινει στον σερβερ. Συμπληρωνεις τη φορμα πατας αποστολη και η φωτογραφια «δενει» με την φορμα στη βαση δεδομενων.

 

Πως γινεται αυτο; Με websockets; Δηλαδη ο σερβερ ειδοποιει τον client ποιο ειναι το path που αποθηκευτηκε η φωτο στον σερβερ; Τι γινεται οταν καποιος ανεβασει μονο τη φωτο αλλα κλεισει πχ το tab χωρις καν να αποστειλει τη φορμα; Ο σερβερ με το καιρό μπορει να γεμισει σαβουρα.

 

Γενικοτερα ποιο ειναι το flow ανεξαρτητως γλωσσας;

[SakislolGR]

την στέλνει με Ajax και κάνει τη σύνδεση μέσω ενός Cookie η Session. Δλδ έχει κάνει Mapping από πίσω <userid, imageid>. Όλα αυτά temporary.

 

όταν αποσταλεί και η φόρμα μετακινεί τα αρχεία σε κανονικό φόλντερ και mapping στην ΒΔ.

 

O server δεν θα γεμίσει ποτέ σαβούρα για τον παραπάνω λόγο. Πολύ απλά περιμένει κάτι! αν εσύ κλείσεις την καρτέλα θα το πάρει ως 'οχι'. Ανάλογα πως το έχει υλοποιήσει κάποιος. Μπορεί να αποθηκεύσει το στατε σε cookie και να τα καθαρίζει από τον σερβερ μετά από 1 μέρα

[Predatorkill]

Το cookie/session ποτε το δημιουργεις; Το cookie πες το φτιαχνεις με το authentication, το session το φτιαχνεις μολις ο χρηστης ανεβασει τη φωτο και στη συνεχεια το δενεις με τη φορμα που προκειται να ανεβει ωστε να ξερει ποια φωτογραφια θα κανει mapping στη φορμα στη βαση;

[SakislolGR]

Ή να έχεις ένα hidden Input που θα έχει value έναν κωδικό.

 

Έτσι, όταν φορτώνεις τις εικόνες και τις στέλνεις με Ajax, στέλνεις και το value.

Και στο τέλος όταν κάνεις submit θα αποσταλεί και το Hidden value.

 

Α! μιλάς για Authenticated users... οπότε το Session υπάρχει ήδη όσο είναι συνδεδεμένος.

1. Στο Ajax Query βάζεις εικόνα και UserId που το έχει στο Session
2. Στον Server λαμβάνεις το Ajax Query και αποθηκεύεις τοπικά το αρχείo
3. Έχεις έναν πίνακα στην βάση σου όπου κάνεις mapping userid, temp_file (Προσοχή! εδώ πρέπει να έχεις crons που καθαρίζουν την βάση και το temp αρχείο αν δεν ολοκληρώσει ο χρήστης
4. Η συνάρτηση που θα καλέσεις αν κάνεις submit θα βρει το mapping και θα τα καταχωρήσει κανονικά. Και φυσικά καθαρίζεις τα 'υπολείμματα'

Το παραπάνω παράδειγμα δουλεύει αν θες ξέρω γω να κρατάς temp files για πάνω από 1 σύνδεση. Αν δεν θες καθόλου τότε απλά κάνε αυτό με το hidden value.

 

PS: Αν δουλεύεις με CMS τότε τζάμπα σου έγραφα τόση ώρα βρες κάνα Plugin

[Predatorkill]

Σε ευχαριστω Σακη για το χρονο σου. Δεν ειναι cms, custom ειναι.

[Predatorkill]

Ψαχνωντας λιγο διαφορετικα στο google υστερα απο τη προσεγγιση σου επεσα πανω σε αυτο που πιστευω οτι καλυπτει τα βηματα που αναφερεις:

http://getcontenttools.com/tutorials/handling-image-uploads

[Predatorkill]

Η λυση που ακολουθησα εχει ως εξης:
1. Επιλογη εικονας απο τον χρηστη
2. Με το που την επιλεξει απ ευθειας upload το αρχειο σε temp φακελο στον server
3. Ο server επιστρεφει json με το path της εικονας
4. Αποθηκευση του path σε variable
5. Αποστολη φορμας με text fields και το path της εικονας
6. Με το που λαβει τη φορμα ο server αμεσως αντιγραφει το αρχειο στο σωστο φακελο και αποθηκευει το path στη βαση δεδομενων
7. Ημερησιο cron για διαγραφη των temp αρχειων κατα τις 4-5 το πρωι (δεν νομιζω να υπαρχει τροπος να προστατεψω καποιον που παει να κανει upload ενα αρχειο εκεινη την ωρα) (καθε μια ωρα (cron job) διαγραφω τα αρχεια που ανεβηκαν πριν μια ωρα στον temp φακελο «διαβαζοντας» την ημερομηνια δημιουργιας του αρχειου)

Ολα αυτα με image preview και delete/new image κουμπια.

Επεξ/σία 4 Ιουνίου 2017 από Predatorkill

[SakislolGR]

Κάνε το να κάνει Swap όταν τρέχει το Cron, δηλαδή στον κώδικα αντί να πάει στον /temp να πάει /temp2 

Όταν χτυπήσει το Cron το /clear ουσιαστικά στο τέλος της συνάρτησης κοιτάς να επαναφέρεις τον /temp

 

Βασικά τα αρχεία που έχει μέσα θα σβήνεις και όχι τον φάκελο /temp. Οπότε δεν τίθεται καν θέμα μην ανεβάσει κάποιος εκείνη τη στιγμή.

[Predatorkill]

Το θεμα ειναι οτι «καθεται» το αρχειο εκει μεχρι ο χρηστης να ολοκληρωσει την υποβολη της φορμας. Δε νομιζω ποτε καποιος στις 5 το πρωι να ανεβασει κατι αλλα ποτε δε ξερεις.

[SakislolGR]

δεν μπορεί να κάτεται γιατί το filename θα είναι μοναδικό πάντα. πχ: κάνεις prepend datetime.

 

τι εννοείς κάθεται;

[Predatorkill]

Με το που επιλεξει φωτο αυτη ανεβαινει στον σερβερ στον tmp φακελο, θελει πες 3-4 λεπτα να συμπληρωσει τη φορμα ο χρηστης, αυτο το διαστημα λοιπον καθεται εκει. Θα δω μηπως στο cron μπορω να διαβασω το timestamp του αρχειου (δηλαδη μη σβησεις αρχεια του τελευταιου μισαωρου).

[SakislolGR]

α κατάλαβα! ναι... και μετά πχ στέλνει τη φόρμα αλλά η φωτο πάπαλα.

 

ε τότε είναι πολύ απλό. αλλάζεις προσωρινά /temp > /temp2

function cronPleaseRunMe()
{
  GLOBAL.TEMP_PATH = "/temp2"
  // my super duper code for deleting files
  GLOBAL.TEMP_PATH = "/temp"
}

function uploadPhoto(){
  // My super duper code for uploading to temp
  var path = GLOBAL.TEMP_PATH;
...
}

[alou]

Υπάρχει και η αντίστροφη λογική, που δίνεις δυνατότητα upload image με ajax αφού αποθηκευτεί η φόρμα και υπάρχει πχ item id. Δεν ξέρω αν αυτό θα ταίριαζε στη δική σου περίπτωση αλλά σίγουρα είναι πιο απλό σαν συνολική διαδικασία.

[Predatorkill]

@Alou θελω να γινεται κατα την αποστολη και να πηγαινει πακετο. Ετσι ειναι πανευκολο αλλα δε βολευει στη δικη μου περιπτωση.

 

Ps. κανε με add στο skype ρε

[pmav99]

Αντί να σβήνεις όλα τα temp αρχεία, σβήνεις μόνο όσα είναι παλαιότερα από 24 ώρες