Как правильно загрузить файл с react и laravel?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import React, { useState } from 'react';

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

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

 const handleSubmit = (e) => {
   e.preventDefault();
   // TODO: Отправить файл на сервер
 }

 return (
   <form onSubmit={handleSubmit}>
     <label htmlFor="input-file">Выбрать файл:</label>
     <input id="input-file" type="file" onChange={handleFileInputChange} />
     <button type="submit">Отправить</button>
   </form>
 )
}

export default FileUploadForm;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

public function uploadFile(Request $request)
{
  // Проверяем, что файл был отправлен
  if($request->hasFile('file')) {
    // Сохраняем файл в папку storage/app/files
    $request->file('file')->store('files');
    return response()->json(['message' => 'Файл успешно загружен']);
  } else {
    return response()->json(['error' => 'Файл не был отправлен'], 400);
  }
}

1

Route::post('/upload-file', [FileController::class, 'uploadFile']);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

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

  try {
    const response = await fetch('/upload-file', {
      method: 'POST',
      body: formData
    });
    const data = await response.json();
    console.log(data.message); // Файл успешно загружен
  } catch (error) {
    console.error(error);
  }
}