ruslanmv / how-to-upload-files-ibm-cloud-with-react Goto Github PK

# Uploading Files to IBM Cloud Object Storage with React

IBM Cloud Object Storage provides a scalable and secure solution for storing and managing files in the cloud. In this blog post, we will explore how to create a React application that allows users to upload files to an IBM Cloud Object Storage bucket using the `ibm-cos-sdk` library. We will also learn how to store the necessary credentials securely in an `.env` file.

### Prerequisites

Before we begin, make sure you have the following:

- Node.js and npm installed on your machine.
- An IBM Cloud account with Object Storage service and a bucket created.
- Basic knowledge of React.

**Set up a React Application**

To install React, follow these steps:

1. Install Node.js: Download and install the latest version of Node.js from the official website (https://nodejs.org/).  This will also install npm (Node Package Manager) which is required to manage and install packages like React.

2. Open Command Prompt or Windows Terminal: Press the Windows key, type "cmd" or "Windows Terminal," and press Enter to open the command prompt or terminal.

3. Verify Node.js and npm installation: Check if Node.js and npm are installed correctly by running these commands:

```
   node -v
   npm -v
```
If you see the version numbers for both Node.js and npm, you are good to go.


### Setting Up the Project

1. Create a new React project by running the following command:

```bash
npx create-react-app file-uploader
```

2. Navigate into the project directory:

```bash
cd file-uploader
```

3. Install the required dependencies:

```bash
npm install ibm-cos-sdk dotenv
```

### Configuring the `.env` File

1. Create a new file named `.env` in the root directory of your project. It is where you have the `package.json`
2. In the `.env` file, add the following lines:

```bash
REACT_APP_COS_ENDPOINT=YOUR_ENDPOINT
REACT_APP_COS_API_KEY=YOUR_API_KEY
REACT_APP_COS_INSTANCE_ID=YOUR_SERVICE_INSTANCE_ID
REACT_APP_COS_BUCKET_NAME=YOUR_BUCKET_NAME
```

Replace `YOUR_ENDPOINT`, `YOUR_API_KEY`, `YOUR_SERVICE_INSTANCE_ID`, and `YOUR_BUCKET_NAME` with your actual IBM Cloud Object Storage credentials and bucket information.

### Implementing the File Uploader Component

1. Open the `src/App.js` file and replace its contents with the following code:

```javascript
import React from 'react';
import AWS from 'ibm-cos-sdk';
import './App.css';

const App = () => {
  const uploadFile = async (file) => {
    const config = {
      endpoint: process.env.REACT_APP_COS_ENDPOINT,
      apiKeyId: process.env.REACT_APP_COS_API_KEY,
      ibmAuthEndpoint: 'https://iam.cloud.ibm.com/identity/token',
      serviceInstanceId: process.env.REACT_APP_COS_INSTANCE_ID,
    };

    const cos = new AWS.S3(config);

    const params = {
      Bucket: process.env.REACT_APP_COS_BUCKET_NAME,
      Key: file.name,
      Body: file,
    };

    try {
      await cos.upload(params).promise();
      console.log('File uploaded successfully');
    } catch (error) {
      console.error('Error uploading file:', error);
    }
  };

  const handleFileUpload = (event) => {
    const file = event.target.files[0];
    uploadFile(file);
  };

  return (
    <div className="App">
      <h1>File Uploader</h1>
      <input type="file" onChange={handleFileUpload} />
    </div>
  );
};

export default App;
```

### Running the Application

1. Start the React development server:

```bash
npm start
```

2. Open your browser and visit `http://localhost:3000` to see the application.

3. Select a file using the file input field, and it will be uploaded to your IBM Cloud Object Storage bucket.

That's it! You have successfully created a React application that allows users to upload files to IBM Cloud Object Storage. By securely storing the credentials in the `.env` file, you can ensure the safety of your credentials while collaborating with others or deploying the application.

Feel free to enhance the application with additional features such as progress bars, error handling, and displaying the uploaded file list.

---

Remember to replace `YOUR_ENDPOINT`, `YOUR_API_KEY`, `YOUR_SERVICE_INSTANCE_ID`, and `YOUR_BUCKET_NAME` with your actual IBM Cloud Object Storage credentials and bucket information in the `.env` file.

I hope this blog post helps you in building your file uploader application using React and IBM Cloud Object Storage. Happy coding!