Web Developers : 10-Uploading an Image File in React to an Appwrite Storage Bucket

Screenshot from the tutorial

Uploading an Image File in React to an Appwrite Storage Bucket

In the modern web development landscape, file uploads are a common requirement, especially when building applications that handle user-generated content. This tutorial will walk you through how to upload an image file in a React application to an Appwrite storage bucket. By the end of this guide, you will have a solid understanding of how to set up your React app and interact with Appwrite's storage service.

Prerequisites

Before we start, ensure you have the following:

• Basic knowledge of React
• Node.js and npm installed on your machine
• An Appwrite account and a project set up
• Appwrite SDK for JavaScript installed in your project

Setting Up Your React Application

Step 1: Create a New React App

If you haven't already created a React application, you can do so using Create React App. Run the following command in your terminal:

npx create-react-app image-upload-app
cd image-upload-app

Step 2: Install Appwrite SDK

To interact with Appwrite, we need to install the Appwrite SDK. Use npm to install it:

npm install appwrite

Configuring Appwrite

Step 3: Set Up Storage in Appwrite

1. Log in to your Appwrite console.
2. Select your project and navigate to the Storage section.
3. Create a new bucket (e.g., images) and ensure that the bucket is set to public if you want the files to be accessible without authentication.

Step 4: Get Your Project Credentials

You will need your Appwrite project ID and endpoint. You can find these in your Appwrite console under the Settings section.

Building the Image Upload Component

Step 5: Create an Image Upload Component

In your React app, create a new component called ImageUpload.js:

// src/ImageUpload.js
import React, { useState } from 'react';
import { Client, Storage } from 'appwrite';

const ImageUpload = () => {
    const [file, setFile] = useState(null);
    const client = new Client();
    const storage = new Storage(client);

    // Initialize the Appwrite Client
    client.setEndpoint('https://[YOUR_APPWRITE_ENDPOINT]').setProject('[YOUR_PROJECT_ID]');

    const handleFileChange = (event) => {
        setFile(event.target.files[0]);
    };

    const handleUpload = async () => {
        if (!file) {
            alert("Please select a file first!");
            return;
        }
        try {
            const response = await storage.createFile('images', file.name, file);
            console.log('File uploaded successfully:', response);
        } catch (error) {
            console.error('Error uploading file:', error);
        }
    };

    return (
        <div>
            <input type="file" onChange={handleFileChange} />
            <button onClick={handleUpload}>Upload Image</button>
        </div>
    );
};

export default ImageUpload;

Explanation of the Code

• We import React and use the useState hook to manage the file state.
• We import Appwrite's Client and Storage methods to interact with the Appwrite service.
• The handleFileChange function updates the file state when the user selects a file.
• The handleUpload function uploads the selected file to the specified Appwrite storage bucket. Make sure to replace [YOUR_APPWRITE_ENDPOINT] and [YOUR_PROJECT_ID] with your actual Appwrite credentials.

Step 6: Integrate the Component

Next, integrate your ImageUpload component into the main application in App.js:

// src/App.js
import React from 'react';
import ImageUpload from './ImageUpload';

const App = () => {
    return (
        <div>
            <h1>Image Upload to Appwrite</h1>
            <ImageUpload />
        </div>
    );
};

export default App;

Running Your Application

Step 7: Start Your Development Server

With everything set up, start your React application:

npm start

Navigate to http://localhost:3000 in your web browser. You should see a simple interface with an upload button.

Conclusion

In this tutorial, we learned how to upload an image file from a React application to an Appwrite storage bucket. The process involved setting up a React app, installing the Appwrite SDK, and creating a component for file uploads.

Next Steps

• Explore the Appwrite documentation to learn more about managing files and implementing features like file retrieval and deletion.
• Consider adding more features to your app, such as displaying the uploaded images or implementing user authentication.

Now, go ahead and build your image upload functionality with React and Appwrite! Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios