Pada kesempatan kali ini kita akan membuat sebuah fitur upload gambar / file menggunakan *ajax method* pada Laravel. Sebagaimana yang anda ketahui, *PHP* atau *Laravel* telah memiliki fitur dasar yang berfungsi untuk *menghandle* *upload file* / gambar. Fitur *upload* ini sangat menarik sebab kebanyakan *user* menginginkan sebuah fitur menyimpan gambar untuk profil, produk, dll. 
Laravel telah menyediakan cara mudah untuk menyimpan gambar kedalam server, Laravel juga menyediakan fitur validasi untuk ukuran *file, image, mime type, dll*. Sehingga apabila dipadukan dengan *ajax* akan menciptakan sebuah fitur yang cukup elegan dari sisi *UI*. Dalam membuat fitur ini kita juga akan belajar hal lain seperti membuat *Laravel project, migration, mode, route, blade file, dll*. Jadi setiap level keilmuan dapat ikut belajar bersama. 

<p class="baca-juga">Baca Juga: <a href="https://www.codepolitan.com/kumpulan-ikon-terbaik-untuk-desain-web-5a018ab537858">Kumpulan Ikon Terbaik Untuk Design Web</a></p>
#### Install Framework Laravel 

Kita akan memulainya dari awal, jadi kita harus menginstall Laravel *fresh install* menggunakan *command line*, buka terminal anda dan jalankan *command* berikut: 

```
composer create-project --prefer-dist laravel/laravel ajax
```

#### Konfigurasi Database

Setelah instalasi Laravel berhasil, lakukan konfigurasi *database* dengan mengedit file **.env** lalu pada bagian dibawah ini, sesuaikan informasi *database* anda:

```
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret
```

#### Membuat Migration & Model

Pada bagian ini, kita akan membuat *migration* yang berfungsi untuk membuat *table* dan *model* untuk menangani table tersebut. Untuk membuat *migration* sekaligus *model* nya, jalankan *command* berikut:

```
php artisan make:model Upload_file -m
```

Selanjutnya kita akan memasukkan beberapa *field* untuk menampung judul dan nama gambar yang akan di *upload*. Buka file `CreateUploadFilesTable` di direktori `database/migration`, dan masukkan kode berikut: 

```
<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateUploadFilesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('upload_files', function (Blueprint $table) {
            $table->increments('id');
            $table->string('judul');
            $table->string('gambar');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('upload_files');
    }
}

```

Kemudian jalankan *command* berikut: 

```
php artisan migrate
```

Jangan lupa untuk mengedit file model `app/Upload_file.php`:

```
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Upload_file extends Model
{
    protected $fillable = ['judul', 'gambar'];
}

```

#### Membuat Controller

Pada langkah ini kita akan membuat sebuah *controller* dengan nama *UploadFileController*, *controller* ini akan mengatur *layout* yang akan digunakan dan validasi *file* yang akan di *upload*. Jalankan *command* berikut: 

```
php artisan make:controller UploadFileController
```

 Kemudian buka file `app/Http/Controllers/UploadFileController.php` kemudian tambahkan *code* dibawah ini:

```
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Validator;
use App\Upload_file;

class UploadFileController extends Controller
{
    public function uploadFile()
    {
    	return view('uploadfile');
    }

    public function StoreUploadFile(Request $request)
    {
      $validator = Validator::make($request->all(), [
        'judul' => 'required',
        'gambar' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
      ]);

      if ($validator->passes()) {
        $input = $request->all();
        $input['gambar'] = time().'.'.$request->gambar->getClientOriginalExtension();
        $request->gambar->move(public_path('gambar'), $input['gambar']);

        Upload_file::create($input);
        return response()->json(['success'=>'Berhasil']);
      }

      return response()->json(['error'=>$validator->errors()->all()]);
    }
}

```

#### Membuat Route

Karena *controller* telah selesai, selanjutnya kita akan membuat *route* untuk mengatur jalannya aplikasi dengan menggunakan *method* yang telah kita buat pada *controller*. Buka file `routes/web.php` kemudian tambahkan *code*:

```
Route::get('/', 'UploadFileController@uploadFile');
Route::post('upload', 'UploadFileController@StoreUploadFile');
```

<p class="baca-juga">Baca Juga: <a href="https://www.codepolitan.com/notifikasi-dengan-flash-message-di-laravel-5a00ef0324381">Notifikasi dengan Flash Message di Laravel</a></p>
#### Membuat View

