Sila Setthakan-anan fResult

## index.html
<!DOCTYPE html>
<html>
<head>
<style>
  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

## UploadFile.js
import React from 'react';
import { CancelToken } from 'axios'

const FileUpload = () => {
  const [fileList, setFileList] = useState([]) // List of File instance
  const [sizeAmount, setSizeAmount] = useState('') // sum files size (such as '444.44 MB' or '2.15 GB')
  const [uploadedSize, setUploadedSize] = useState('') // sum uploaded (such as '444.44 MB' or '2.15 GB')
  const [fileCount, setFileCount] = useState(0)
  const [progress, setProgress] = useState(0) // sum uploaded (percent)
  const [prevLoaded, setPrevLoaded] = useState(0) // previous progressEvent.loaded

## useAsync.js
import { useState, useEffect, useCallback } from 'react'

export default (asyncFunction, immediate = true) => {
  const [isLoading, setIsLoading] = useState(false)
  const [value, setValue] = useState(null)
  const [error, setError] = useState(null)

  const execute = useCallback(
    async (params = {}, config = {}) => {
      setIsLoading(true)

## Axios.js
import axios from 'axios'

export default axios.create({
  baseURL: 'http://localhost:3002',
  headers: { 'Content-Type': 'application/json' }
})

## API.js (service)
import axios from './Axios'

export const uploadFiles = async (params = {}, config = {}) => {
  return await axios.post('/upload', params, config)
}

## package.json
{
  /* ตัด code บางส่วนออก เพื่อความกระชับ */
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  /* ตัด code บางส่วนออก เพื่อความกระชับ */
}

## craco.config.js
const tailwind = require('tailwindcss')
const postcss = require('autoprefixer')

module.exports = {
  style: {
    postcss: {
      plugins: [tailwind(), postcss()]
    }
  }
}

## tailwind.config.js
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        dark: {
          elem: '#2B3945',
          bg: '#202C37',
          text: '#FFFFFF'

## src\ThemeProvider.tsx
import React, { useState, useEffect } from 'react'

function getInitialTheme(): string {
  if (typeof window !== 'undefined' && window.localStorage) {
    const storedPrefs = window.localStorage.getItem('theme')
    if (typeof storedPrefs === 'string') {
      return storedPrefs
    }

    const userMedia = window.matchMedia('(prefers-color-scheme: dark)')

## src\App.tsx
import React, { useContext } from 'react';
import './App.css';
import { ThemeContext } from './ThemeProvider';

function App() {
  const { theme, setTheme } = useContext(ThemeContext)
  const isDark = theme === 'dark'

  return (
    <div className="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text h-screen flex flex-col justify-center items-center">
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}
	import React from 'react';
	import { CancelToken } from 'axios'

	const FileUpload = () => {
	const [fileList, setFileList] = useState([]) // List of File instance
	const [sizeAmount, setSizeAmount] = useState('') // sum files size (such as '444.44 MB' or '2.15 GB')
	const [uploadedSize, setUploadedSize] = useState('') // sum uploaded (such as '444.44 MB' or '2.15 GB')
	const [fileCount, setFileCount] = useState(0)
	const [progress, setProgress] = useState(0) // sum uploaded (percent)
	const [prevLoaded, setPrevLoaded] = useState(0) // previous progressEvent.loaded
	import { useState, useEffect, useCallback } from 'react'

	export default (asyncFunction, immediate = true) => {
	const [isLoading, setIsLoading] = useState(false)
	const [value, setValue] = useState(null)
	const [error, setError] = useState(null)

	const execute = useCallback(
	async (params = {}, config = {}) => {
	setIsLoading(true)
	import axios from 'axios'

	export default axios.create({
	baseURL: 'http://localhost:3002',
	headers: { 'Content-Type': 'application/json' }
	})
	import axios from './Axios'

	export const uploadFiles = async (params = {}, config = {}) => {
	return await axios.post('/upload', params, config)
	}
	{
	/* ตัด code บางส่วนออก เพื่อความกระชับ */
	"scripts": {
	"start": "craco start",
	"build": "craco build",
	"test": "craco test",
	"eject": "react-scripts eject"
	},
	/* ตัด code บางส่วนออก เพื่อความกระชับ */
	}
	const tailwind = require('tailwindcss')
	const postcss = require('autoprefixer')

	module.exports = {
	style: {
	postcss: {
	plugins: [tailwind(), postcss()]
	}
	}
	}
	module.exports = {
	purge: ['./src/*/.{js,jsx,ts,tsx}', './public/index.html'],
	darkMode: 'class',
	theme: {
	extend: {
	colors: {
	dark: {
	elem: '#2B3945',
	bg: '#202C37',
	text: '#FFFFFF'
	import React, { useState, useEffect } from 'react'

	function getInitialTheme(): string {
	if (typeof window !== 'undefined' && window.localStorage) {
	const storedPrefs = window.localStorage.getItem('theme')
	if (typeof storedPrefs === 'string') {
	return storedPrefs
	}

	const userMedia = window.matchMedia('(prefers-color-scheme: dark)')
	import React, { useContext } from 'react';
	import './App.css';
	import { ThemeContext } from './ThemeProvider';

	function App() {
	const { theme, setTheme } = useContext(ThemeContext)
	const isDark = theme === 'dark'

	return (
	<div className="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text h-screen flex flex-col justify-center items-center">