Membuat Fitur Upload & Show File dengan React JS & Express JS – 04 SFTP

Jika Anda ingin menambahkan fitur upload dan menampilkan file dalam aplikasi web yang dibuat menggunakan React JS dan Express JS, Anda dapat menggunakan protokol SFTP (Secure File Transfer Protocol). Dengan SFTP, Anda dapat mentransfer file secara aman melalui jaringan, sehingga sangat cocok untuk fitur upload file pada aplikasi web Anda.

Langkah 1: Membuat Server Express JS untuk Menerima File

Pertama-tama, Anda perlu membuat server Express JS yang akan menerima file yang diunggah dari aplikasi web React JS Anda. Anda dapat menggunakan middleware seperti ‘multer’ untuk menangani pengunggahan file.

Contoh Kode Server Express JS:

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

            const storage = multer.diskStorage({
                destination: function (req, file, cb) {
                    cb(null, 'uploads/') // Folder tempat file akan disimpan
                },
                filename: function (req, file, cb) {
                    cb(null, file.originalname) // Nama file yang disimpan
                }
            });

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

            app.post('/upload', upload.single('file'), (req, res) => {
                res.status(200).send('File berhasil diunggah');
            });

            app.listen(3001, () => {
                console.log('Server berjalan di port 3001');
            });
        
    

Langkah 2: Membuat Komponen React JS untuk Mengunggah File

Setelah Anda membuat server Express JS untuk menerima file, Anda dapat membuat komponen React JS untuk mengunggah file ke server tersebut. Anda dapat menggunakan ‘axios’ atau ‘fetch’ untuk melakukan permintaan POST ke endpoint ‘/upload’ pada server.

Contoh Kode Komponen React JS:

        
            import React, { useState } from 'react';
            import axios from 'axios';

            const FileUploader = () => {
                const [file, setFile] = useState(null);

                const handleFileChange = (e) => {
                    setFile(e.target.files[0]);
                };

                const handleUpload = async () => {
                    const formData = new FormData();
                    formData.append('file', file);

                    try {
                        const response = await axios.post('http://localhost:3001/upload', formData, {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        });
                        console.log(response.data);
                    } catch (error) {
                        console.error(error);
                    }
                };

                return (
                    

                        
                        Unggah File
                    
                );
            };

            export default FileUploader;
        
    

Langkah 3: Menampilkan File yang Diunggah dari Server

Setelah file diunggah ke server, Anda dapat membuat endpoint lagi pada server Express JS untuk memberikan akses ke file yang diunggah. Kemudian, Anda dapat membuat komponen React JS untuk menampilkan file tersebut kepada pengguna.

Contoh Kode Server Express JS:

        
            app.use(express.static('uploads')); // Memungkinkan akses ke file yang diunggah

            app.get('/files', (req, res) => {
                const files = fs.readdirSync('uploads');
                res.json(files);
            });
        
    

Contoh Kode Komponen React JS:

        
            import React, { useEffect, useState } from 'react';
            import axios from 'axios';

            const FileList = () => {
                const [files, setFiles] = useState([]);

                useEffect(() => {
                    axios.get('http://localhost:3001/files')
                        .then(response => {
                            setFiles(response.data);
                        })
                        .catch(error => {
                            console.error(error);
                        });
                }, []);

                return (
                    

                        
Daftar File
                        

                            {files.map((file, index) => (
                                
{file}
                            ))}
                        
                    
                );
            };

            export default FileList;
        
    

Dengan langkah-langkah di atas, Anda dapat membuat fitur upload dan menampilkan file dalam aplikasi web Anda menggunakan React JS dan Express JS dengan protokol Secure File Transfer Protocol (SFTP). Semoga artikel ini bermanfaat!