Laravel: Przypisywanie zdjęć do wpisu

5.8.x

0:00Brakuje nam jeszcze jednej rzeczy, mianowicie możliwości upload'u obrazków

0:04na serwer i przypisywania ich do wpisów i tym zajmiemy się w tej i kolejnej

0:08lekcji. Rzecz jeżeli chodzi o laravel jest bardzo prosta, tutaj naprawdę

0:12jest bardzo wysoka warstwa abstrakcji i bardzo przyjemnie się z tym pracuje. Natomiast, żeby

0:17zrozumieć co tutaj będziemy robić musimy umówić sobie filesystems. Jeżeli

0:21przejdziemy do config filesystems, to okaże się, że laravel

0:25definiuje kilka takich filesystemów, ale my możemy dowolną liczbę tutaj

0:30sobie zdefiniować i teraz co to oznacza? W skrócie wygląda to tak, że mamy pewne

0:34metody laravel'a zawsze dokładnie takie same, które pozwalają

0:38nam zapisywać pliki i te pliki odczytywać czy usuwać i dlaczego

0:42te metody zawsze są takie same? Otóż, po to żeby się łatwo nich korzystało,

0:46ale za pomocą tych metod można zapisywać pliki lokalnie na dysku, można

0:50je zapisywać na dropbox'ie w chmurze S3 i tak dalej. Czyli warstwa abstrakcji

0:54jest bardzo duża, bo pod spodem wykorzystywane są odpowiednie driver'y i

0:58mnóstwo takich driver'ów, sterowników znajdziesz również na githubie. Społeczność

1:03je tworzy, praktycznie do każdego jakiegoś hostingodawcy

1:07czy do każdego, do każdej chmury, znajdziesz odpowiedni driver,

1:11czyli mam jakąś metodę, która, której mówimy Zapisz mi plik albo

1:15pobierz mi plik. Daj mi do niego ścieżkę a ta medodaa pod spodem, ona może

1:20korzystać z różnych sterowników i zapisywać ten plik albo u nas lokalnie na

1:24dysku albo na przykład na dropbox'ie. My będziemy skorzystać z dysku,

1:28który nazywa się public, tutaj te dyski są zdefiniowane. Jeżeli byś dodawał inne to tutaj trzeba

1:33jej zdefiniować, na przykład jak tutaj widzisz, FTP, SFTP, jest tego

1:37całe mnóstwo i teraz my chcemy zdefiniować sobie jako dysk

1:41public, jako ten który jest domyślny, żebyśmy za każdym razem za moment nie musieli podawać, że

1:45chodzi nam o publiczny i jak widać publiczny korzysta z drivera local, czyli

1:49zapisuje lokalnie u nas na dysku, na serwerze. Gdzie zapisuje,

1:53storage path, a storage path po prostu zwraca nam ścieżkę,

1:57to jest taka funkcja pomocnicza laravel'a do storage i następnie

2:02app public. Tutaj jest taki katalog public, ten katalog musi być odpowiednio podlinkowany

2:06później, co zrobimy w kolejnej lekcji do naszego katalogu public, który jest w

2:10tym miejscu, ale app public to właśnie tam będą umieszczane pliki jeżeli skorzystamy

2:15publicznego dysku. Jak one będą zwracane? Otóż APP_URL,

2:20czyli cały adres URL aplikacji jaką mamy, w naszym wypadku larablogger.test

2:25ukośnik storage i dopiero później to co będzie app public. No i

2:30tyle w zasadzie jeżeli tutaj chodzi o te rzeczy, ale musimy sobie skonfigurować, żeby ten

2:34dysk był dyskiem domyślnym i teraz jeżeli zobaczymy, który jest domyślny

2:38dysk, czyli default to nam pobiera z pliku env zmienną

2:42FILESYSTEM_DRIVER. Domyślny jest ten local, czyli on by zapisywał

2:46wtedy w storage app a to nie będzie dla nas publiczne. My

2:51chcemy zapisywać właśnie tutaj storage app public, dlatego będę chciał

2:55go zmienić. Nie będę podmieniał tutaj, ale przejdziemy do pliku konfiguracyjnego env i

2:59po prostu gdzieś tutaj sobie to dodamy FILESYSTEM_DRIVER ustawimy na public

3:03i od tej pory będzie to tutaj już przypisywane i za każdym razem

3:07kiedy będziemy korzystać z odpowiednich metod, będzie to zapisywane na dysku public, czyli

3:11dokładnie pod taką ścieżkę i teraz jaki sposób przesłać plik

3:16na serwer. Z punktu widzenia formularza, który mamy przykład w create oraz edit

3:20robimy to bardzo łatwo. Mamy tutaj dodane takie pole jak

3:24image i jest to input o typie file i ma nazwę, czyli jeżeli wybierzemy plik i

3:29wyślemy, przeglądarka automatycznie wyślę go na serwer, ale żeby nam to poprawnie mogło

3:33działać musimy do formularza dodać specjalne atrybut i wygląda

3:37on następująco enctype multipart form-data. To samo musimy dodać

3:41do edit, bez tego po prostu nie będzie nam to poprawnie działać z laravel'em tutaj. Jeżeli

3:46coś takiego dodamy, a już te obrazki możemy wysłać na serwer i teraz

3:51jeśli wyślemy na serwer to będą one oczywiście w kontrolerze

3:55dostępne zajmiemy się najpierw kontrolerem, który mamy tutaj i jest

3:59to store gdzie dodajemy nowy wpis. Na tym etapie będziemy mogli

4:03przechwycić sobie obrazek, ale wcześniej chciałbym jeszcze odpowiednio to