Langkah terakhir adalah membuat *view* untuk *layout* sekaligus menggunakan *method ajax* untuk menangani *form upload* yang akan kita buat. Buat *file* `uploadfile.blade.php` dan tempatkan pada direktori *resources/views*, kemudian tambahkan *code* berikut:

```
<!DOCTYPE html>
<html>
<head>
  <title>Membuat Fitur Upload Menggunakan Ajax di Laravel</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h1>Membuat Fitur Upload Menggunakan Ajax di Laravel</h1>
  <form action="{{ url('upload') }}" enctype="multipart/form-data" method="POST">
  	<div class="alert alert-danger print-error-msg" style="display:none">
      <ul></ul>
    </div>

    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <div class="form-group">
      <label>Judul:</label>
      <input type="text" name="judul" class="form-control" placeholder="Masukkan Judul">
    </div>

	  <div class="form-group">
      <label>Gambar:</label>
      <input type="file" name="gambar" class="form-control">
    </div>

    <div class="form-group">
      <button class="btn btn-success upload-image" type="submit">Kirim</button>
    </div>
  </form>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
  $("body").on("click",".upload-image",function(e){
    $(this).parents("form").ajaxForm(options);
  });

  var options = { 
    complete: function(response) 
    {
    	if($.isEmptyObject(response.responseJSON.error)){
    		$("input[name='judul']").val('');
    		alert('Upload gambar berhasil.');
    	}else{
    		printErrorMsg(response.responseJSON.error);
    	}
    }
  };

  function printErrorMsg (msg) {
	$(".print-error-msg").find("ul").html('');
	$(".print-error-msg").css('display','block');
	$.each( msg, function( key, value ) {
		$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
	});
  }
</script>

</body>
</html>
```

Persiapan telah selesai, langkah terakhir jalankan: 
```
php artisan serve
```

Sampai disini fitur upload telah berhasil kita buat, adapun untuk menampilkan hasil yang telah kita upload bisa dilakukan dengan dua cara:
1. Menampilkan *single file* setelah berhasil di *upload*
2. Menampilkan semua *file* yang telah di *upload*

Mari kita coba satu persatu, untuk menampilkan hasil setelah berasil di*upload* cukup tambahkan potongan *code* berikut:
```
<div class="tampil" style="display:none">
  <img src="" style="height:300px;width:500px">
</div>
```
Pada bagian *ajax*, silahkan tambahkan potongan *code* berikut:
```
$(".tampil").css('display','block');
$(".tampil").find('img').attr('src','/gambar/'+response.responseJSON.gambar);
```
Sehingga *code* lengkap pada `resources/views/uploadfile.blade.php` akan menjadi seperti ini:
```
<!DOCTYPE html>
<html>
<head>
  <title>Membuat Fitur Upload Menggunakan Ajax di Laravel</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h1>Membuat Fitur Upload Menggunakan Ajax di Laravel</h1>
  <form action="{{ url('upload') }}" enctype="multipart/form-data" method="POST">
  	<div class="alert alert-danger print-error-msg" style="display:none">
      <ul></ul>
    </div>

    <div class="print-img" style="display:none">
      <img src="" style="height:300px;width:500px">
    </div>

    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <div class="form-group">
      <label>Judul:</label>
      <input type="text" name="judul" class="form-control" placeholder="Masukkan Judul">
    </div>

	  <div class="form-group">
      <label>Gambar:</label>
      <input type="file" name="gambar" class="form-control">
    </div>

    <div class="form-group">
      <button class="btn btn-success upload-image" type="submit">Kirim</button>
    </div>
  </form>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
  $("body").on("click",".upload-image",function(e){
    $(this).parents("form").ajaxForm(options);
  });

  var options = { 
    complete: function(response) 
    {
    	if($.isEmptyObject(response.responseJSON.error)){
    		$("input[name='judul']").val('');
        $(".print-img").css('display','block');
        $(".print-img").find('img').attr('src','/gambar/'+response.responseJSON.gambar);
    		alert('Upload gambar berhasil.');
    	}else{
    		printErrorMsg(response.responseJSON.error);
    	}
    }
  };

  function printErrorMsg (msg) {
	$(".print-error-msg").find("ul").html('');
	$(".print-error-msg").css('display','block');
	$.each( msg, function( key, value ) {
		$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
	});
  }
</script>

</body>
</html>
```

