Incarcarea si validarea imaginilor cu Crystal si norocos pe Heroku

Astazi vom incarca imagini cu Lucky si crystal! Pentru a demonstra acest lucru, voi face o aplicatie care permite incarcarea de imagini intr-o galerie care este legata de adresa dvs. IP. Deoarece vom gazdui aceasta aplicatie pe eroku, putem folosi antetul X-FORWARDED_FOR al lui heroku pentru a obtine adresa IP a utilizatorului.

Retineti ca, datorita proxys-urilor si potentialului de spoofing ip, aceasta nu este o metoda sigura de restrictionare a accesului utilizatorului si nu va recomand sa o utilizati pentru date importante.

Codul finalizat

Pentru a vedea codul terminat si a-l rula local, puteti clona repo-ul si puteti vedea filiera incarcata de imagini.

Si puteti rula specificatiile pentru a vedea rezultatul verde frumos :).

Tabel imagine

Mai intai permiteti crearea tabelului Image.

Vom adauga urmatoarele coloane pentru a pastra numele de fisier, adresa IP a proprietarului si vom inregistra chiar numarul de ori cand imaginea este vizualizata de utilizatori.

Vom adauga, de asemenea, un index unic pe numele de fisier si un index normal in coloana de proprietar_ip, astfel incat sa putem obtine rapid colectii de imagini bazate pe acesta.

Specificatii

Cand permiteti incarcarea in aplicatia noastra, vom dori sa restrictionam fisierele in functie de tipul si dimensiunile posibile. Vom crea specificatii pentru a verifica acest lucru pentru noi. Din pacate, Crystal nu ne ofera informatii despre dimensiunile unei imagini a cutiei noastre, asa ca mai tarziu vom folosi crymagic pentru a obtine aceste informatii pentru noi.

Limitele pe care le vom pune in incarcarile noastre sunt urmatoarele:

• formate: JPG, GIF, PNG
• dimensiuni max .: 1000×1000
• dimensiune max: 250kb

Am adaugat cateva imagini in folderul nostru de active care incalca fiecare din aceste reguli, precum si o imagine care este perfecta.

DE asemenea: Am primit aceste imagini de pe acest site uimitor: africandigitalart.com, pe care recomand sa le verific.

In continuare, vom crea un ImageBox in cazul in care avem nevoie sa instantaneze Imagini in testele noastre.

Fluxul norocos

Lucky foloseste conceptul de Flows, care sunt clase care incapsuleaza comportamentul testelor browserului. Vom crea una acum care incarca o imagine pe pagina noastra de pornire si are doua metode pentru a verifica daca aceasta a reusit sau nu.

Putem simula incarcarea unui fisier adaugand calea completa a fisierului la introducerea fisierului formularului. Apoi, faceti clic pe metoda „@ upload-image” va cauta un element cu eticheta [flow_id = upload-image] in pagina si faceti clic pe ea.

Acum putem folosi acest flux si imaginile noastre de testare pentru a scrie specificatiile noastre. Crystal are suport de clasa intai pentru specificatii si putem vedea asta cat de simplu este sa le scriem. Folosim Spec.after_each pentru a sterge imaginile cu o stergere! metoda care va sterge, de asemenea, fisierul de baza dupa fiecare spec.

Rularea acestor specificatii le va determina sa esueze, deoarece nu am implementat nimic. Sa construim acum modelele, actiunile si paginile noastre pentru a le face sa functioneze.

Model de imagine

Va trebui sa persistam referintele la imaginile noastre, ip-ul proprietarului lor si numarul de vizualizari la baza de date. Deci, sa generam un model care sa faca asta.

Si putem completa modelul Image cu coloanele sale si cateva metode ajutatoare pentru a construi stergerea caii, url-ului si gestionarea. Imaginile vor fi salvate la public / asset / images / … si vor fi disponibile public pe www.example.com/assets/images / …. Vom adauga si un caz pentru imaginile de testare care vor fi stocate in directorul public / active / imagini / test /.

In continuare, putem completa ImageForm. Formularele din Lucky sunt responsabile pentru crearea si actualizarea modelelor. Folosim fisiere pentru a declara ce coloane vom actualiza si vom declara o imagine de camp virtual pentru a pastra imaginea incarcata pana cand o putem salva. Vom adauga, de asemenea, fisierul de nevoi si ip necesitati, deoarece le vom transmite atunci cand instantam formularul.

uuid este folosit pentru a ne asigura ca avem nume de fisiere unice si pentru a face aproape imposibil pentru cineva sa vizualizeze imaginea fara numele de fisier.

Am reunit toate acestea impreuna in metoda de pregatire care salveaza imaginea si seteaza coloanele. In prezent nu face validari, dar vom ajunge la asta mai tarziu.

Acum trebuie sa cream interfata de utilizator pentru a permite incarcarile si actiunile pentru salvarea formularelor.

Pagina principala

In prezent, aplicatia noastra afiseaza pagina principala implicita a lui Lucky. Vom crea o noua pagina principala care ne contine formularul si ne va permite sa incarcam fisiere. Sa generam pagina.

Apoi, vom adauga un formular care are enctype: „multipart / form-data” si postari la Images :: Create care se va ocupa de crearea imaginii noastre. Adaugam formularul de nevoi: ImageForm pentru a spune actiunea care face ca aceasta pagina sa fie transmisa intr-un nou formular. Vom reda, de asemenea, orice eroare intr-o lista sub intrare.

Si sa ne schimbam actiunea Pagina principala :: Index pentru a arata pagina noastra de index mai degraba decat pagina de bun venit a lui Lucky.

Obtineti curent_ip in actiuni

Nu vom folosi current_user pentru autentificare, ci trebuie sa obtinem adresa IP a cererii. Cand aplicatia noastra este pe eroku, putem folosi antetul X-FORWARDED-FOR care este setat automat. La nivel local o vom seta doar la nivel local.

Vom adauga aceste metode in BrowserAction. Intrucat celelalte actiuni ale noastre mostenesc din clasa Acasa :: Index <BrowserAction, acestea vor face aceste metode disponibile pentru noi.

Imaginile creeaza actiune

Acum avem nevoie de o actiune pentru gestionarea crearii imaginii dupa ce trimitem formularul pe pagina de pornire. Sa generam una cu:

Pentru mai multe informatii despre cum actioneaza actiunile, puteti consulta ghidurile lui Lucky.

Aceasta actiune va obtine fisierul din paramele care vor fi sub forma {“image”: {“image”: “fisierul este aici”}}. Daca nu este nul, vom trece fisierul si actual_ip la ImageForm, care va valida si va salva noua noastra imagine.

Pentru a verifica daca fisierul nostru exista, ne vom asigura ca nu este nul si ca numele fisierului exista.

Si voila! Aplicatia noastra poate face fata incarcarilor de imagini.

Daca rulam specificatiile cu spec. Norocos / flow / images_spec.cr, vom vedea ca primul nostru specimen care verifica imaginile valide va trece, dar din moment ce nu am implementat validari de imagine, restul va esua.

validari

Pentru a verifica dimensiunea, tipul si dimensiunile fisierelor imaginilor, vom folosi o mica bijuterie dintr-un fragment numit crymagick. Este necesar ca ImageMagick sa fie instalat, ceea ce din fericire pentru noi este prezent in mod implicit pe Heroku. Daca nu este instalat pe masina dvs. locala, il puteti obtine de pe site-ul oficial aici.

Va permite sa instalati fragmentul adaugandu-l in partea de jos a dependentelor noastre in shard.yml si ruland fragmente.

Acum il putem folosi in ImageForm pentru a ne valida imaginile. Adaugam trei metode validate_is_correct_size, validate_is_correct_dimensions si validate_is_correct_type care vor folosi CryMagick :: Image pentru a verifica tipul, dimensiunea si dimensiunile fisierului. Daca nu exista erori, trecem la salvarea fisierului si setarea coloanelor imaginii.

Acum, daca rulam specificatiile, vom vedea ca toate trec! Ura!

Tot ce a ramas acum este sa adaugati suport pentru stergerea si vizualizarea imaginilor noastre.

Afisarea si stergerea imaginilor

Ceea ce ne dorim este sa ne afisam imaginile pe pagina de start ca o galerie. Fiecare imagine ar trebui sa aiba un buton de sters si ar trebui sa afiseze adresa URL.

Sa incepem cu o specificatie care viziteaza pagina de pornire si verifica imaginile de pe ecran si o alta care face clic pe butonul de stergere si verifica daca imaginea este stersa.

Si permiteti sa adaugati fluxurile care vor vizita pagina principala, sa verificati imagini, sa verificati imaginile din baza de date si sa stergeti imaginile apasand butoane sau vizitand actiunile direct.

Testele noastre vor esua acum, astfel incat sa adaugam asistenta pentru afisarea imaginilor prin actualizarea Home :: IndexPage. Vom solicita ca pagina sa fie redata cu un suport de imagini care este un ImageQuery. Apoi vom folosi imaginile intr-o noua metoda de galerie care reda fiecare imagine, inclusiv link-uri pentru a o sterge si o adresa URL pentru a o afisa.

Am adaugat si stiluri la src / css / app.scss pe care nu le voi include in acest articol.

Pentru ca acest lucru sa functioneze, trebuie sa actualizam actiunile noastre care redau Home :: IndexPage, astfel incat acestea sa fie transmise in imagini.

Si in imaginile noastre: Creeaza actiune.

Toate setate! Acasa :: IndexPage nu se va plange ca nu au trecut imagini. Dar va plange pentru un link catre Imagini :: Stergere care nu a fost implementat. Deci, hai sa facem asta acum.

Actiunea Imagini :: Sterge ar trebui sa verifice daca current_ip se potriveste cu proprietarul_ip al imaginii si daca este apelul sterge !.

Acum executati testele si … Boom! Verde.

Afisati o singura imagine

Ultimul lucru pe care il vom implementa este o pagina de spectacol pentru fiecare imagine care actualizeaza numarul de vizualizari. Sa generam actiunea, pagina si un formular de actualizare a imaginilor pentru noi.

Formularul va fi simplu si va fi utilizat doar pentru cresterea valorii. Poate fi folosit astfel: ImageViewsForm.update! (Imagine).

Pentru actiunea noastra vom folosi un traseu personalizat, astfel incat parametrul nostru de ruta sa fie disponibil ca nume de fisier in loc de ID. Apoi verificam ca exista si crescem vizualizarile si redam pagina, altfel redirectionam la actiunea Home :: Index.

The show page will be very simple. We display the filename, the views and the image using minimal style to keep everything centered while allowing the image to stretch to its full size.

To finish off we’ll make the image displayed on the home page link to the Images::ShowPage.

And we’re done! The tests should all be green and the app working as expected.

Join Us

I hope you enjoyed this tutorial and found it useful. Join us on the Lucky gitter channel to stay up to date on the framework or checkout the docs for more information on how to bring your app idea to life with Lucky.