How to Upload Files to Google Cloud Storage with Node.js and React (Drag-and-Drop)

File uploads sound simple – until you actually build them. Between cloud permissions, service accounts, backend handling, and frontend UX, things can get messy fast. 

If you’re building a modern web app with React and Node.js and need secure, scalable file storage, Google Cloud Storage (GCS) is a solid choice. The key is developing everything correctly without exposing credentials or creating security risks. 

This guide walks you through the full flow: setting up Google Cloud, configuring permissions, building a Node.js upload API, and creating a clean drag-and-drop React component. No unnecessary fluff – just a practical implementation that works.

Cloud File Uploads Failing Under Real-World Traffic and Security Pressure?

Broken permissions, exposed keys, and unstable upload flows kill user trust and delay releases. Soft Suave engineers build secure, production-ready cloud integrations that scale confidently.

Fix My Uploads

Setting Up Google Cloud for File Uploads

Before uploading anything, you need to configure your Google Cloud Platform (GCP) environment properly.

1. Make a Project + Service Account 

Start by navigating to the Google Cloud Console. If you do not have an existing project, click Create Project and provide a meaningful name that clearly identifies its purpose.

Next, enable the required APIs:

• Go to APIs & Services → Library
  
• Search for and enable the necessary APIs (such as Cloud Storage or IAM, depending on your setup)
  

After enabling the APIs, create a service account:

1. Navigate to IAM & Admin → Service Accounts
   
2. Click Create Service Account
   
3. Enter a name and description.
   
4. Skip the optional user access configuration if not required.
   
5. Complete the setup
   

After creating the service account, generate a JSON key.:

• Open the Keys tab
  
• Click Add Key → Create New Key.
  
• Select JSON
  
• Download the generated key file (e.g., service-account.json)
  

Store this file securely in the root directory of your backend project. Do not expose it publicly or commit it to version control.

2. Make a Storage Bucket 

Return to the Google Cloud Console and navigate to Cloud Storage. Click Create Bucket to begin the setup process.

Provide a globally unique name for your bucket, as Google Cloud does not allow duplicate bucket names across projects. Select the preferred location and storage class based on your requirements. If you do not have specific performance or compliance needs, the default settings are generally suitable.

Under the access configuration:

• Ensure Public Access Prevention is configured according to your security requirements.
  
• Choose Fine-grained access control if you plan to manage permissions at the object level.
  

Review your settings and click Create to complete the process. Your storage bucket is now ready for use.

3. Give Your Service Account Permission 

Open your newly created bucket and navigate to the Permissions tab. Click Grant Access to assign the required roles.

Next, open the JSON key file you previously downloaded and locate the client_email field. Copy this email address and paste it into the Add principals field in the permission settings.

Assign the role Storage Object Admin to allow the backend application to perform necessary actions such as uploading, reading, and managing objects within the bucket.

Once saved, your service account will have the appropriate access to interact with the storage bucket securely.

Struggling With Secure GCS Integration and Backend Authentication?

Misconfigured buckets and risky access controls expose sensitive data and create compliance issues. Soft Suave delivers hardened cloud architectures with clean APIs and reliable deployment pipelines.

Secure My Cloud

Node.js Backend Setup 

With the cloud configuration complete, the next step is to set up the Node.js backend.

1. Install Dependencies 

Before installing the required package, ensure that you have Node.js properly installed on your system. If you have not yet installed Node.js, download and install Node.js from the official website. If it is already installed, consider updating Node.js to the latest stable version to avoid compatibility issues and ensure optimal performance.

Once your environment is ready, install the Google Cloud Storage dependency by running:

npm install @google-cloud/storage 

This package enables your Node.js application to securely interact with Google Cloud Storage.

2. Set Up the Storage Client & Upload Logic 

In your backend application, import the required package and initialize the Storage client. Provide your Google Cloud project ID and specify the path to the downloaded JSON key file so the application can authenticate securely with Google Cloud Storage.

const { Storage } = require("@google-cloud/storage"); 
const storage = new Storage({ 
projectId: "your-project-id", 
keyFilename: "service-account.json", 
});

File uploads are handled using the .upload() method provided by the Google Cloud Storage SDK. Below is a simple example function that demonstrates how to upload a file to your configured bucket:

const uploadToGCS = async (filepath, fileName) => { 
try { 
const bucket = storage.bucket("your-bucket-name"); 
const destinationPath = `your_storage_folder/${fileName}`; 
const result = await bucket.upload(filepath, { 
destination: destinationPath, 
predefinedAcl: 'publicRead', 
metadata: { 
contentType: "application/plain", // Don’t forget to change this if it’s not plain text! 
}, 
}); 
return result[0].metadata.mediaLink; 
} catch (error) { 
console.error(error); 
throw new Error(error.message); 
} 
}; 

Call the uploadToGCS function by passing the file path and file name as arguments. The function will handle uploading the file to your configured Google Cloud Storage bucket.

React Frontend: Drag-and-Drop File Upload

To enhance the user experience, you can implement a drag-and-drop file upload interface using React. This approach provides a more intuitive and user-friendly way for users to upload files.

1. Build the Drag-and-Drop Component

Make a React component that listens for drag events and file input changes. Here’s a simple version using state and Axios (because, let’s be real, fetch gets annoying with files): 

import React, { useState } from 'react'; 
import axios from 'axios'; 
const FileUploader = () => { 
const [file, setFile] = useState(null); 
const [isDragging, setIsDragging] = useState(false); 
const handleDrop = (e) => { 
e.preventDefault(); 
e.stopPropagation(); 
setIsDragging(false); 
const droppedFile = e.dataTransfer.files[0]; 
if (droppedFile) { 
setFile(droppedFile); 
uploadFile(droppedFile); 
} 
}; 
const handleDragOver = (e) => { 
e.preventDefault(); 
e.stopPropagation(); 
setIsDragging(true); 
}; 
const handleDragLeave = (e) => { 
e.preventDefault(); 
e.stopPropagation(); 
setIsDragging(false); 
}; 
const handleFileChange = (e) => { 
const selectedFile = e.target.files[0]; 
if (selectedFile) { 
setFile(selectedFile); 
uploadFile(selectedFile); 
} 
}; 
const uploadFile = async (file) => { 
const formData = new FormData(); 
formData.append('file', file);
try { 
const res = await axios.post('/upload', formData, { 
headers: { 
'Content-Type': 'multipart/form-data', 
}, 
}); 
// Handle success (show link? toast? your call) 
console.log(res.data); 
} catch (err) { 
// Handle errors (toast, alert, whatever) 
console.error(err); 
} 
}; 
return ( 
<div 
onDrop={handleDrop} 
onDragOver={handleDragOver} 
onDragLeave={handleDragLeave} 
style={{ 
border: isDragging ? '2px solid blue' : '2px dashed gray', 
padding: 40, 
textAlign: 'center', 
margin: 40, 
}} 
> 
<input 
type="file" 
onChange={handleFileChange} 
style={{ display: 'none' }} 
id="file-input" 
/> 
<label htmlFor="file-input" style={{ cursor: 'pointer' }}> 
{file ? file.name : 'Drag and drop a file here, or click to select'} 
</label> 
</div> 
); 
}; 
export default FileUploader;

Not Sure About Outsourcing Your Cloud Development? Try Before Deciding

Access pre-vetted engineers for 40 free hours. Validate skills, assess delivery quality, and move forward only when you are fully confident.

Try Risk-Free

Security Best Practices

Implementing proper security measures is essential when working with Google Cloud Storage. Follow these best practices to protect your application and data:

• Never expose service account credentials
  Keep the service-account.json file strictly on the backend. Do not upload it to public repositories or include it in frontend code.
  
• Use secure credential management.
  In production environments, store credentials using environment variables or a secure secret management service instead of hardcoding file paths.
  
• Use Signed URLs for controlled access.
  For sensitive or private files, generate Signed URLs instead of using publicRead access. This ensures temporary and secure access to stored objects.
  
• Follow the principle of least privilege.
  Assign only the minimum required permissions to your service account. Avoid granting broad roles unless absolutely necessary.
  

Applying these practices significantly reduces the risk of unauthorized access and strengthens your overall cloud security.

Conclusion

Uploading files to Google Cloud Storage doesn’t need to be complicated, but it does require the right structure. 

With a properly configured service account, correct bucket permissions, a secure Node.js backend, and a smooth React drag-and-drop interface, you get a scalable and production-ready file upload system. 

The real success lies in keeping credentials secure and separating frontend from backend responsibilities. 

Once set up, GCS handles storage durability and scalability effortlessly. From small uploads to enterprise-level workloads, this architecture gives you reliability without unnecessary complexity. Build it clean, secure it properly, and your uploads will just work.

Founder & CEO

Ramesh Vayavuru

Ramesh Vayavuru is the Founder & CEO of Soft Suave Technologies, with 15+ years of experience delivering innovative IT solutions.