DevLoad - File Upload & Delete SDK for React/Next.js

Overview

DevLoad is a simple JavaScript SDK for uploading and deleting files from a remote server. This version is optimized for React and Next.js applications.

Installation

Install the package using npm:

npm install devload-sdk

What You Need

• projectid: Get this from your DevLoad project settings.
• API Key: Grab your same proejctid apikey from your project setting .

Usage

Importing and Initializing

First, import DevLoad and initialize it with your API key:

import DevLoad from 'devload-sdk';

const devload = new DevLoad('your-api-key-here');

Uploading a File

To upload a file, use an HTML <input type="file"> element to select the file and pass it to the uploadFile(projectid , file) method:

async function handleFileUpload(event , projectid) {
  const file = event.target.files[0]; // Get the selected file
  if (!file) return;

  try {
    const response = await devload.uploadFile(projectid ,file);
    console.log('Upload successful:', response);
  } catch (error) {
    console.error('Upload failed:', error);
  }
}

Example in a React Component

import { useState } from 'react';
import DevLoad from 'devload-sdk';

export default function FileUploader() {
  const [file, setFile] = useState(null);
  const devload = new DevLoad('your-api-key-here');
  const projectid = "your-project-id-here"

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

  const handleUpload = async () => {
    if (!file) return;
    try {
      const response = await devload.uploadFile(projectid , file);
      console.log('Uploaded:', response);
    } catch (error) {
      console.error('Upload failed:', error);
    }
  };

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

Deleting a File

To delete a file, pass the fileid((usually returned in the upload response) to the deleteFile(fileid) method:

async function handleDeleteFile( fileid) {
  try {
    const response = await devload.deleteFile( fileid);
    console.log('File deleted:', response);
  } catch (error) {
    console.error('Delete failed:', error);
  }
}

Notes & Best Practices

• File Selection: Ensure the file is selected via an <input type="file"> element.
• Error Handling: Wrap API calls in try-catch blocks to handle errors gracefully.
• File Size & Type Restrictions: The API may have limits (e.g., images, videos, and audio only).
• Retrieve Fileid: The fileid are typically obtained from the upload response.

Conclusion

With DevLoad, uploading and deleting files in React and Next.js apps becomes effortless. Get started today and integrate seamless file management into your project! 🚀