A Beginner's Guide to Implementing File Uploads in React.js with PHP Backend

If you're diving into the world of web development with React.js and need to incorporate file uploads into your project, you're in the right place. This guide will walk you through the process step by step, utilizing a PHP backend API. By the end, you'll have a solid understanding of how to implement file uploads seamlessly in your React.js application.

Prerequisites

Before we get started, make sure you have the following installed:

• Node.js and npm (Node Package Manager)
• React.js development environment set up
• A PHP server for the backend (e.g., XAMPP, WampServer, or any other PHP server of your choice)

Download Source Code

Step 1: Set Up Your React.js App

First we have to create React App in our local computer. So if you want to know how to install React App then you you have to follow this React.js Crud Application Tutorial. In which you can find step by step guid for download and install dependencies in our React Application.

Step 2: Install Dependencies

Install the necessary packages for file handling in React:

npm install bootstrap

Step 3: Create a File Upload Component

In your src folder, there is one App.jsx in which we have create File Upload component. This component will handle the file upload functionality.

src/App.jsx

import React, { useState, useRef } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
	
	const [selectedFile, setSelectedFile] = useState(null);

	const [imageLink, setImageLink] = useState(null);

	const [validationError, setValidationError] = useState(null);

	const fileInputRef = useRef(null);

	const handleFileChange = (event) => {

		const file = event.target.files[0];
		if(file)
		{
			const allowedExtension = ['.jpg', '.png'];
			const selectedFileExtension = file.name.split('.').pop().toLowerCase();
			if(allowedExtension.includes('.' + selectedFileExtension))
			{
				setSelectedFile(file);
				setValidationError(null);
			}
			else
			{
				setSelectedFile(null);
				setValidationError('Invalid file extension. Please select a file with .jpg or .png extension.');
				fileInputRef.current.value = '';
			}
		}

	};

	const handleUpload = async() => {
		if(selectedFile)
		{
			const formData = new FormData();
			formData.append('file', selectedFile);
			const response = await fetch('http://localhost/tutorial/file-upload/api/upload.php', {
				method : 'POST',
				body : formData
			});

			const responseData = await response.json();
			setImageLink(responseData.image_link);
			fileInputRef.current.value = '';
		}
		else
		{
			setValidationError('Please select a file before uploading.');
		}
	};

	return (
		<div className="container">
            <h1 className="mt-5 mb-5 text-center"><b>Upload File in React.js</b></h1>

            <div className="card">
                <div className="card-header">Upload File in React.js</div>
                <div className="card-body">
                    <div className="row">
                        <div className="col col-2"><b>Select File</b></div>
                        <div className="col col-3">
                        	<input type="file" ref={fileInputRef} onChange={handleFileChange} />
                        </div>
                        <div className="col col-3">
                        	<button className="btn btn-primary" onClick={handleUpload}>Upload</button>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col col-2">&nbsp;</div>
                        <div className="col col-3">
                            {validationError && (
                            	<p className="text-danger">{validationError}</p>
                            )}

                            {imageLink && (
                            	<div>
                                    <p><b>Uploaded Image : </b></p>
                                    <img src={imageLink} className="img-fluid img-thumbnail" />
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </div>
	)
}

export default App

Import Statements:

import React, { useState, useRef } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

• The code imports React, which is necessary for creating React components.
• It also imports the useState and useRef hooks from React. useState is used to manage component state, and useRef is used to create a reference to the file input element.
• The bootstrap.min.css file is imported to apply Bootstrap styling to the component.

Functional Component Declaration:

function App() {
  // ... component logic
}

• This code defines a functional component named App.

State Hooks:

const [selectedFile, setSelectedFile] = useState(null);
const [imageLink, setImageLink] = useState(null);
const [validationError, setValidationError] = useState(null);

• Three state variables (selectedFile, imageLink, and validationError) are initialized using the useState hook.
• selectedFile represents the currently selected file for upload.
• imageLink holds the link to the uploaded image, if any.
• validationError stores any validation error messages.

useRef Hook:

const fileInputRef = useRef(null);

• The useRef hook is used to create a reference (fileInputRef) to the file input element. This reference will be used to manipulate the file input, such as clearing its value.

Event Handler - handleFileChange:

const handleFileChange = (event) => {
  // ... file change logic
};

handleFileChange: This function is triggered when a user selects a file using the file input. It performs validation to check the file extension and updates the state accordingly.

const file = event.target.files[0];

• This line extracts the first file from the array of files selected by the user through the file input.

if (file) {
  // ...
}

• This condition checks whether a file is actually selected. If not, the subsequent logic is not executed.

const allowedExtension = ['.jpg', '.png'];

• An array (allowedExtension) is created, containing the allowed file extensions (in this case, '.jpg' and '.png').

const selectedFileExtension = file.name.split('.').pop().toLowerCase();

• The selected file's name is split at the period ('.') to extract the file extension. It is then converted to lowercase for case-insensitive comparison.

if (allowedExtension.includes('.' + selectedFileExtension)) {
  // If allowed, set the selected file in the component state
  setSelectedFile(file);
  // Clear any previous validation error
  setValidationError(null);
} else {
  // If not allowed, set the selected file to null
  setSelectedFile(null);
  // Set a validation error message
  setValidationError('Invalid file extension. Please select a file with .jpg or .png extension.');
  // Clear the file input value to prevent submitting an invalid file
  fileInputRef.current.value = '';
}

• This block of code checks if the selected file's extension is included in the allowedExtension array.
• If the extension is allowed, it sets the selected file in the component state (setSelectedFile(file)) and clears any previous validation error.
• If the extension is not allowed, it sets the selected file to null, sets a validation error message, and clears the file input value to prevent submitting an invalid file.

This handleFileChange function is designed to handle the logic when a user selects a file in the file input. It ensures that the selected file has a valid extension before updating the component state or displaying a validation error.

Event Handler - handleUpload:

const handleUpload = async () => {
  // ... file upload logic
};

• handleUpload: This function is called when the user clicks the "Upload" button. It checks if a file is selected, and if so, it constructs a FormData object and sends a POST request to the PHP backend.

if (selectedFile) {
  // ...
} else {
  // ...
}

• This condition checks whether a file is selected (selectedFile). If no file is selected, it executes the else block to set a validation error.

const formData = new FormData();

• This line creates a new FormData object. FormData is used to construct a set of key/value pairs representing form fields and their values.

formData.append('file', selectedFile);

• The selected file is appended to the FormData object with the key 'file'.

const response = await fetch('http://localhost/tutorial/file-upload/api/upload.php', {
  method: 'POST',
  body: formData
});

• The fetch function is used to send a POST request to the specified URL (http://localhost/tutorial/file-upload/api/upload.php).
• The request includes the method ('POST') and the body, which is set to the FormData object containing the selected file.

const responseData = await response.json();

• The response from the server is expected to be in JSON format. This line parses the JSON data using await response.json().

setImageLink(responseData.image_link);

• If the upload is successful, the image link returned from the server is set in the component state using setImageLink.

fileInputRef.current.value = '';

• After a successful upload, the file input value is cleared to allow selecting a new file in the future.

setValidationError('Please select a file before uploading.');

• If no file is selected, a validation error message is set to inform the user to select a file before attempting to upload.

This handleUpload function is responsible for sending a file to the PHP backend for upload, handling the server's response, and updating the component state accordingly. It also takes care of error handling and validation messages.

JSX Markup:

return (
		<div className="container">
            <h1 className="mt-5 mb-5 text-center"><b>Upload File in React.js</b></h1>

            <div className="card">
                <div className="card-header">Upload File in React.js</div>
                <div className="card-body">
                    <div className="row">
                        <div className="col col-2"><b>Select File</b></div>
                        <div className="col col-3">
                        	<input type="file" ref={fileInputRef} onChange={handleFileChange} />
                        </div>
                        <div className="col col-3">
                        	<button className="btn btn-primary" onClick={handleUpload}>Upload</button>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col col-2">&nbsp;</div>
                        <div className="col col-3">
                            {validationError && (
                            	<p className="text-danger">{validationError}</p>
                            )}

                            {imageLink && (
                            	<div>
                                    <p><b>Uploaded Image : </b></p>
                                    <img src={imageLink} className="img-fluid img-thumbnail" />
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </div>
	)

• The return statement contains the JSX markup for the component.
• The component is structured using Bootstrap classes for styling.
• It includes a file input, an "Upload" button, and displays validation errors or the uploaded image based on the state.

Export Component

export default App;

• The App component is exported to be used in other parts of the application.

Overall, this component provides a simple file upload form using React.js, where users can select an image file, validate its extension, and upload it to a PHP backend. The UI is styled using Bootstrap classes for a clean and responsive design.

Step 4: Set Up the PHP Backend

Create a PHP file (upload.php) in your React Application working api directory to handle file uploads. Here's a basic example:

api/upload.php

<?php

//upload.php

header("Access-Control-Allow-Origin:* ");
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");

$upload_directory = '../upload/';
$file_name_array = explode(".", $_FILES['file']['name']);
$file_name = time() . '.' . end($file_name_array);
$upload_file = $upload_directory . $file_name;
$image_link = 'http://localhost/tutorial/file-upload/upload/' . $file_name;
if(!file_exists($upload_directory))
{
	mkdir($upload_directory, 0777, true);
}

if(move_uploaded_file($_FILES['file']['tmp_name'], $upload_file))
{
	echo json_encode([
		'message' => 'File uploaded successfully', 
		'image_link' => $image_link
	]);
}

?>

CORS Headers:

header("Access-Control-Allow-Origin:* ");
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");

• These lines set CORS headers to allow cross-origin requests. This is important when the frontend (React.js) and backend (PHP) are hosted on different domains.

Upload Directory and File Naming:

$upload_directory = '../upload/';
$file_name_array = explode(".", $_FILES['file']['name']);
$file_name = time() . '.' . end($file_name_array);

• $upload_directory is set to the relative path where the uploaded files will be stored.
• The uploaded file's name is modified to include the current timestamp, ensuring a unique filename.

Complete File Path and Image Link:

$upload_file = $upload_directory . $file_name;
$image_link = 'http://localhost/tutorial/file-upload/upload/' . $file_name;

• The complete file path is formed using $upload_directory and $file_name.
• An $image_link is created, representing the URL where the uploaded image can be accessed.

Create Upload Directory if Not Exists:

if (!file_exists($upload_directory)) {
    mkdir($upload_directory, 0777, true);
}

• This block of code checks if the upload directory exists. If not, it creates the directory with full permissions.

Move Uploaded File:

if (move_uploaded_file($_FILES['file']['tmp_name'], $upload_file)) {
    // If successful, return a JSON response with a success message and the image link
    echo json_encode([
        'message' => 'File uploaded successfully',
        'image_link' => $image_link
    ]);
}

• The move_uploaded_file function is used to move the uploaded file from its temporary location to the specified directory.
• If the file is moved successfully, a JSON response is echoed with a success message and the image link.

This PHP script is designed to handle file uploads, create a unique filename, move the file to a specified directory, and return a JSON response with a success message and the URL of the uploaded image. It also includes CORS headers to allow cross-origin requests from the frontend.

Step 5: Run Your Applications

Start your React.js development server:

npm run dev

Start your PHP server and visit your React app in the browser. You should now be able to upload files successfully!

Congratulations! You've successfully implemented a file upload functionality in React.js using a PHP backend. Feel free to customize and expand upon this foundation to meet your specific project requirements. This guide should serve as a solid starting point for anyone looking to integrate file uploads into their React.js applications. Happy coding!

Download Source Code