Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng File Upload trong ReactJS
Trong bài tập này, mình sẽ tạo một tính năng cho phép người dùng tải lên một tệp tin và gửi yêu cầu POST tới API để lưu trữ file trên máy chủ.
Mình sẽ tiếp tục phát triển ứng dụng của mình bằng cách thêm một tính năng cho phép tải lên file.
Bước 1: Tạo Component FileUpload
Trong component FileUpload, mình sẽ tạo một giao diện cho phép người dùng chọn file và gửi yêu cầu POST tới API để tải lên file.
// src/components/FileUpload.js
import React, { useState } from 'react';
import axios from 'axios';
const FileUpload = () => {
const [file, setFile] = useState(null);
const [error, setError] = useState(null);
const [successMessage, setSuccessMessage] = useState(null);
const handleFileChange = e => {
setFile(e.target.files[0]);
};
const handleSubmit = async e => {
e.preventDefault();
try {
const formData = new FormData();
formData.append('file', file);
await axios.post('https://example.com/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
setSuccessMessage('File uploaded successfully!');
} catch (error) {
console.error('Error uploading file:', error);
setError('Failed to upload file. Please try again.');
}
};
return (
<div>
<h2>File Upload</h2>
{error && <div>Error: {error}</div>}
{successMessage && <div>{successMessage}</div>}
<form onSubmit={handleSubmit}>
<input type="file" onChange={handleFileChange} />
<button type="submit">Upload</button>
</form>
</div>
);
};
export default FileUpload;
Bước 2: Import và sử dụng Component FileUpload
Import component FileUpload vào trong App.js và sử dụng nó trong ứng dụng của bạn.
// src/App.js
import React from 'react';
import FileUpload from './components/FileUpload';
import './App.css';
function App() {
return (
<div className="App">
<FileUpload />
</div>
);
}
export default App;
Kết quả:
Khi người dùng chọn file và nhấn nút "Upload", file sẽ được tải lên máy chủ thông qua một yêu cầu POST tới API. Sau khi tải lên thành công, file sẽ được lưu trữ trên máy chủ và có sẵn để sử dụng.
Kết bài
Trong bài tập này, mình đã tạo một tính năng cho phép người dùng tải lên một file và gửi yêu cầu POST tới API để lưu trữ file trên máy chủ. Điều này cung cấp cho người dùng khả năng tương tác với dữ liệu file và mở rộng tính năng của ứng dụng.
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Fetching Data from API trong ReactJS
- Displaying Details trong ReactJS
- Searching Data trong ReactJS
- Pagination trong ReactJS
- Loading Indicator trong ReactJS
- Error Handling trong ReactJS
- Form Submission trong ReactJS
- Authentication trong ReactJS
- Deleting Data trong ReactJS
- File Upload trong ReactJS
- Real-time Updates trong ReactJS
- External APIs Integration trong ReactJS
- Rate Limiting và Throttling trong ReactJS