4:08zwalidawać bo image wcześniej walidowaliśmy jako nullable, czyli on nie musi

4:12być podany, ale jeśli jest podany, chciałbym żeby był on o typie image, taką

4:16regułę walidacji na stronie dokumentacji laravel'a znajdziesz i chciałbym żeby miał

4:20on maksymalnie 1024 kilobajty, czyli po prostu jeden

4:24megabajt. Jeżeli będzie większy, jeżeli nie będzie miał mimetype o typie

4:28image to prostu nam tutaj laravel go odrzuci. Na tym etapie wiemy

4:33już walidacja przeszła więc będziemy się mogli odwołać po prostu do data image

4:37i ten obrazek sobie zapisać. Zrobimy to w bardzo prosty

4:41sposób. On nam zwróci ścieżkę. Dlatego chcę ją przechwycić do zmiennej, odwołamy się

4:45do request, następnie do fire i image. Dlaczego image? To

4:50jest nazwa pola, które zdefiniowaliśmy, więc jeżeli pole nazwałem name image to

4:54odwołuje się do image. Mam taki oto plik i mogę bezpośrednio tutaj

4:58powiedzieć store i skorzystamy właśnie w laravel ze storage, o

5:02którym mówiłem przed momentem, który pozwala nam zapisywać pliki na dysku, ten dysk

5:07może być dysk lokalny lub na przykład Dropbox i możemy to zapisywać

5:11jeszcze na inne sposoby, później się tym zajmiemy, zobaczysz taką fasadę storage. Ale

5:15to jest najprostszy sposób i dlatego zdefiniowaliśmy domyślny dysk żeby

5:19tutaj nie musieć definiować w którym dysku po to byśmy musieli jeszcze napisać disk public,

5:23więc store. No właśnie i gdzie go chcemy zapisać, w photos. To

5:28oznacza że na dysku public, który jest domyślny, czyli jeśli jeszcze raz wrócimy do filesystems, filesystems,

5:34mamy tutaj dysk publiczny, to będzie app public i następnie

5:39katalog photos się tam utworzy, bo tak tutaj powiedzieliśmy. Zwróci nam to ścieżkę

5:43i tą że ścieżkę chcemy zapisać w bazie danych. Zatem odwołamy

5:47się do danych, które już mamy zwalidowane. Tam było image i to image po będę

5:52chciał ustawić na path i wiemy, że to się zapisze w bazie danych. Natomiast ważne

5:56jeszcze tutaj żeby sprawdzić czy w ogóle ten obrazek przyleciał do nas z przeglądarki,

6:01dlatego że jeżeli nie, to tutaj będzie błąd, a więc zróbmy sobie tutaj if'a, If

6:05isset data image, jeżeli

6:09on tam się znalazł, to tylko wówczas chcemy wykonać

6:14taki kod. Ja chciałbym ten kod również skopiować

6:18sobie do metody update, którą tutaj mieliśmy, bo będzie to wyglądać

6:22tak samo, więc troszkę się tutaj pobiera tego kodu, ale nie jest źle tak

6:27to będzie wyglądać i tam powinno dodać wpis dodać

6:31obrazki do tego wpisu i zapisać je i na dysku i odpowiednio w

6:35bazie danych. Sprawdźmy zatem jak to będzie wyglądać, przyjdziemy do create

6:40i uzupełniamy sobie jakiś wpis, wybierzemy

6:45typ. W naszym przypadku photo, bo tylko wtedy będziemy w przyszłej lekcji wyświetlać

6:50te obrazki i wtedy nie musimy podawać content

6:54i wybiorę plik. Mam takie dwa obrazki już tutaj zdefiniowane. Pobierz

6:58sobie dowolny obrazek, który ci na stronie główne na naszej stronie wyświetla i po

7:02prostu możesz go tutaj dodać i spróbujemy zrobić Add post, zobaczymy czy nam

7:06to zadziała. Udało się Post has been added. No właśnie, więc teraz

7:10sobie zajrzymy do bazy danych, do wpisów. Odświeżymy tutaj, dodał

7:14nam się taki oto wpis i on zauważ, w image, ma zwrócone photos ukośnik

7:19i tam jest taka dziwna długa nazwa, bo laravel generuje taką nazwę automatycznie. W razie

7:23czego można zachować oryginalne nazwy, ale w naszym przypadku nie jest to konieczne. Więc

7:27ona się tutaj zapisała i teraz co jest super istotne, jeżeli byśmy podejrzeli sobie

7:31katalog storage app public, utworzył się katalog photos i jest tutaj

7:36nasz obrazek, czyli on się na serwer rzeczywiście wgrał i ten katalog storage ja

7:40już o mówiłem na początku kursu nie jest zapisywany repozytorium git'a w razie czego. On

7:44będzie udzielony przykład na serwerze. Robimy nowy deploy, czyli nową

7:48wersję naszej aplikacji, a ten katalog pozostaje, żeby zachować wszystkie na

7:52przykład pliki, które nim się znajdują. Jak zatem widzisz to działa i

7:57teraz jeżeli byśmy przeszli do edycji takiego wpisu, ten obrazek

8:01chcieli zaktualizować, czyli wybierzemy nowy. ja mam tutaj drugi

8:05obrazek zrobię update, również

8:09się przesłał i będzie w porządku. Jeżeli tutaj odświeżymy to będzie tutaj już

8:13inna ścieżka. Problem jest tylko taki, że dwa obrazki zostały, jeżeli zaktualizowaliśmy to poprzedni

8:17można usunąć. Tym się zajmiemy później. Natomiast w kolejnej lekcji pokażę ci

8:21w jaki sposób możemy te obrazki wyświetlać na stronie.