How would I upload a file to s3 bucket

🌵 Needle Engine
1

(topic deleted by author)

2

Hi, instead of deleting post it would be great if you could add a comment on why it’s not relevant anymore or what the solution was so it’s helpful to others as well :slight_smile:

3

Sorry, afterwards I figured it out, and thought the question was too noob. Anyways, for anyone who might be interested. Here was the original question and I am replying the answer next

This might be very basic for most, but I never had worked on anything web, so little lost here. I have this typescript code that uploads to aws s3 bucket. But I am not sure how to use it? Needle already creates a server for me, right? So where do I put the server code for this? I have it working with snap camera kit, but want to move to needle for its flexibility with unity.

import express from "express";
import ViteExpress from "vite-express";
import { generateUploadURL } from './s3'

const app = express();

app.use(express.static('client'));

app.get('/s3Url', async (req, res) => {
  const url = await generateUploadURL()
  res.send({url})
})

ViteExpress.listen(app, 3000, () =>
  console.log("Server is listening on port 3000..."),
);
4

Basically you need this S3Client Package from aws-sdk to upload a file to s3 bucket.

import { S3Client, PutObjectCommand, GetObjectCommand } from "@aws-sdk/client-s3";

 private static async uploadPhotoToAWS(blob: Blob, opts?: CaptureOptions) {
        if (!opts?.aws) {
            showBalloonError("AWS configuration is missing");
            return false;
        }

        const { region, bucketName, accessKeyId, secretAccessKey } = opts.aws;

        const client = new S3Client({
            region,
            credentials: {
                accessKeyId,
                secretAccessKey,
            },
        });

        const format = this.recordingFormat;
        const ext = format.split("/")[1];
        let fileName = "needle-engine-facefilter";
        if (opts?.file_name?.length && hasProLicense()) {
            fileName = opts.file_name;
        }
        fileName += "." + ext;

        try {
            const command = new PutObjectCommand({
                Bucket: bucketName,
                Key: fileName,
                Body: blob,
                ContentType: format,
            });

            this.showSpinner("Uploading file, please wait")
            const response = await client.send(command);
            this.hideSpinner();

            // Generate a presigned URL for downloading
            const getObjectCommand = new GetObjectCommand({
                Bucket: bucketName,
                Key: fileName,
            });

            return true;
        } catch (error) {
            console.error("Error uploading to AWS S3:", error);
            showBalloonError("Failed to upload file to AWS S3");
            return false;
        }
    }
5

Be careful that you dont leak your aws data - Needle Engine is a client side library so it runs on your website visitors machine - hence everyone who knows what they’re doing can access and read all the code.

You might want to handle S3 upload url generation on your server (e.g. express, fastify, …, php…) and only allow this for known domains (the ones you control of want to allows this for, for example).

Or you can configure aws to only allow generating these urls and uploading stuff from your domains.

Can you share a bit more what your goal is, what you try to build and what files you want to upload?

6

Thanks for the advice Marcel. In my original approach I used an express server, but didn’t understand why tbh. When I was trying that with needle,

What have I tried / explored

  1. I was not sure where to write those express code
  2. Needle already starts a server, right? Where I see the exported scene runs? So if I had to do some server side code, how can I reuse existing code.
  3. I tried adding the codes in a folder named server, but got an error about viteexpress and could not resolve it, so I gave up

What am I trying to build

Basically I am building a photobooth, where a user can take a photo with an AR filter applied to his face and then can send him/herself the image. So I basically upload it to S3 and email the user the url to download the file.

7

Ok I understand.

Needle does start a development server - that server is used to load your files from disc and to implement the behaviour you’d have when you upload your files to e.g. an FTP provider, github pages, etc… but this is the frontend so it is running on your user’s machine (what I said before).

You can create an express server as a separate project or modify your web project to serve files using express - we don’t have a template for that right now but this is basically what our glitch template does (and what you get when you remix it) - it runs express that serves the files that you uploaded. So the easiest route for you would probably to setup your (express) routes based off of our glitch template and then just use DeployToGlitch with your project name to update the website. In glitch you can enter your AWS secrets in the .env file.

I hope that helps to get you started?

1 Like
8

This topic was automatically closed 13 days after the last reply. New replies are no longer allowed.