Summernote Editor membatasi besar file image yang diupload

Anda dapat membatasi ukuran gambar yang disisipkan ke Summernote dengan beberapa cara, baik di sisi klien (browser) maupun di sisi server. Berikut adalah beberapa metode yang dapat Anda gunakan:

1. Pembatasan Ukuran di Sisi Klien (JavaScript)

Metode ini membatasi ukuran gambar sebelum dikirim ke server. Ini memberikan umpan balik langsung kepada pengguna dan mengurangi beban server.

JavaScript

$('#summernote').summernote({
  callbacks: {
    onImageUpload: function (files) {
      for (let i = 0; i < files.length; i++) {
        let file = files[i];
        let maxSize = 2 * 1024 * 1024; // 2MB (sesuaikan sesuai kebutuhan)

        if (file.size > maxSize) {
          alert('Ukuran gambar terlalu besar. Maksimal 2MB.');
          return; // Menghentikan pengunggahan
        }

        // Lanjutkan dengan pengunggahan gambar (misalnya, menggunakan AJAX)
        uploadImage(file);
      }
    },
  },
});

function uploadImage(file) {
  let formData = new FormData();
  formData.append('image', file);

  $.ajax({
    url: '/upload-image', // Ganti dengan URL pengunggahan gambar Anda
    type: 'POST',
    data: formData,
    contentType: false,
    processData: false,
    success: function (url) {
      $('#summernote').summernote('insertImage', url);
    },
    error: function () {
      alert('Gagal mengunggah gambar.');
    },
  });
}

• onImageUpload callback: Fungsi ini dipanggil saat gambar diunggah.
• file.size: Properti ini menyimpan ukuran file dalam byte.
• maxSize: Variabel ini menentukan ukuran maksimum yang diizinkan (dalam byte).
• Peringatan: Jika ukuran file melebihi maxSize, peringatan ditampilkan, dan pengunggahan dihentikan.
• uploadImage(file): fungsi ini adalah contoh fungsi dimana anda akan melakukan upload gambar.

2. Pembatasan Ukuran di Sisi Server

Pembatasan sisi server sangat penting untuk keamanan dan integritas data. Ini mencegah pengguna jahat mengunggah file besar yang dapat membebani server.

• Bahasa sisi server (misalnya, PHP, Python, Node.js):
  • Periksa ukuran file yang diunggah sebelum menyimpan ke server.
  • Jika ukuran file melebihi batas, kembalikan respons kesalahan.
  • Contoh PHP:

PHP

<?php
if ($_FILES['image']['size'] > 2097152) { // 2MB
  http_response_code(400); // Bad Request
  echo 'Ukuran gambar terlalu besar.';
  exit;
}
// Lanjutkan dengan penyimpanan gambar
?>

• Konfigurasi server (misalnya, php.ini, Nginx):
  • Anda juga dapat membatasi ukuran file yang diunggah di tingkat konfigurasi server.
  • Di php.ini, Anda dapat menggunakan pengaturan upload_max_filesize dan post_max_size.
  • Di Nginx, anda dapat menggunakan client_max_body_size.

3. Gabungan Pembatasan Klien dan Server

Praktik terbaik adalah menggabungkan pembatasan sisi klien dan sisi server. Pembatasan sisi klien memberikan umpan balik langsung kepada pengguna, sedangkan pembatasan sisi server memastikan keamanan dan integritas data.

Poin Penting:

• Selalu validasi ukuran file di sisi server.
• Berikan pesan kesalahan yang jelas kepada pengguna.
• Sesuaikan nilai maxSize sesuai dengan kebutuhan aplikasi Anda.
• Pastikan bahwa nilai upload_max_filesize dan post_max_size di konfigurasi server anda lebih besar atau sama dengan nilai yang anda gunakan di sisi klien.

Dengan mengikuti panduan ini, Anda dapat secara efektif membatasi ukuran gambar yang disisipkan ke editor Summernote Anda.

https://g.co/gemini/share/ee8ace3c4b3e