Cara Upload Data Menggunakan Ajax Di Laravel

Javascript – Pengguna aplikasi web akan mendapatkan user experience yang lebih bagus ketika tidak banyak berpindah pindah halaman pada saat mengisi data. Karena biasanya kita cenderung membuat link untuk berpindah halaman saat membuat CRUD.

Dengan menggunakan ajax, aplikasi kalian akan menjadi lebih dinamis . Karena kita bisa mengisi form atau melakukan upload file tanpa harus berpindah halaman. Pada kesempatan kali ini saya akan berbagi cara untuk melakukan upload file menggunakan ajax . Kita akan memanfaatkan modal bootstrap untuk melakukan pengisian form. Framework yang digunakan pada tutorial kali ini adalah laravel dan database postgreesql.

Baca juga: Tutorial Instalasi Laravel

Persiapan Database

Siapkan dulu database dan tabelnya. Silahkan create database di postgreesql, namanya misal latihan. Kemudian kita akan membuat tabelnya dengan nama document_file.

Menambahkan Route

Tambahkan route untuk menampilkan halaman utama untuk menampilkan data. Dan kita akan membuat route untuk proses store ke tabel document_file.

Membuat Tampilan Upload

Selanjutnya buat tampilan yang terdiri dari tabel untuk menampilkan data document_file dan modal untuk mengunggah data, serta fungsi ajax di javascript untuk proses upload file ke controller.

Beri nama filenya index-upload.blade.php

Keterangan :

Tag html untuk upload file dengan id “file_document” yang akan digunakan untuk mengambil inputan datanya di javascript.

Penjelasan:

Kode di atas untuk inisialisasi form data, kemudian mengambil value dari inputan file setelah itu value dari file yang telah di ambil dimasukkan ke form_data dengan nama file yang akan dikirim lewat ajax.

Jadi ketika di controller maka request variabel nya bernama “file”.

Membuat Controller Untuk Upload File

Kita akan membuat controller untuk melakukan proses simpan data ke tabel. Silahkan lihat kode berikut ini, simpan nama controllernya dengan nama uploadFile.php.

Keterangan:

$destination merupakan lokasi folder dimana kita akan menyimpan data.

$file_name merupakan nama file dengan kombinasi uniqid dan nama original supaya meminimalisir nama file yang diupload sama.

Kesimpulan Upload File Menggunakan Ajax

Silahkan kalian jalankan localhost kalian maka tampilannya sebagai berikut.

Tampilan Index

Tampilan di atas jika tabel document_file sudah terisi data. Silahkan klik tambah untuk melakukan tambah file.

Tampilan Modal

Pilih file atau dokumen yang ingin diupload maka proses simpan ditandai dengan munculnya loader dan setelah itu halaman akan melakukan reload untuk menampilkan ulang data yang sudah tersimpan di tabel.

Semoga apa yang saya bagikan bermanfaat. 🙂

About the Author: ikhsank6

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *