‫Dosen: Jadi sekarang izinkan pengguna
‫mengunggah foto mereka langsung di situs web kami.
‫Dan inilah yang kami inginkan.
‫Ketika kita mengklik di sini, pada
‫dasarnya kita ingin membuka jendela baru
‫di mana kita dapat memilih gambar baru untuk diunggah dan
‫kemudian ketika kita mengklik tombol
‫ini dan mengirimkan formulir tentu saja kita ingin
‫mengunggah gambar itu ke backend kita dan memperbarui pengguna , Baik.
‫Jadi langkah pertama untuk
‫melakukannya adalah menambahkan elemen input baru ke html kita.
‫Jadi pada dasarnya untuk templat paket kami
‫yang kemudian akan memungkinkan pemilih file itu terbuka
‫ketika kami mengklik di sini.
‫Jadi, mari kita pergi ke pandangan
‫dan akun kita dan jadi inilah formulir di mana kita
‫sekarang harus menambahkan input itu.
‫Jadi sekarang kami memiliki tautan di sini yang mengatakan foto baru.
‫Tapi tentu saja, itu bukan tautan yang akan kita gunakan.
‫Jadi ini benar-benar hanya pengganti.
‫Jadi mari kita singkirkan itu.
‫Jadi yang kita butuhkan adalah masukan.
‫Mati untuk mengetik file.
‫Baiklah, jadi sebelumnya, untuk nama kami
‫memiliki input dengan jenis teks.
‫Kami juga ada input dengan jenis
‫email dan ada juga yang khusus untuk password.
‫Jadi masukan untuk password dan begitu
‫untuk file, ada salah satunya tentunya untuk file.
‫Kami kemudian dapat menentukan jenis file yang benar-benar kami terima.
‫Dan kita bisa melakukan sesuatu seperti ini.
‫Gambar dan kemudian semuanya.
‫Jadi pada dasarnya semua format mendapatkan gambarnya sehingga
‫yang memiliki tipe pikiran yang dimulai dengan
‫gambar diterima di sini.
‫Sekarang mari kita juga memberikan nama kelas
‫ini di sini sehingga tampak diformat dengan baik di halaman kita.
‫Dan ini adalah nama kelas yang saya miliki di css saya.
‫Dan sekarang juga memberikan ID sehingga kita dapat memilihnya
‫dalam skrip java.
‫Tambahkan itu sebagai foto dan akhirnya seperti
‫bidang lainnya, kami juga memberinya nama.
‫Jadi nama foto juga.
‫Dan tentu saja itu adalah foto karena itulah
‫nama yang kami miliki di dokumen
‫pengguna kami dan itu juga nama bidang yang diharapkan multer.
‫Jadi ini di sini adalah unggahan dan kemudian kami juga menentukan label
‫untuk itu.
‫Dan kita set ke
‫empat dan kemudian ID elemen input, oke.
‫Jadi saya tidak yakin
‫apakah Anda terbiasa dengan cara kerjanya di html
‫tetapi itu juga tidak terlalu penting.
‫Jadi yang terjadi adalah ketika kita mengklik
‫label ini di sini, maka akan benar-benar mengaktifkan elemen
‫input yang memiliki ID yang kita tentukan
‫di sini dalam bentuk.
‫Dan dalam hal itu adalah fotonya, baiklah.
‫Dan sebenarnya
‫label inilah yang akan membuat teks memilih foto baru.
‫Jadi ketika kita kemudian mengklik label
‫itu maka akan mengaktifkan
‫input ini yang pada gilirannya akan membuka
‫jendela dari mana kita dapat memilih file.
‫Dan hanya itu yang perlu kita lakukan untuk masukan di sini.
‫Sekarang, seperti sebelumnya, ada dua kemungkinan cara untuk
‫mengirim data ini ke server.
‫Jadi pertama, tanpa API seperti yang kita lakukan di
‫salah satu kuliah sebelumnya.
‫Kami sudah menemukan tindakan yang ingin kami
‫ambil dan juga metodenya.
‫Dan dengan itu
‫data tersebut kemudian langsung dikirim ke server.
‫Sekarang jika kita ingin mengirim
‫file menggunakan metode ini, kita perlu menentukan
‫opsi lain di sini.
‫Dan itu adalah tipe enc.
‫Jadi tipe enc harus berupa data formulir multi-bagian.
‫Jadi data bentuk garis miring multi-bagian, oke.
‫Jadi di sini lagi, kami memiliki nama ini multi-bagian.
‫Dan seperti yang kami
‫katakan sebelumnya, multi-bagian selalu untuk mengirim file ke server.
‫Dan sekali lagi kita benar-benar membutuhkan
‫multi middleware untuk menangani data formulir multi-bagian ini, oke.
‫Dan sebenarnya nama multer berasal dari multi part.
‫Jadi mult, multer, oke.
‫Lagi pula jika kita ingin mengirim data tanpa
‫API, kita harus selalu menentukan
‫tipe enc ini.
‫Kalau tidak, formulir hanya akan mengabaikan file
‫dan tidak mengirimkannya, oke.
‫Tapi seperti yang sudah kita
‫ketahui, kita sebenarnya menggunakannya dengan API, kan.
‫Jadi kita tidak perlu menentukan tipe
‫enc ini tetapi kita harus melakukannya secara terprogram.
‫Jadi mari kita lakukan itu.
‫Jadi sekarang mari kita kirimkan data kita, termasuk
‫tentunya foto dengan melakukan panggilan API
‫seperti yang telah kita lakukan di bagian sebelumnya.
‫Jadi sekarang kita perlu membuka di folder publik kita dan dari
‫js mereka, kita membuka index. js.
‫Jadi di sinilah kami sebenarnya
‫mengirim data untuk diperbarui di server.
‫Yah, kami tidak benar-benar mengirimnya
‫ke sini, tetapi kami memilihnya dari
‫formulir dan kemudian meneruskannya ke pengaturan pembaruan.
‫Baiklah, tapi sekarang ingat bagaimana saya
‫mengatakan bahwa kita perlu
‫membuat ulang data formulir multi-bagian secara terprogram?
‫Dan jadi kita perlu melakukannya seperti ini.
‫Sebut saja formulir dan kemudian data formulir baru.
‫Baiklah, dan sekarang ke formulir
‫itu kita perlu terus menambahkan data baru.
‫Dan pada dasarnya satu tambahkan untuk setiap data
‫yang ingin kita kirim.
‫Jadi bentuk. tambahkan dan yang pertama adalah namanya.
‫Jadi kita tentukan nama di sini dan kemudian nilai nama.
‫Dan tentu saja yang satu ini.
‫Jadi mari kita ambil itu, tempel di sini dan duplikat.
‫Dan selanjutnya adalah email, oke.
‫Lalu mari kita singkirkan ini masuk ke pengaturan pembaruan.
‫Kami kemudian melewati formulir, oke.
‫Dan atau panggilan teks menggunakan axios
‫kemudian akan benar-benar mengenali
‫formulir ini di sini sebagai
‫objek dan akan bekerja sama seperti sebelumnya, oke.
‫Jadi di sini dalam pengaturan pembaruan
‫di mana kami meneruskan data,
‫yang kemudian diteruskan di sini ke dalam permintaan
‫axios, kami tidak perlu mengubah apa pun.
‫Baiklah, jadi ini setara dengan apa yang kita
‫miliki sebelumnya dengan nama dan email tetapi sekarang
‫tentu saja mari kita tambahkan juga foto yang
‫merupakan alasan mengapa kita sekarang harus
‫melakukannya seperti ini.
‫Jadi bentuk. tambahkan lagi maka nama yang ingin
‫kita berikan tentu saja lagi, foto dan
‫kemudian dokumen. getelementbyid
‫yang juga foto tapi sekarang tidak. nilai tetapi sebaliknya.
‫file, baiklah.
‫Dan file-file ini
‫sebenarnya dalam array dan karena hanya
‫ada satu, kita perlu memilih
‫elemen pertama dalam array dan jadi itu nol.
‫Baiklah, dan mari
‫kita log formulir ini ke konsol hanya sampai kita melihat sekilas
‫apa sebenarnya formulir ini.
‫Namun singkatnya, seperti yang saya katakan sebelumnya, pada dasarnya
‫kami membuat ulang data formulir multi-bagian ini.
‫Dan itulah sebenarnya mengapa disebut data formulir karena, yah,
‫data formulir itu juga ada
‫di sini dalam tipe enc multi-bagian ini, oke.
‫Jadi, saya kira itu sebenarnya cukup bagi
‫kita untuk mencobanya sekarang.
‫Jadi seperti yang saya katakan, dalam pengaturan
‫pembaruan, tidak ada yang perlu kita
‫ubah dan juga titik akhir
‫pembaruan saya di mana kami mengirimkan alat
‫permintaan ini sehingga yang ini juga sudah berfungsi dan siap
‫menerima gambar dan bahkan mengubah ukurannya, kan.
‫Jadi sekarang mari kita lanjutkan dan coba ini.
‫Jadi mari kita reload ini sekali lagi.
‫Jadi mari kita lihat, dan pada
‫dasarnya kita sekarang mendapatkan file picker kita.
‫Jadi jendela ini di mana kita sekarang
‫dapat memilih file dan apa yang
‫akan saya lakukan pada dasarnya
‫adalah mengembalikan gambar asli yang kita miliki pada pengguna ini.
‫Jadi itu di desktop,
‫natours, publik, pengguna gambar, dan itu adalah pengguna 11, jadi yang ini.
‫Dan jadi itu sekarang diunggah.
‫Jadi buka, simpan ke pengaturan, dan pembaruan data berhasil.
‫Sekarang tidak langsung tercermin di sini.
‫Baik di sini maupun di atas
‫sini tetapi seharusnya begitu kami mengunggah halaman ini.
‫Dan kami memang bisa melakukannya
‫dengan skrip java tapi itu sebenarnya banyak pekerjaan.
‫Saya telah mencoba melakukannya dan saya
‫melakukannya tetapi kemudian saya berpikir bahwa itu
‫terlalu banyak pekerjaan dan tidak layak untuk diterapkan di sini.
‫Tapi bagaimanapun hanya untuk menguji apakah itu benar-benar berfungsi,
‫sekarang kita perlu memuat ulang halaman.
‫Dan itu terjadi.
‫Ini sekarang gambar baru yang baru saja kami unggah.
‫Sangat bagus.
‫Mari kita lihat folder itu sendiri.
‫Jika itu benar-benar ada, juga, dan
‫jika diubah dengan benar.
‫Jadi itu gambar.
‫Mari kita reload di sini.
‫Dan sekarang saya tidak yakin yang mana itu.
‫Ah, tepatnya.
‫Jadi 500 kali
‫500 dan sekarang benar-benar kabur karena gambar aslinya jauh lebih kecil.
‫Tapi tidak apa-apa, itu tidak masalah sama sekali.
‫Yang penting sekarang kita
‫bisa mengunggah foto langsung dari formulir ini.
‫Saya ingin itu saja untuk melihat
‫konsol kami di sini di data formulir
‫yang saya pikir telah kami log dan tidak muncul di sini karena kami
‫sudah memuat ulang halaman.
‫Tapi bagaimanapun, saya ingin mengembalikan gambar lainnya ke sini.
‫Jadi yang sebenarnya kita upload sebelumnya ada di
‫dev-data, image, dan aarav.
‫Baiklah, data berhasil diperbarui.
‫Langsung saja kita lihat data ponsel kita disini.
‫Ah, tapi kurasa kita tidak bisa benar-benar melihat apa yang kita miliki di sini.
‫Ayo lihat.
‫Nah, kita tidak bisa benar-benar melihat apa yang kita miliki.
‫Oke, jadi saya tidak pernah melihat ini.
‫Dan saya pikir kita mungkin bisa melihat informasinya
‫tapi tidak apa-apa.
‫Yang penting itu benar-benar berhasil.
‫Jadi, jika kita memuat ulang sekarang, maka tentu saja
‫gambar lama ini kembali lagi.
‫Luar biasa, jadi sekali lagi, aplikasi ini
‫benar-benar mulai terasa semakin nyata.