Formulir & Masukan
FileUpload (Unggah Berkas Persyaratan)
Area dropzone untuk mengunggah foto KTP, Kartu Keluarga, bukti pembayaran PBB, atau surat pengantar RT/RW.
Komponen FileUpload (.mjl-file-upload) menyediakan area sentuh luas bagi pengguna seluler untuk memilih foto berkas dari galeri kamera, serta fitur seret-dan-lepas (drag & drop) pada peramban komputer.
1. Pratinjau FileUpload Dropzone
Pratinjau Unggah Berkas KTP
Klik untuk memilih foto
atau seret berkas ke sini
Format yang didukung: JPG, PNG, atau PDF (Maksimal 2 MB)
Penggunaan di Berbagai Teknologi
Salin contoh sesuai teknologi proyek Anda. Semua versi memakai class dari @majalengka/css. Komponen siap pakai tersedia di @majalengka/vue; untuk React, Angular, Laravel, dan PHP, contoh di bawah sudah berupa pembungkus kecil yang bisa langsung disalin ke proyek.
<div class="mjl-form-field">
<label class="mjl-label" for="ktp">Foto KTP Elektronik</label>
<div class="mjl-file-upload">
<p><strong>Klik untuk memilih berkas</strong> atau seret ke sini</p>
<p class="mjl-help-text">JPG, PNG, atau PDF, maksimal 2 MB</p>
<input type="file" id="ktp" name="ktp" accept="image/*,.pdf">
</div>
</div>
<script setup lang="ts">
import { ref } from 'vue';
import { MjlFileUpload } from '@majalengka/vue';
const berkas = ref<FileList | null>(null);
</script>
<template>
<label class="mjl-label" for="ktp">Foto KTP Elektronik</label>
<MjlFileUpload id="ktp" accept="image/*,.pdf" hint="JPG, PNG, atau PDF, maksimal 2 MB" @update:model-value="berkas = $event" />
</template>
import { useState } from 'react';
export function UnggahKtp() {
const [nama, setNama] = useState('');
return (
<div className="mjl-form-field">
<label className="mjl-label" htmlFor="ktp">Foto KTP Elektronik</label>
<div className="mjl-file-upload">
<p><strong>{nama || 'Klik untuk memilih berkas'}</strong></p>
<p className="mjl-help-text">JPG, PNG, atau PDF, maksimal 2 MB</p>
<input type="file" id="ktp" accept="image/*,.pdf" onChange={(e) => setNama(e.target.files?.[0]?.name ?? '')} />
</div>
</div>
);
}
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-unggah-ktp',
standalone: true,
template: `
<div class="mjl-form-field">
<label class="mjl-label" for="ktp">Foto KTP Elektronik</label>
<div class="mjl-file-upload">
<p><strong>{{ fileName() || 'Klik untuk memilih berkas' }}</strong></p>
<p class="mjl-help-text">JPG, PNG, atau PDF, maksimal 2 MB</p>
<input type="file" id="ktp" accept="image/*,.pdf" (change)="onFile($event)" />
</div>
</div>
`,
})
export class UnggahKtp {
fileName = signal('');
onFile(e: Event) { this.fileName.set((e.target as HTMLInputElement).files?.[0]?.name ?? ''); }
}
<form method="POST" action="{{ route('permohonan.berkas') }}" enctype="multipart/form-data">
@csrf
<div class="mjl-form-field">
<label class="mjl-label" for="ktp">Foto KTP Elektronik</label>
<div class="mjl-file-upload">
<p><strong>Klik untuk memilih berkas</strong> atau seret ke sini</p>
<p class="mjl-help-text">JPG, PNG, atau PDF, maksimal 2 MB</p>
<input type="file" id="ktp" name="ktp" accept="image/*,.pdf">
</div>
@error('ktp')<p class="mjl-error-text" role="alert">{{ $message }}</p>@enderror
</div>
</form>
<form method="post" enctype="multipart/form-data">
<div class="mjl-form-field">
<label class="mjl-label" for="ktp">Foto KTP Elektronik</label>
<div class="mjl-file-upload">
<p><strong>Klik untuk memilih berkas</strong> atau seret ke sini</p>
<p class="mjl-help-text">JPG, PNG, atau PDF, maksimal 2 MB</p>
<input type="file" id="ktp" name="ktp" accept="image/*,.pdf">
</div>
</div>
</form>