Node.js - Mengunggah Berkas: Panduan untuk Pemula

Hai teman-teman, super bintang coding masa depan! Selamat datang ke perjalanan menarik kami ke dunia pengunggahan berkas dengan Node.js. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya – kita akan mulai dari awal dan membangun tingkat demi tingkat. Pada akhir panduan ini, Anda akan mengunggah berkas seperti seorang ahli!

Pengenalan ke Pengunggahan Berkas di Node.js

Sebelum kita masuk ke detailnya, mari bicarakan mengapa pengunggahan berkas penting. Bayangkan Anda membuat aplikasi media sosial tempat pengguna dapat berbagi foto. Atau mungkin Anda sedang membuat sistem manajemen dokumen untuk perusahaan. Dalam kedua kasus ini, Anda memerlukan cara bagi pengguna untuk mengirim berkas ke server Anda. Itu di mana pengunggahan berkas memainkan perannya!

Node.js, lingkungan runtime JavaScript yang dapat dipercaya, menyediakan beberapa cara untuk menghandle pengunggahan berkas. Hari ini, kita akan fokus pada dua pustaka populer: Formidable dan Multer. Bayangkan ini sebagai superhero pengunggahan berkas Anda, masing-masing memiliki kekuatan khususnya sendiri!

Formidable: Teman Pertama Anda dalam Pengunggahan Berkas

Apa Itu Formidable?

Formidable adalah seperti teman yang dapat dipercaya yang selalu ada untuk membantu Anda memindahkan barang. Itu adalah module Node.js yang membuat penguraian data formulir, khususnya pengunggahan berkas, menjadi mudah. Mari lihat bagaimana menggunakannya!

Menyiapkan Formidable

Pertama-tama, kita perlu menginstal Formidable. Buka terminal Anda dan ketik:

npm install formidable

Perintah ini seperti pergi ke toko superhero dan memilih kostum Formidable. Sekarang Anda siap untuk mulai mengunggah!

Pengunggahan Berkas Dasar dengan Formidable

Mari buat server sederhana yang dapat menghandle pengunggahan berkas. Ini adalah kode nya:

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer((req, res) => {
if (req.url == '/fileupload') {
const form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
const oldPath = files.filetoupload.filepath;
const newPath = 'C:/Users/YourName/uploads/' + files.filetoupload.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
res.write('Berkas diunggah dan dipindahkan!');
res.end();
});
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload"><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

mariuraikan ini:

1. Kita membuat server menggunakan http.createServer().
2. Jika URL adalah '/fileupload', kita gunakan Formidable untuk menguraikan formulir masuk.
3. Kita memindahkan berkas yang diunggah dari lokasi sementara ke lokasi permanen.
4. Jika URL adalah sesuatu lain, kita tampilkan formulir unggah sederhana.

Menghandle Pengunggahan Berkas Banyak

Apa bila Anda ingin mengunggah banyak berkas sekaligus? Tidak ada masalah! Ini adalah bagaimana Anda dapat mengubah kode nya:

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer((req, res) => {
if (req.url == '/fileupload') {
const form = new formidable.IncomingForm();
form.multiples = true;
form.parse(req, (err, fields, files) => {
if (Array.isArray(files.filetoupload)) {
files.filetoupload.forEach((file) => {
const oldPath = file.filepath;
const newPath = 'C:/Users/YourName/uploads/' + file.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
});
});
} else {
const oldPath = files.filetoupload.filepath;
const newPath = 'C:/Users/YourName/uploads/' + files.filetoupload.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
});
}
res.write('Berkas diunggah dan dipindahkan!');
res.end();
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload" multiple><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

Perubahan utama di sini adalah:

1. Kita set form.multiples = true untuk mengijinkan pengunggahan banyak berkas.
2. Kita memeriksa jika files.filetoupload adalah array (banyak berkas) atau objek (satuan berkas).
3. Kita gunakan forEach untuk menghandle banyak berkas jika perlu.

Multer: Anak Baru di Lingkungan

Pengenalan ke Multer

Sekarang, mari temu teman superhero pengunggahan berkas lainnya: Multer. Multer adalah seperti saudara muda yang lebih cool dari Formidable. Itu dirancang khusus untuk menghandle multipart/form-data, yang sempurna untuk pengunggahan berkas.

Menyiapkan Multer

Untuk memulai dengan Multer, instalnya menggunakan npm:

npm install multer

Pengunggahan Berkas Dasar dengan Multer

Ini adalah contoh sederhana bagaimana menggunakan Multer:

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();

const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
}
});

const upload = multer({ storage: storage });

app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});

app.post('/upload', upload.single('filetoupload'), (req, res, next) => {
const file = req.file;
if (!file) {
const error = new Error('Silakan unggah berkas');
error.httpStatusCode = 400;
return next(error);
}
res.send(file);
});

app.listen(3000, () => console.log('Server dimulai di port 3000'));

mariuraikan ini:

1. Kita menyiapkan mesin penyimpanan yang mengatakan kepada Multer di mana untuk menyimpan berkas dan bagaimana menamainya.
2. Kita membuat instance unggah menggunakan pengaturan penyimpanan kami.
3. Kita tentukan rute untuk formulir unggah dan lainnya untuk menghandle pengunggahan berkas.
4. Dalam rute unggah, kita gunakan upload.single('filetoupload') untuk menghandle unggahan berkas tunggal.

Menghandle Pengunggahan Berkas Banyak dengan Multer

Multer membuatnya sangat mudah untuk menghandle pengunggahan banyak berkas. Ini adalah bagaimana:

app.post('/upload', upload.array('filetoupload', 12), (req, res, next) => {
const files = req.files;
if (!files) {
const error = new Error('Silakan pilih berkas');
error.httpStatusCode = 400;
return next(error);
}
res.send(files);
});

Perubahan utama di sini adalah menggunakan upload.array('filetoupload', 12) instead of upload.single(). '12' menentukan jumlah maksimum berkas yang dapat diunggah.

Membandingkan Formidable dan Multer

Sekarang kita telah melihat Formidable dan Multer dalam aksi, mari bandingkan mereka:

Fitur	Formidable	Multer
Mudah digunakan	Sederhana dan mudah dipahami	Memerlukan lebih banyak pengaturan tetapi menawarkan kontrol lebih banyak
Integrasi	Bekerja dengan semua server Node.js	Dirancang untuk bekerja dengan Express
Penanganan berkas	Dapat menghandle baik berkas maupun field	Khusus untuk pengunggahan berkas
Personalisasi	Kurang fleksibel	Sangat fleksibel
Pengunggahan banyak berkas	Memerlukan kode tambahan	Dukungan bawaan

Kesimpulan

Selamat! Anda telah meningkatkan keterampilan Node.js Anda dengan belajar menghandle pengunggahan berkas. Apakah Anda memilih Formidable untuk ke mudahannya atau Multer untuk kekuatan dan fleksibilitasnya, Anda sekarang siap untuk menambahkan fungsi pengunggahan berkas ke aplikasi Node.js Anda.

Ingat, latihan membuat Anda semakin mahir. Cobalah membuat proyek kecil yang menggunakan pengunggahan berkas – mungkin aplikasi berbagi gambar sederhana atau sistem penyimpanan dokumen. Semakin Anda kode, semakin Anda akan merasa nyaman dengan konsep ini.

Selamat coding, dan may your uploads always be successful!

Credits: Image by storyset