Crumble – Enterprise Cloud Storage – Scalable File Hosting Script – Node.js, React, MongoDB, GridFS

Introduction

Crumble is an open-source, enterprise-grade cloud storage solution built using Node.js, React, MongoDB, and GridFS. It provides a scalable and secure way to host and manage large amounts of files, making it an ideal choice for businesses and organizations that require a robust and reliable file storage solution. In this tutorial, we will guide you through the process of setting up and using Crumble, covering topics such as installation, configuration, and usage.

Prerequisites

Before starting this tutorial, make sure you have the following:

• Node.js installed on your system (version 14 or higher)
• MongoDB installed on your system (version 4.2 or higher)
• A code editor or IDE of your choice
• A basic understanding of JavaScript, React, and MongoDB

Step 1: Install Crumble

To install Crumble, run the following command in your terminal:

npm install crumble

This will install Crumble and its dependencies.

Step 2: Configure Crumble

Create a new file named crumble.config.js in the root directory of your project and add the following configuration:

module.exports = {
  // MongoDB connection string
  mongo: 'mongodb://localhost:27017/crumble',
  // GridFS bucket name
  bucket: 'crumble-bucket',
  // File upload directory
  uploadDir: './uploads',
  // Maximum file size (in MB)
  maxSize: 100,
  // Maximum number of files per user
  maxFilesPerUser: 1000,
  // Authentication settings
  auth: {
    // Enable authentication
    enabled: true,
    // Authentication secret
    secret: 'your-secret-key',
  },
};

Replace the mongo connection string with your own MongoDB connection string. Also, update the bucket name and uploadDir path to match your desired settings.

Step 3: Start Crumble

Run the following command in your terminal to start Crumble:

node crumble.js

This will start the Crumble server and make it available at http://localhost:3000.

Step 4: Create a React App

Create a new React app using the following command:

npx create-react-app crumble-client

This will create a new React app named crumble-client in a new directory.

Step 5: Connect to Crumble

In the crumble-client directory, create a new file named api.js and add the following code:

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:3000/api',
});

export default api;

This code sets up an Axios instance to connect to the Crumble API.

Step 6: Use Crumble

In your React app, import the api instance and use it to interact with Crumble. For example, you can use the following code to upload a file:

import React, { useState } from 'react';
import api from './api';

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

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

  const handleUpload = () => {
    if (file) {
      api.post('/upload', file)
       .then((response) => {
          console.log(response.data);
        })
       .catch((error) => {
          console.error(error);
        });
    }
  };

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

export default UploadFile;

This code sets up a file input field and a button to upload the file. When the button is clicked, it sends a POST request to the Crumble API to upload the file.

Step 7: View Files

To view the uploaded files, you can use the following code:

import React, { useState, useEffect } from 'react';
import api from './api';

const FileList = () => {
  const [files, setFiles] = useState([]);

  useEffect(() => {
    api.get('/files')
     .then((response) => {
        setFiles(response.data);
      })
     .catch((error) => {
        console.error(error);
      });
  }, []);

  return (
    <div>
      <h1>File List</h1>
      <ul>
        {files.map((file) => (
          <li key={file._id}>
            <a href={file.url}>{file.name}</a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FileList;

This code sets up a file list component that fetches the list of uploaded files from the Crumble API and displays them in a list.

Conclusion

That's it! You have now set up and used Crumble, a scalable and secure cloud storage solution built using Node.js, React, MongoDB, and GridFS. You can use Crumble to host and manage large amounts of files, and integrate it with your React app to provide a seamless file upload and download experience.