FluentStack

File Upload Concepts

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 18: Backend Basics for Frontend EngineersAdvanced65 menitBahasa Indonesia

File Upload Concepts

Memetakan file input, storage object, metadata, permission, serta loading/error UI agar upload feature dapat diintegrasikan dan di-QA dengan aman.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Membedakan file object di storage dari metadata di database
  • Menjelaskan flow upload dari pilihan file sampai UI success/error
  • Memahami client check sebagai UX feedback, bukan security enforcement
  • Menentukan state serta evidence yang perlu diuji pada upload feature
File UploadsStorageFormDataProduct FlowsError States

Isi lesson

6 blok
  1. 1.
    File dan informasi tentang file biasanya disimpan terpisahBelum selesaiWajib
  2. 2.
    Flow attachment yang dapat dibaca frontendBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Client-side file check bukan security gateBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

File dan informasi tentang file biasanya disimpan terpisah

Wajib

Saat learner menambahkan attachment PDF pada course note, browser memilih File dari input. Client dapat memberi feedback awal seperti ukuran atau jenis file yang diharapkan, lalu mengirim file sesuai upload contract. Storage service menyimpan object file, sedangkan database dapat menyimpan metadata seperti attachment id, course_id, owner id, object path, file name yang aman ditampilkan, content type, dan ukuran. UI kemudian memperbarui daftar attachment atau memberi recovery bila upload gagal.

File input adalah untrusted input. Validasi client membantu experience dan menghindari request yang jelas salah, tetapi server/storage policy tetap perlu memeriksa identity, authorization, limit, serta aturan yang relevan. Jangan menyebut preview browser sebagai bukti file aman, jangan menjadikan file name sebagai identity user, dan jangan memasukkan secret upload credential ke client code.

Bagian ini memengaruhi progres lesson.

Flow attachment yang dapat dibaca frontend

Wajib
bash
1. User memilih file melalui input.
2. UI memberi feedback size/type awal dan state uploading.
3. Browser mengirim file sesuai upload contract.
4. Server atau storage policy memeriksa identity, permission, dan limits.
5. Storage menyimpan object file; database menyimpan metadata serta ownership.
6. UI refetch atau menerima hasil lalu menampilkan success, preview aman, atau recovery error.

FormData dapat merepresentasikan field form dan file untuk request multipart sesuai contract. Namun detail endpoint, signed upload, scanning, preview processing, dan serving URL ditentukan backend/storage provider. Frontend bertanggung jawab memberi state yang jelas, mengirim input sesuai contract, dan tidak menampilkan file sebagai berhasil sebelum result yang dipercaya diterima.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Map course attachment upload flow

Susun flow attachment yang memisahkan file object, metadata, security boundary, dan UI state.

Tujuan awal: Fokus di tab TS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

5 cek otomatis4 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Manakah contoh metadata attachment, bukan object file itu sendiri?

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

Client-side file check bukan security gate

Mengecek extension, MIME type, atau size di browser berguna untuk feedback cepat, tetapi input dapat dimanipulasi dan browser tidak menjadi otoritas keamanan. Server/storage tetap menentukan file mana yang diterima, siapa yang boleh upload atau membaca, serta bagaimana file diproses. Laporkan gagal upload dengan request context dan error aman, bukan dengan menyimpan file credential atau raw response sensitif di UI.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Storage menyimpan object file; database menyimpan metadata, relation, dan ownership.
  • Upload flow membutuhkan selected, uploading, success, dan error/recovery UI state.
  • Client check membantu UX, tetapi server/storage policy tetap menegakkan security dan limits.
  • File preview atau nama file bukan bukti file aman atau user authorized.
  • Berikutnya, Uji Kompetensi menyatukan SQL, relationship, service boundary, cache, dan file upload flow.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: File dan informasi tentang file biasanya disimpan terpisah.

Memuat progresReview module