ReferenceError: File is not defined when uploading file using CLI

[raa-solana]

Bug Description

When trying to upload a file using the CLI tool, it throws a ReferenceError: File is not defined error. This is because the code tries to use the browser's File API which is not available in Node.js environment.

Steps to Reproduce

1. Install the CLI tool
2. Try to upload a file using the command:

shdw-drive upload \
  --keypair ~/.config/solana/id_v2.json \
  --bucket [bucket-id] \
  --file path/to/file.gif

Error Message

Error uploading file: ReferenceError: File is not defined
    at Command.<anonymous> (/Users/srm/dev/shdwdrive-v2-cli/dist/cli.js:41:22)
    ...

Current Implementation

In cli.ts, the code attempts to create a File object:

const fileBuffer = readFileSync(options.file);
const fileName = options.file.split('/').pop()!;
const file = new File([fileBuffer], fileName);

Suggested Fix

Consider using one of these approaches:

1. Using form-data:

import FormData from 'form-data';

const fileBuffer = readFileSync(options.file);
const fileName = options.file.split('/').pop()!;
const formData = new FormData();
formData.append('file', fileBuffer, fileName);

2. Or using Blob (Node.js v18.0.0+):

const fileBuffer = readFileSync(options.file);
const fileName = options.file.split('/').pop()!;
const blob = new Blob([fileBuffer], { type: 'application/octet-stream' });

Environment

• Node.js version: v18.17.0
• OS: macOS
• CLI version: latest from main branch

Would appreciate any guidance on which approach would be most suitable for the SDK's requirements.

[raa-solana]

First of all, congratulations on releasing the SDK and CLI! It's a great achievement and I'm excited to use these tools.

While testing the CLI, I encountered this issue and found a solution that might help others:

Tested with:

• Node.js: v18.17.0
• OS: macOS

I found a solution to this issue by implementing a File polyfill for Node.js environment.

Create a new file src/polyfill.ts:

export class NodeFile implements File {
  name: string;
  lastModified: number;
  size: number;
  type: string;
  webkitRelativePath: string;
  private buffer: Buffer;

  constructor(buffer: Buffer, filename: string, options: { type?: string } = {}) {
    this.buffer = buffer;
    this.name = filename;
    this.lastModified = Date.now();
    this.size = buffer.length;
    this.type = options.type || 'application/octet-stream';
    this.webkitRelativePath = '';
  }

  bytes(): Promise<Uint8Array> {
    return Promise.resolve(new Uint8Array(this.buffer));
  }

  slice(start?: number, end?: number, contentType?: string): Blob {
    const slicedBuffer = this.buffer.slice(start, end);
    return new NodeFile(slicedBuffer, this.name, { type: contentType });
  }

  stream(): ReadableStream {
    return new ReadableStream({
      start: (controller) => {
        controller.enqueue(this.buffer);
        controller.close();
      }
    });
  }

  text(): Promise<string> {
    return Promise.resolve(this.buffer.toString('utf-8'));
  }

  arrayBuffer(): Promise<ArrayBuffer> {
    return Promise.resolve(this.buffer.buffer);
  }

  async *[Symbol.asyncIterator]() {
    yield this.buffer;
  }

  get [Symbol.toStringTag](): string {
    return 'File';
  }
}

And modify cli.ts to use this polyfill:

import { NodeFile } from './polyfill';

// In the upload command:
const fileBuffer = readFileSync(options.file);
const fileName = options.file.split('/').pop()!;
const file = new NodeFile(fileBuffer, fileName);

Also, add "dom" to the lib array in tsconfig.json:

{
  "compilerOptions": {
    ...
    "lib": ["ES2020", "dom"]
  }
}

This implementation successfully uploads files to Shadow Drive. The key point was implementing the stream() method correctly, which is required for the file upload process.

Thanks for all your hard work on this project! Looking forward to seeing it grow further.