![](https://static.cdn-cdpl.com/source/2e2e60f587dfd485821293c09e51a70b/Fitur_Upload_%232.png)
Cara lain bisa dengan menampilkan nya dalam bentuk list table, ubah method uploadFile di app/Http/Controllers/UploadFileController.php menjadi:
```
public function uploadFile()
{
   $uploadFile = Upload_file::get();
   return view('uploadfile', compact('uploadFile'));
}
```
Lalu pada file `uploadfile.blade.php` tambahkan *code* berikut:
```
<hr>
  <div class="row">
      <div class="col-md-4">
      <table class="table table-hover">
        <tr>
          <th>#</th>
          <th>Judul</th>
          <th>Gambar</th>
        </tr>
        @if (count($uploadFile) > 0)
        @foreach ($uploadFile as $uploadFiles)
        <tr>
          <td></td>
          <td>{{ $uploadFiles->judul }}</td>
          <td><img src="{{ asset('gambar/' . $uploadFiles->gambar) }}" width="50px" height="50px"></td>
        </tr>
        @endforeach
        @else
        <tr>
          <td colspan="3" class="text-center">Tidak ada data</td>
        </tr>
        @endif
      </table>
    </div>
  </div>
```
Sehingga file `uploadfile.blade.php` akan menjadi:
```
<!DOCTYPE html>
<html>
<head>
  <title>Membuat Fitur Upload Menggunakan Ajax di Laravel</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h1>Membuat Fitur Upload Menggunakan Ajax di Laravel</h1>
  <form action="{{ url('upload') }}" enctype="multipart/form-data" method="POST">
  	<div class="alert alert-danger print-error-msg" style="display:none">
      <ul></ul>
    </div>

    <div class="tampil" style="display:none">
      <img src="" style="height:300px;width:500px">
    </div>

    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <div class="form-group">
      <label>Judul:</label>
      <input type="text" name="judul" class="form-control" placeholder="Masukkan Judul">
    </div>

	  <div class="form-group">
      <label>Gambar:</label>
      <input type="file" name="gambar" class="form-control">
    </div>

    <div class="form-group">
      <button class="btn btn-success upload-image" type="submit">Kirim</button>
    </div>
  </form>

  <hr>
  <div class="row">
      <div class="col-md-4">
      <table class="table table-hover">
        <tr>
          <th>#</th>
          <th>Judul</th>
          <th>Gambar</th>
        </tr>
        @if (count($uploadFile) > 0)
        @foreach ($uploadFile as $uploadFiles)
        <tr>
          <td></td>
          <td>{{ $uploadFiles->judul }}</td>
          <td><img src="{{ asset('gambar/' . $uploadFiles->gambar) }}" width="50px" height="50px"></td>
        </tr>
        @endforeach
        @else
        <tr>
          <td colspan="3" class="text-center">Tidak ada data</td>
        </tr>
        @endif
      </table>
    </div>
  </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
  $("body").on("click",".upload-image",function(e){
    $(this).parents("form").ajaxForm(options);
  });

  var options = { 
    complete: function(response) 
    {
    	if($.isEmptyObject(response.responseJSON.error)){
    		$("input[name='judul']").val('');
        $(".tampil").css('display','block');
        $(".tampil").find('img').attr('src','/gambar/'+response.responseJSON.gambar);
    		alert('Upload gambar berhasil.');
    	}else{
    		printErrorMsg(response.responseJSON.error);
    	}
    }
  };

  function printErrorMsg (msg) {
	$(".print-error-msg").find("ul").html('');
	$(".print-error-msg").css('display','block');
	$.each( msg, function( key, value ) {
		$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
	});
  }
</script>

</body>
</html>
```
![](https://static.cdn-cdpl.com/source/2e2e60f587dfd485821293c09e51a70b/Fitur_Upload_%233.png)

Membuat Fitur Upload Menggunakan Ajax di Laravel

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Membuat Fitur Upload Menggunakan Ajax di Laravel

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Menggunakan Seeder di Laravel

Sharing Data Menggunakan View Composer Di Laravel

Protect Menggunakan Middleware Laravel

Pencarian Autocomplete di Laravel Menggunakan Ajax

API Otentikasi Menggunakan Passport Laravel

Notifikasi Dengan Flash Message di Laravel