How revay-storage Works

revay-storage acts as a simple and efficient storage bridge that allows developers to use files for easy storage in a database. This package simplifies the file storage process by abstracting the complexities of file handling and preparing it for database storage. Key Features:

Database-Ready Format: It removes the need to store files in external storage services, allowing for a more lightweight and integrated approach.

Why Use revay-storage?

Simplified File Handling: Revay-storage enables developers to easily store and retrieve files directly from a database without additional storage layers like AWS S3 or other external file storage services.

Enhanced Security and Portability: Since the files are stored directly in the database , they benefit from database-level security. This can reduce dependencies on third-party storage providers while keeping data in a centralized place.

Quick Integration: revay-storage can be integrated into any system with minimal setup, making it ideal for applications where ease of storage is a priority, such as user profile pictures, document uploads, and other multimedia content.

Installation | JS

To get started with revay-storage, download the SDK as a zip file or use npm to install and include it in your project.

```javascript
npm i revay-storage;
```

Example

"use client";

import { useState } from 'react';
import { RevayStorage } from 'revay-storage';

const VideoUpload = () => {
    const [title, setTitle] = useState('');
    const [file, setFile] = useState<File | null>(null);
    const [preview, setPreview] = useState<string | null>(null);

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        if (file) {
            await handleFile(file);
        }
    };

    async function handleFile(file: File) {
        try {
            const myfile = await RevayStorage(file);
            setPreview(myfile);
        } catch (error) {
            console.error("Error:", error);
        }
    }

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                placeholder="Video Title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                required
            />
            <input
                type="file"
                accept="video/*"
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFile(e.target.files?.[0] || null)}
                required
            />
            <button type="submit">Upload Video</button>
            {preview && (
                <video controls width="300">
                    <source src={preview} type="video/mp4" />
                    Your browser does not support the video tag.
                </video>
            )}
        </form>
    );
};

export default VideoUpload;

Example 2: Use Cloudinary Preset as Unsigned and Cloud Name

"use client";

import { useState } from "react";
import { RevayuploadFile } from "revay-storage";

const name = "";
const preset = "";
const VideoUpload = () => {
  const [title, setTitle] = useState("");
  const [file, setFile] = useState<File | null>(null);
  const [preview, setPreview] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (file) {
      await handleFile(file);
    }
  };

  async function handleFile(file: File) {
    try {
      const myfile = await RevayuploadFile(file, name, preset);

      console.log(myfile);
      setPreview(myfile as string);
    } catch (error) {
      console.error("Error:", error);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Video Title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        required
      />
      <input
        type="file"
        accept="video/*"
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          setFile(e.target.files?.[0] || null)
        }
        required
      />
      <button type="submit">Upload Video</button>
      {preview && (
        <video controls width="300">
          <source src={preview} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      )}
    </form>
  );
};

export default VideoUpload;

Example 3: Uploading File to DropBox

But the Url cannot be viewed in html tags because of CORS isue, but can be viewed in it's own page via it's own Url

Visit this link on how to generate accessKey:'https://dropbox.tech/developers/generate-an-access-token-for-your-own-account'

and Enable Scopped App Settings for files.write,files.permanent_delete and others

"use client";

import { useState } from "react";
import { deleteFileFromDropbox, uploadFileToDropbox } from "revay-storage";

const path = "/public";
const accessKey = "";
const VideoUpload = () => {
  const [title, setTitle] = useState("");
  const [file, setFile] = useState<File | null>(null);
  const [preview, setPreview] = useState<string | null>(null);
  const [id, setId] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (file) {
      await handleFile(file);
    }
  };

  async function handleFile(file: File) {
    try {
      const myfile = await uploadFileToDropbox(accessKey, file, path);

      console.log(myfile);
      setPreview(myfile.url as string);
      setId(myfile.path);
    } catch (error) {
      console.error("Error:", error);
    }
  }

  async function handleDelete() {
    try {
      const deleted = await deleteFileFromDropbox(accessKey, id as string);
    } catch (error) {
      console.error("Error", error);
    }
  }
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Video Title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        required
      />
      <input
        type="file"
        accept="video/*"
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          setFile(e.target.files?.[0] || null)
        }
        required
      />
      <div className="flex flex-row gap-2">
        <button type="submit">Upload Video</button>
        {id && (
          <button type="button" onClick={handleDelete}>
            Delete
          </button>
        )}
      </div>
      {preview && (
        <video controls width="300">
          <source src={preview} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      )}
    </form>
  );
};

export default VideoUpload;

Example:4 Using Supabase Storage

"use client";

import { useState, useEffect } from "react";
import {
  initializeSupabase,
  deleteFileFromSupabase,
  UploadFileToSupabase,
} from "revay-storage";

const storage = "files"; // Specify the Supabase storage bucket

const VideoUpload = () => {
  const [title, setTitle] = useState("");
  const [file, setFile] = useState<File | null>(null);
  const [preview, setPreview] = useState<string | null>(null);
  const [fileName, setFileName] = useState<string | null>(null);
  const [supabaseClient, setSupabaseClient] = useState<any>(null);

  useEffect(() => {
    const initialize = async () => {
      //Initialize SupabaseClient
      const supabase = initializeSupabase(
        process.env.NEXT_PUBLIC_URL as string,
        process.env.NEXT_PUBLIC_ANON_KEY as string,
      );
      setSupabaseClient(supabase);
    };
    initialize();
  }, []);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (file && supabaseClient) {
      await handleFile(file);
    }
  };

  async function handleFile(file: File) {
    try {
      // Pass supabaseClient to the UploadImage function
      const { publicUrl, fileName: uploadedFileName } =
        await UploadFileToSupabase(supabaseClient, file, storage);

      console.log("Uploaded File:", publicUrl);
      setPreview(publicUrl); // Set video preview URL
      setFileName(uploadedFileName); // Save the file name for deletion
    } catch (error) {
      console.error("Error uploading file:", error);
    }
  }

  async function handleDelete() {
    try {
      if (fileName && supabaseClient) {
        // Pass supabaseClient to the deleteImage function
        await deleteFileFromSupabase(supabaseClient, fileName, storage);
        console.log(`Deleted file: ${fileName}`);

        // Clear the state after deletion
        setPreview(null);
        setFileName(null);
      }
    } catch (error) {
      console.error("Error deleting file:", error);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Video Title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        required
      />
      <input
        type="file"
        accept="video/*"
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          setFile(e.target.files?.[0] || null)
        }
        required
      />
      <div className="flex flex-row gap-2">
        <button type="submit">Upload Video</button>
        {fileName && (
          <button type="button" onClick={handleDelete}>
            Delete
          </button>
        )}
      </div>
      {preview && (
        <video controls width="300">
          <source src={preview} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      )}
    </form>
  );
};

export default VideoUpload;