I am having trouble uploading Image in s3 using hono and cloudfare workers

[BandiDhruv]

here is my implementation of code
import { Hono } from "hono";
import { S3Client } from "@aws-sdk/client-s3";
import { HonoS3Storage } from "@hono-storage/s3";

const client = (accessKeyId: string, secretAccessKey: string) =>
new S3Client({
region: "ap-southeast-2",
credentials: {
accessKeyId,
secretAccessKey,
},
});

const storage = new HonoS3Storage({
key: (_, file) =>
${file.originalname}-${new Date().getTime()}.${file.extension},
bucket: "myblogiumbk1",
client: (c) => client(c.env.AWS_ACCESS_KEY_ID, c.env.AWS_SECRET_ACCESS_KEY),
});
userRoute.post('/api/upload', storage.single("file"), async (c) => {
try {
const { file } = await c.req.parseBody();

// Check if file exists and has a name
if (!file ) {
return c.json({ error: "Missing file or filename in request" }, 400);
}

// Upload the file using storage
// ... (your upload logic)

return c.text("Image uploaded successfully!");
} catch (e) {
console.error(e);
return c.json({ error: "Internal server error" }, 500);
}
});

can anyone tell me how to change my code so that I can upload image from when user inputs it and store it in my bucket

[yusukebe]

Hi @BandiDhruv

@sor4chi Can you take a look?

[sor4chi]

I answered here as well, your code is actually already set up regarding uploading.
The actual uploading process is written in the storage.single middleware, so it actually works on its own.

import { S3Client } from "@aws-sdk/client-s3";
import { HonoS3Storage } from "@hono-storage/s3";
import { Hono } from "hono";

const client = (accessKeyId: string, secretAccessKey: string) =>
  new S3Client({
    region: "ap-southeast-2",
    credentials: {
      accessKeyId,
      secretAccessKey,
    },
  });

const storage = new HonoS3Storage({
  key: (_, file) =>
    `${file.originalname}-${new Date().getTime()}.${file.extension}`,
  bucket: "myblogiumbk1",
  client: (c) => client(c.env.AWS_ACCESS_KEY_ID, c.env.AWS_SECRET_ACCESS_KEY),
});

const userRoute = new Hono();
userRoute.post("/api/upload", storage.single("file"), async (c) => {
  return c.text("Image uploaded successfully!");
});

export default userRoute;

[BandiDhruv]

This is the current code
userRoute.post("/upload", storage.single("file"), async (c) => {
console.log(c);
return c.text("Image uploaded successfully!");
});

and this is what I get in console
Context {
req: HonoRequest {
raw: Request {
keepalive: false,
integrity: '',
cf: [Object],
signal: [AbortSignal],
fetcher: [Fetcher],
redirect: 'manual',
headers: [Headers],
url: 'http://127.0.0.1:8787/api/v1/user/upload',
method: 'POST',
bodyUsed: true,
body: [ReadableStream]
},
routeIndex: 2,
path: '/api/v1/user/upload',
bodyCache: { formData: [Promise], parsedBody: [Object] },
cachedBody: [Function: cachedBody]
},
env: {
DATABASE_URL: '',
JWT_SECRET: '',
AWS_ACCESS_KEY_ID: '',
AWS_SECRET_ACCESS_KEY: ''
},
_var: { signedURLs: {}, files: { file: [File] } },
finalized: false,
error: undefined,
layout: undefined,
renderer: [Function: renderer],
notFoundHandler: [Function: notFoundHandler],
render: [Function: render],
setLayout: [Function: setLayout],
getLayout: [Function: getLayout],
setRenderer: [Function: setRenderer],
header: [Function: header],
status: [Function: status],
set: [Function: set],
get: [Function: get],
newResponse: [Function: newResponse],
body: [Function: body],
text: [Function: text],
json: [Function: json],
html: [Function: html],
redirect: [Function: redirect],
notFound: [Function: notFound]
}

I do not know how to extract the url from this

[sor4chi]

Wow, I forgot the case of want to get the uploaded URL!
I’m so sorry.

I'll try to implement it the next release. Thank you so much.

[BandiDhruv]

Welcome 🤗, Don't forget to mention me in the next release,jk😝😝

[sor4chi]

Hi, @BandiDhruv.

Even in its current state, you can create a URl with a bucket and a filename for uploads like this. In the future, we will be able to get the key used for uploading from within Hono Storage from var api, but in any case, we can't seem to get the uploaded URL from @aws-sdk/s3-client.

import { S3Client } from "@aws-sdk/client-s3";
import { HonoS3Storage } from "@hono-storage/s3";
import { Hono } from "hono";

const REGION = "us-east-1";
const BUCKET_NAME = "hono-storage";

const app = new Hono();
const client = (accessKeyId: string, secretAccessKey: string) =>
  new S3Client({
    region: REGION,
    credentials: {
      accessKeyId,
      secretAccessKey,
    },
  });

const storage = new HonoS3Storage({
  key: (_, file) =>
    `${file.originalname}-${new Date().getTime()}.${file.extension}`,
  bucket: BUCKET_NAME,
  client: (c) => client(c.env.AWS_ACCESS_KEY_ID, c.env.AWS_SECRET_ACCESS_KEY),
});

app.post("/", storage.single("file"), (c) => {
  const uploadedFile = c.var.files.file;
  if (uploadedFile && uploadedFile instanceof File) {
    const uploadedFileUrl = `https://${BUCKET_NAME}.s3.amazonaws.com/${uploadedFile.name}`;
    return c.json({ status: "success", url: uploadedFileUrl });
  }
  return c.json({ status: "error" });
});

export default app;

[BandiDhruv]

thanks @sor4chi ! I was also thinking of doing the same because I noticed a pattern in the uploaded url and just need to know the file name.Thanks You So Much!Appreciate It.