Angular 2 multipart form

[Predatorkill]

Καλησπερα παιδες, εχει καταφερει καποιος να ανεβασει αρχειο σε node/express server μαζι με text inputs μεσω Angular 2 front end;

 

Εχω σπασει το κεφαλι μου να βρω/φτιαξω υλοποιηση χωρις xhr ωστε να μπορω να εκμεταλευτω τις model driven forms αλλα δε γινεται τπτ. (Οταν λεω χωρις xhr, εννοω μεσω του HTTP module). Το χω καψει το google και το stackoverflow.

 

Εχω καταφερει να το κανω να δουλεψει με ng2-uploader, το αρχειο φτανει στον σερβερ κανονικα χωρις προβλημα.

 

Το θεμα ειναι οτι δεν εχω βρει τροπο να στειλω ολη τη φορμα μονομιας καθως με το ng-uploader χτυπαω σε route api/upload και εκει μετα πρεπει να φτιαξω schema στην βαση δεδομενων που να κραταει το path του αρχειου (για να το τραβαω στο frontend αναλογα το χρηστη που ειναι signed in) και να κανω Ref στο χρηστη.

 

Θελω να αποφυγω τα Refs οσο δε παει... Το τελειο θα ηταν να ανεβαινει μονομιας και να αποθηκευεται στο Schema του χρηστη μαζι με τα αλλα στοιχεια οπως ονομα κτλ.

 

Υγ. Διαβαζω στο stackoverflow οτι δεν το υποστηριζε(δεν ξερω αν το υποστηριζει τωρα), εδινε καποια links με το προβλημα στο github repo της Angular αλλα οδηγουν σε 404...

[Predatorkill]

Τελικα εκατσα και το εφτιαξα με XHR, δε παιζει να γινει αλλιως προς το παρον με βαση τα οσα βρηκα online αλλα και των γνώσεών μου εως τωρα.

 

Οποιος θελει να του ριξει μια ματια:

 

https://github.com/predatorkill/ng2-forms-demo

 

Η εφαρμογη υποστηριζει

1. register/login με jwt
2. password reset via email (sendgrid)
3. Toastr notifications
4. Multipart form submission with image preview before upload.
5. Storing images to file system
6. Storing image path to MongoDB among text fields

Στο repo εβαλα και φωτογραφιες της εφαρμογης.

 

Υγ. πρεπει να σφιξω λιγο ακομα την ασφαλεια, τουλαχιστον να κανω ενα check ακομα αν το αρχειο ειναι φωτο αλλα και να βαλω limits για το μεγεθος του αρχειου.

[alou]

Nice Θα σε βολέψει πολύ να φτιάξεις ένα wrap για το http ώστε να αποφεύγεις να φτιάχνεις custom headers σε κάθε request. Το μόνο που θα αλλάξεις στο service (εκτός από το να πετάξεις τα custom headers) θα είναι να δηλώσεις το νέο http service στο constructor.

[Predatorkill]

Ανανεωσα το repo,

 

Προστεθηκαν:

1. progress bar (σε local ειναι τοσο γρηγορο το upload που δεν προλαβαινει να φανει αν το αρχειο ειναι μικρο)

2. διπλο check server/front end  αν το αρχειο ειναι εικονα μεσω mime type

3. νεα σελιδα με ολες τις φορμες του χρηστη

4. 5MB upload limit και στον server και στο front end

5. bug fixes

 

https://github.com/predatorkill/ng2-forms-demo

 

alou θα το κανω αυτο που λες στο νεο version εχω μερικα todos ακομα

[Predatorkill]

Ανανεωσα το repo:

 

1. Image resize

2. Ενα ακομα check αν το αρχειο ειναι εικονα ή οχι, το gm διαβαζει τα πρωτα bytes του αρχειου (magic numbers)

3. Διαγραφη φορμας μαζι με το αρχειο της και ανανεωση του χρηστη (αφαιρεση του ref id της φορμας απο το array)

 

https://github.com/predatorkill/ng2-forms-demo

[Predatorkill]

Ανανεωσα το repo:

1. Επεξεργασια φορμας και φωτο
2. Καλυτερο styling
3. Διαφορες μικροδιορθωσεις

https://github.com/predatorkill/ng2-forms-demo

 

npmjs:

https://www.npmjs.com/package/ng2-forms-demo

Επεξ/σία 2 Δεκεμβρίου 2016 από Predatorkill

[Predatorkill]

Ανανεωσα το repo:

 

1.  Προσθηκη admin panel για επεξεργασια των φορμων του χρηστη

 

https://github.com/predatorkill/ng2-form-demo

 

 

npmjs:

https://www.npmjs.com/package/ng2-forms-demo

[Predatorkill]

Ανανεωσα το repo:

 

1. Προσθηκη profile page για τον χρηστη

2. Προσθηκη email και profile picture στο navbar

 

https://github.com/p...l/ng2-form-demo

 

 

npmjs:

https://www.npmjs.co.../ng2-forms-demo