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.

z5212227882610 9891acf97fe1c721b24048d6fa30f3a2 jpg

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.

test php

Bài giải

-------------------- ######## --------------------

Câu hỏi thường gặp liên quan:

Cùng chuyên mục:

Bài tập ReactJS: Conditional Rendering trong ReactJS

Bài tập ReactJS: Lists và Keys trong ReactJS

Bài tập ReactJS: Forms và Controlled Components trong ReactJS

Bài tập ReactJS: Handling Events trong ReactJS

Bài tập ReactJS: State và Lifecycle trong ReactJS

Bài tập ReactJS: Components và Props trong ReactJS

Thiết kế và quản lý form đơn giản với thư viện Formik

React Microservices, xây dựng ứng dụng React mạnh mẽ

Xây dựng ứng dụng CRUD với Redux Toolkit cực dễ dàng

Áp dụng Testing vào React cho ứng dụng của bạn như thế nào?

Performance Optimization trong React Js, tăng hiệu suất cực ngon

React Hook là gì? Tại sao React Hook quan trọng trong dự án?

Hiểu Route React nâng cao trong 10 phút bằng ví dụ

Xây dựng Hook trong React JS (React Custom Hook)

React Hooks là một tính năng mới trong React 16.8. Cho phép sử dụng state…

Tạo ứng dụng ghi chú với ReactJS và Redux

Trong bài viết này mình sẽ hướng dẫn xây dựng một ứng dụng ghi chú…

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cho bạn nào chưa bíết thì Heroku mà môt nền tảng đám mây hỗ trợ…

Tích hợp Redux vào ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách tích…

Tạo máy tính đơn giản bằng ReactJS

Trong bài này ta sẽ xây dựng một ứng dụng máy tính đơn giản bằng…

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Redux trong…

useContext trong React Hook

Trong bài viết này chúng ta sẽ cùnuseContextg nhau đi tìm hiểu về useContext trong…

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered