code

I'm following the example but I seem to get nested folders, is this intentional?

25 Replies

Harris•15mo ago

import { NextRequest, NextResponse } from 'next/server';

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

if (!process.env.S3_ENDPOINT) {
  throw new Error('S3_ENDPOINT is not defined');
}

if (!process.env.S3_ACCESS_KEY_ID) {
  throw new Error('S3_ACCESS_KEY_ID is not defined');
}

if (!process.env.S3_SECRET_ACCESS_KEY) {
  throw new Error('CLOUDFLARE_SECRET_ACCESS_KEY is not defined');
}

const S3 = new S3Client({
  region: 'auto',
  endpoint: process.env.S3_ENDPOINT,
  credentials: {
    accessKeyId: process.env.S3_ACCESS_KEY_ID,
    secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
  },
});

//  JSON body: { "filename": "my-file.txt" }
export async function POST(request: NextRequest) {
  const data = await request.json();
  const filename = data.filename;

  const url = await generateSignedUrl(filename);

  return NextResponse.json({ url });
}

async function generateSignedUrl(filename: string) {
  const command = new PutObjectCommand({
    Bucket: process.env.S3_BUCKET_NAME,
    Key: filename,
  });

  const url = await getSignedUrl(S3, command, {
    expiresIn: 60 * 60 * 24 * 7, // 7 days
  });
  return url;
}

import { NextRequest, NextResponse } from 'next/server';

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

if (!process.env.S3_ENDPOINT) {
  throw new Error('S3_ENDPOINT is not defined');
}

if (!process.env.S3_ACCESS_KEY_ID) {
  throw new Error('S3_ACCESS_KEY_ID is not defined');
}

if (!process.env.S3_SECRET_ACCESS_KEY) {
  throw new Error('CLOUDFLARE_SECRET_ACCESS_KEY is not defined');
}

const S3 = new S3Client({
  region: 'auto',
  endpoint: process.env.S3_ENDPOINT,
  credentials: {
    accessKeyId: process.env.S3_ACCESS_KEY_ID,
    secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
  },
});

//  JSON body: { "filename": "my-file.txt" }
export async function POST(request: NextRequest) {
  const data = await request.json();
  const filename = data.filename;

  const url = await generateSignedUrl(filename);

  return NextResponse.json({ url });
}

async function generateSignedUrl(filename: string) {
  const command = new PutObjectCommand({
    Bucket: process.env.S3_BUCKET_NAME,
    Key: filename,
  });

  const url = await getSignedUrl(S3, command, {
    expiresIn: 60 * 60 * 24 * 7, // 7 days
  });
  return url;
}

Unknown User•15mo ago

Message Not Public

Harris•15mo ago

I'm a bit confused, when I then try to get the info of the file

HEAD /camcorder-ai/406458e4-e71a-47de-800e-7ff910190619.mp4
NotFound: UnknownError

HEAD /camcorder-ai/406458e4-e71a-47de-800e-7ff910190619.mp4
NotFound: UnknownError

const headObjectCommand = new HeadObjectCommand({
        Bucket: process.env.S3_BUCKET_NAME,
        Key: parsedUrl.pathname,
      });

      const headObjectResponse = await S3.send(headObjectCommand);

const headObjectCommand = new HeadObjectCommand({
        Bucket: process.env.S3_BUCKET_NAME,
        Key: parsedUrl.pathname,
      });

      const headObjectResponse = await S3.send(headObjectCommand);

even though /camcorder-ai/file.mp4 is what I was returned back from the S3 command

Unknown User•15mo ago

Message Not Public

Harris•14mo ago

I don't add the /camcorder-ai/ to any of my file upload code at all so I'm confused where it's coming from

Unknown User•14mo ago

Message Not Public

Harris•14mo ago

aws s3 sdk yeah code here

Unknown User•14mo ago

Message Not Public

Harris•14mo ago

didn't know that was a thing, will try it!

Unknown User•14mo ago

Message Not Public

Harris•14mo ago

ooohh that explains a lot

Unknown User•14mo ago

Message Not Public

Harris•14mo ago

const S3 = new S3Client({
  region: 'auto',
  endpoint: process.env.S3_ENDPOINT,
  credentials: {
    accessKeyId: process.env.S3_ACCESS_KEY_ID,
    secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
  },
  forcePathStyle: false,
});

const S3 = new S3Client({
  region: 'auto',
  endpoint: process.env.S3_ENDPOINT,
  credentials: {
    accessKeyId: process.env.S3_ACCESS_KEY_ID,
    secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
  },
  forcePathStyle: false,
});

I set it to false but it still seems to do path style

# These are the values for Cloudflare R2, they should be able to swapped to any other S3 compatible storage provider with minimal changes
S3_ENDPOINT='https://c38bc3761ea690e1a45693a40ce4fb2f.r2.cloudflarestorage.com/camcorder-ai'
S3_ACCESS_KEY_ID=
S3_SECRET_ACCESS_KEY=
S3_BUCKET_NAME='camcorder-ai'
S3_HOSTNAME="camcorder-ai.c38bc3761ea690e1a45693a40ce4fb2f.r2.cloudflarestorage.com"

# These are the values for Cloudflare R2, they should be able to swapped to any other S3 compatible storage provider with minimal changes
S3_ENDPOINT='https://c38bc3761ea690e1a45693a40ce4fb2f.r2.cloudflarestorage.com/camcorder-ai'
S3_ACCESS_KEY_ID=
S3_SECRET_ACCESS_KEY=
S3_BUCKET_NAME='camcorder-ai'
S3_HOSTNAME="camcorder-ai.c38bc3761ea690e1a45693a40ce4fb2f.r2.cloudflarestorage.com"

ohhh wait is it because the endpoint here?

Unknown User•14mo ago

Message Not Public

Harris•14mo ago

as an environment var? oh you mean in the endpoint

S3_ENDPOINT='https://c38bc3761ea690e1a45693a40ce4fb2f.r2.cloudflarestorage.com/'
S3_ACCESS_KEY_ID=
S3_SECRET_ACCESS_KEY=
S3_BUCKET_NAME='camcorder-ai'
S3_HOSTNAME="camcorder-ai.c38bc3761ea690e1a45693a40ce4fb2f.r2.cloudflarestorage.com"

S3_ENDPOINT='https://c38bc3761ea690e1a45693a40ce4fb2f.r2.cloudflarestorage.com/'
S3_ACCESS_KEY_ID=
S3_SECRET_ACCESS_KEY=
S3_BUCKET_NAME='camcorder-ai'
S3_HOSTNAME="camcorder-ai.c38bc3761ea690e1a45693a40ce4fb2f.r2.cloudflarestorage.com"

Unknown User•14mo ago

Message Not Public

Harris•14mo ago

thank you my god this has been annoying to debug i was like I'm uploading files to root but a folder gets added but then when I retrieve files I can't have the folder in the string!

Unknown User•14mo ago

Message Not Public

Harris•14mo ago

gotcha well thank you for explaining it to me

Unknown User•14mo ago

Message Not Public

Harris•14mo ago

perfect, I can now go through and remove the weird parsing I had to do on my keys to remove the "fake" folder

Harris•14mo ago

Harris•14mo ago

@sdnts

Harris•14mo ago

i finally got something to upload to root

Unknown User•14mo ago

Message Not Public

Gaming

Programming

code