unsure how to integrate expressjs backend, aws api gateway, and nextjs. | Next.js | Page 1

ripe depot Jan 6, 2024, 6:56 PM

#

"use client"
import axios from "axios";
import { useState } from "react";
export default async function getImage({params}) {
    [imageData, setImageData] = useState(null)
    const getImage = async () => {
        const response = await axios.get(`http://localhost:5000/api/image/${params.hash}`)
        setImageData(response.data)
    }
    getImage()
    // console.log(val.data)
    if(imageData) {return (val.data)}
}
``` I am unsure how to do I make this work. I am displaying image data to be reference by another component using markdown as such 
![image](link to component above)

hardy ledgeBOT Jan 6, 2024, 6:56 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

novel moat Jan 6, 2024, 6:58 PM

#

what's your image data?

#

like a link or a blob?

#

or what is it?

ripe depot Jan 6, 2024, 6:59 PM

#

its a blob

novel moat Jan 6, 2024, 6:59 PM

#

ok and you want to display the image? Or what would you like to do?

ripe depot Jan 6, 2024, 6:59 PM

#

I want to display the image using markdown by referencing as such : ![image name] (/api/image/hash)

novel moat Jan 6, 2024, 7:01 PM

#

you can just replace the path with your link like:
%imageName%
->
![image name] (/api/image/hash)

ripe depot Jan 6, 2024, 7:01 PM

#

How do I make the call to the backend that gives it the blob?

novel moat Jan 6, 2024, 7:01 PM

#

normally the library that you using can also replace the markdown like that

ripe depot Jan 6, 2024, 7:02 PM

#

I don't have an issue with the markdown.

#

I have an issue with rendering the blob or like retrieving it from the backend

novel moat Jan 6, 2024, 7:02 PM

#

ripe depot How do I make the call to the backend that gives it the blob?

blob:yourexternalurl

#

normally you are able to generate a url like that and then be able to display this url

ripe depot Jan 6, 2024, 7:03 PM

#

const getAddress = (fieldName) =>{
const imageHash = imageUrls[fieldName]
return /api/image/${imageHash}
}

#

this is how I generate the URL

#

I don't have an issue with url generation

novel moat Jan 6, 2024, 7:03 PM

#

🤔

ripe depot Jan 6, 2024, 7:03 PM

#

i just want the right resource to be available at that url,which is image data

ripe depot Jan 6, 2024, 7:03 PM

#

ripe depot ``` "use client" import axios from "axios"; import { useState } from "react"; ex...

I was pulling the data from the backend, but I face an error

#

Unhandled Runtime Error
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

novel moat Jan 6, 2024, 7:05 PM

#

hm I think I know not enought to help you here. Maybe someone else is able to help there

ripe depot Jan 6, 2024, 7:06 PM

#

@spare crescent could you help me out here?

spare crescent Jan 7, 2024, 1:15 AM

#

ripe depot <@743561772069421169> could you help me out here?

you need to fetch the data inside a useEffect if you are using client component

export default async function getImage({ params }) {
  const [imageData, setImageData] = useState(null);

  useEffect(() => {
    const getImage = async () => {
      const response = await axios.get(
        `http://localhost:5000/api/image/${params.hash}`
      );
      setImageData(response.data);
    };
    getImage();
  }, []);

  if (!imageData) {
    return <div>loading...</div>
  }

  return <div></div>
}

ripe depot Jan 7, 2024, 2:47 PM

#

@spare crescent that did not work

#

"use client"
import axios from "axios";
import { useState, useEffect } from "react";
export default function getImage({params}) {
    const [imageData, setImageData] = useState(null)
    useEffect( () =>{
        const getImage = async () => {
            const response = await axios.get(`http://localhost:5000/api/image/${params.hash}`)
            setImageData(response.data)
        };
        getImage();
    }, [])

    return ({imageData})
}

spare crescent Jan 7, 2024, 2:47 PM

#

ripe depot <@743561772069421169> that did not work

what is imageData

ripe depot Jan 7, 2024, 2:48 PM

#

I removed the async for the function name and that solved the issue partially

#

image data is the raw image data

#

Error: Objects are not valid as a React child (found: object with keys {data}). If you meant to render a collection of children, use an array instead.

ripe depot Jan 7, 2024, 2:50 PM

#

ripe depot I want to display the image using markdown by referencing as such : ![image name...

I want image data to be found at the path: /api/image/:hash

spare crescent Jan 7, 2024, 2:51 PM

#

"use client"
import axios from "axios";
import { useState, useEffect } from "react";
export default function getImage({params}) {
    const [imageData, setImageData] = useState(null)
    useEffect( () =>{
        const getImage = async () => {
            const response = await axios.get(`http://localhost:5000/api/image/${params.hash}`)
            setImageData(response.data)
  console.log(response.data)
        };
        getImage();
    }, [])

    return <div></div>
}

#

show me the console.log

ripe depot Jan 7, 2024, 2:52 PM

#

spare crescent Jan 7, 2024, 2:52 PM

#

"use client"
import axios from "axios";
import { useState, useEffect, useRef } from "react";
export default function getImage({params}) {
    const [loaded, setLoaded] = useState(false)
    const ref = useRef<HTMLImageElement>(null)
    useEffect( () =>{
        const getImage = async () => {
            const response = await axios.get(`http://localhost:5000/api/image/${params.hash}`)
            const blob = await response.blob()
            const url = URL.createObjectURL(blob)
            if (ref.current) {
              ref.current.src = url
              setLoaded(true)
            }
            
        };
        getImage();
    }, [])

    if (!loaded) return null

    return <img ref={ref} />
}

spare crescent Jan 7, 2024, 2:53 PM

#

spare crescent ```ts "use client" import axios from "axios"; import { useState, useEffect, useR...

edited

ripe depot Jan 7, 2024, 2:53 PM

#

that would display an image. However, will I be able to reference it elsewhere in my app?

#

does that make sense?

spare crescent Jan 7, 2024, 2:54 PM

#

wdym?

ripe depot Jan 7, 2024, 2:54 PM

#

ripe depot I want to display the image using markdown by referencing as such : ![image name...

i am using markdown in certain aspects of my blog site

#

So the client should be able to reference the image as I have mentioned it and place the image where the image tag is created

ripe depot Jan 7, 2024, 2:55 PM

#

spare crescent ```ts "use client" import axios from "axios"; import { useState, useEffect, useR...

this only renders the image at the path /api/image/:hash

#

can i reference it another place such as <img url ="/api/image/:hash" />

#

will the reference work?

spare crescent Jan 7, 2024, 2:57 PM

#

you don't want to show this link http://localhost:5000/api/image/${params.hash}?

ripe depot Jan 7, 2024, 2:58 PM

#

I could do that

spare crescent Jan 7, 2024, 2:59 PM

#

then I think you could just use that link for the image in markdown?

ripe depot Jan 7, 2024, 3:00 PM

#

I guess so

spare crescent Jan 7, 2024, 3:01 PM

#

ripe depot I guess so

you could create a route handler if you want to use this link![image name] (/api/image/hash)

#

// app/api/image/[hash]/route.ts
export async function GET(req:Request, { params }: { params: { hash: string } }) {
  return fetch("http://localhost:5000/api/image/${params.hash}")
}

ripe depot Jan 7, 2024, 3:03 PM

#

I was just looking at the docs!

#

thank you

spare crescent Jan 7, 2024, 3:04 PM

#

does it work for you?

ripe depot Jan 7, 2024, 3:04 PM

#

I am still testing one minut

#

It is returning the response object

#

the object has the following structure: {data: image data}

#

// app/api/image/[hash]/route.ts
export async function GET(req:Request, { params }: { params: { hash: string } }) {
  const response = await fetch("http://localhost:5000/api/image/${params.hash}")
  return response.data
}

spare crescent Jan 7, 2024, 3:11 PM

#

ripe depot ```ts // app/api/image/[hash]/route.ts export async function GET(req:Request, { ...

await fetch()

ripe depot Jan 7, 2024, 3:11 PM

#

However, this is no longer a request

spare crescent Jan 7, 2024, 3:11 PM

#

you didnt await

ripe depot Jan 7, 2024, 3:11 PM

#

it worked without the await

#

#

I mean I could alter my api to just return without data

#

I updated my api. let me test my referencing it in markdwon

spare crescent Jan 7, 2024, 3:13 PM

#

ripe depot

// app/api/image/[hash]/route.ts
export async function GET(req:Request, { params }: { params: { hash: string } }) {
  const response = await fetch("http://localhost:5000/api/image/${params.hash}")
  const buff = Buffer.from(await response.data.arrayBuffer())
  return new Response(buff, {headers: response.headers})
}

or try this

spare crescent Jan 7, 2024, 3:15 PM

#

ripe depot

wait, are you using axios or fetch

ripe depot Jan 7, 2024, 3:16 PM

#

spare crescent wait, are you using axios or fetch

axios

#

this is roughly what my data looks like now

#

it is pretty much the image data

#

However, when I set this as the URL for my image, it does not load the image.

#

Is it because it is a json object and not a readable stream of data?

spare crescent Jan 7, 2024, 3:20 PM

#

ripe depot Is it because it is a json object and not a readable stream of data?

could you show the code

#

look like you didn't set the header

ripe depot Jan 7, 2024, 3:21 PM

#

#

this is my expressjs endpoint code

#

js res.status(200).header("Content-Type", "multipart/form-data").json(response.data)

#

i think I just need to add this ^

spare crescent Jan 7, 2024, 3:24 PM

#

ripe depot

console.log(response)

spare crescent Jan 7, 2024, 3:24 PM

#

ripe depot ```js res.status(200).header("Content-Type", "multipart/form-data").json(respons...

no

ripe depot Jan 7, 2024, 3:25 PM

#

the response is very large and contains a lot of other details apart from the image data

#

however, response.data is the image data

spare crescent Jan 7, 2024, 3:26 PM

#

ripe depot the response is very large and contains a lot of other details apart from the im...

ok i guess this

 res
    .setHeader("Content-Type", response.headers["Content-Type"])
    .setHeader("Content-length", response.headers["Content-Length"])
    .send(response.data);

ripe depot Jan 7, 2024, 3:27 PM

#

{"error":{"code":"ERR_HTTP_INVALID_HEADER_VALUE"}}

spare crescent Jan 7, 2024, 3:28 PM

#

ripe depot {"error":{"code":"ERR_HTTP_INVALID_HEADER_VALUE"}}

add a console.log(headers["Content-Type"])

ripe depot Jan 7, 2024, 3:29 PM

#

console.log(response.headers['Content-Type'] ?

spare crescent Jan 7, 2024, 3:29 PM

#

yes

ripe depot Jan 7, 2024, 3:29 PM

#

okay

#

undefined

spare crescent Jan 7, 2024, 3:30 PM

#

do you know the image type?

ripe depot Jan 7, 2024, 3:30 PM

#

png

spare crescent Jan 7, 2024, 3:30 PM

#

or log this
console.log(response.headers)

#

png for all image?

ripe depot Jan 7, 2024, 3:31 PM

#

Object [AxiosHeaders] {
date: 'Sun, 07 Jan 2024 15:31:09 GMT',
'content-type': 'application/json',
'content-length': '1804118',
connection: 'keep-alive',
'x-amzn-requestid': '70a4a3a0-db12-4fcf-b68d-5d0c2b4baa55',
'x-amz-apigw-id': 'RLOFpED9CYcEBOw=',
'x-amzn-trace-id': 'Root=1-659ac3bd-230f655021fbb37d7011bb2a'

spare crescent Jan 7, 2024, 3:31 PM

#

oh there it is

ripe depot Jan 7, 2024, 3:31 PM

#

spare crescent png for all image?

I have kept it as allow all image types

spare crescent Jan 7, 2024, 3:31 PM

#

ripe depot I have kept it as allow all image types

  res
    .setHeader("Content-Type", response.headers["content-type"])
    .setHeader("Content-Length", response.headers["content-length"])
    .send(response.data);

ripe depot Jan 7, 2024, 3:32 PM

#

that works

#

however, it does not seem to populate my webpage with the actual image

spare crescent Jan 7, 2024, 3:33 PM

#

ripe depot however, it does not seem to populate my webpage with the actual image

it should show under New Post:?

ripe depot Jan 7, 2024, 3:33 PM

#

yes

#

correct

spare crescent Jan 7, 2024, 3:34 PM

#

ok show the handler in /api/image/[hash]

#

the code

ripe depot Jan 7, 2024, 3:34 PM

#

there is nothing at /api/image/[hash]

#

didn't you recommend a route handler

spare crescent Jan 7, 2024, 3:35 PM

#

yea show the code for it

ripe depot Jan 7, 2024, 3:35 PM

#


export async function GET(req:Request, { params }: { params: { hash: string } }) {
    return await fetch(`http://localhost:5000/api/image/${params.hash}`)
}

spare crescent Jan 7, 2024, 3:36 PM

#

ripe depot ```js export async function GET(req:Request, { params }: { params: { hash: stri...

do you see the image with this url http://localhost:5000/api/image/${params.hash}?

ripe depot Jan 7, 2024, 3:36 PM

#

no

#

i see the file data

#

spare crescent Jan 7, 2024, 3:39 PM

#

ripe depot

change this

const response = await axios.get(AWS_URL + `/${req.params.imageID}`, { responseType: "blob" })

ripe depot Jan 7, 2024, 3:42 PM

#

I did that

#

nothing changed

spare crescent Jan 7, 2024, 3:45 PM

#

can you show me the url from AWS_URL?

ripe depot Jan 7, 2024, 3:47 PM

#

that is sensitive to my project

#

After reading some responses on stackOverflow, I have a feeling that maybe I did not set up the API gateway correctly

spare crescent Jan 7, 2024, 3:47 PM

#

ripe depot Object [AxiosHeaders] { date: 'Sun, 07 Jan 2024 15:31:09 GMT', 'content-type...

yes the content-type is json

#

you need to set it to image

ripe depot Jan 7, 2024, 3:48 PM

#

should it be base64?

spare crescent Jan 7, 2024, 3:48 PM

#

ripe depot should it be base64?

image/png

#

image/jpeg

#

base on the file

ripe depot Jan 7, 2024, 3:49 PM

#

I did image/*

#

as I am unsure what the image file will be

#

it could be jpg or png

spare crescent Jan 7, 2024, 3:49 PM

#

ripe depot Object [AxiosHeaders] { date: 'Sun, 07 Jan 2024 15:31:09 GMT', 'content-type...

but here is showing application/json

ripe depot Jan 7, 2024, 3:49 PM

#

I just changed it give me a minut

#

I will shae the new headers

spare crescent Jan 7, 2024, 3:50 PM

#

I don't know how you fetch the file but it should have the content-type

ripe depot Jan 7, 2024, 3:51 PM

#

Object [AxiosHeaders] {
date: 'Sun, 07 Jan 2024 15:50:45 GMT',
'content-type': 'image/*',
'content-length': '1804118',
connection: 'keep-alive',
'x-amzn-requestid': '3c9f6253-15b5-4b65-9b28-935009923a09',
'x-amz-apigw-id': 'RLQ9aHjOCYcEsWA=',
'x-amzn-trace-id': 'Root=1-659ac855-37470a8f059fe9b101b28bc1'
}

spare crescent Jan 7, 2024, 3:51 PM

#

lol

ripe depot Jan 7, 2024, 3:51 PM

#

When I refresh /api/image/:hash it downloads the image

spare crescent Jan 7, 2024, 3:52 PM

#

ok try it on your site

ripe depot Jan 7, 2024, 3:52 PM

#

I am a little confused right now

spare crescent Jan 7, 2024, 3:53 PM

#

ripe depot however, it does not seem to populate my webpage with the actual image

I mean try here

ripe depot Jan 7, 2024, 3:54 PM

#

It still does not work

spare crescent Jan 7, 2024, 3:54 PM

#

ripe depot It still does not work

check the error on dev console

ripe depot Jan 7, 2024, 3:55 PM

#

there appears to be no errors

#

#

nothing regarding the image or the routehandler

spare crescent Jan 7, 2024, 3:57 PM

#

params is not defined

spare crescent Jan 7, 2024, 3:57 PM

#

ripe depot

check the network tab

#

look for the request of image

ripe depot Jan 7, 2024, 3:58 PM

#

spare crescent Jan 7, 2024, 3:59 PM

#

then it should work?

#

reload the page

#

and look for image response

ripe depot Jan 7, 2024, 4:01 PM

#

I changed it up a little

#

router.get('/:imageID', async (req,res) =>{
    res.redirect( AWS_URL + `/${req.params.imageID}`)
    // try{
    //     const response = await axios.get(
    //         AWS_URL + `/${req.params.imageID}`,
    //         { responseType: "blob" }
    //     )
    //     // console.log(response)
    //     console.log(response.headers)
    //     res
    //     .status(200)
    //     .setHeader("Content-Type", response.headers["content-type"])
    //     .setHeader("Content-length", response.headers["content-length"])
    //     .send(response.data);
    // }catch(error){
    //     res.status(400).json({error:error})
    // }
})```

spare crescent Jan 7, 2024, 4:02 PM

#

lol

#

does it work?

ripe depot Jan 7, 2024, 4:02 PM

#

no lol

#

it does the same thing as the comment out code

#

it just downloads the iamge

spare crescent Jan 7, 2024, 4:03 PM

#

how do you render the image on the page?

ripe depot Jan 7, 2024, 4:03 PM

#

#

the console shows that image is working fine

spare crescent Jan 7, 2024, 4:03 PM

#

try this on any page

<img src="/api/images/hash" />

spare crescent Jan 7, 2024, 4:03 PM

#

ripe depot

yes it should work

spare crescent Jan 7, 2024, 4:03 PM

#

spare crescent try this on any page ```ts <img src="/api/images/hash" /> ```

try this

ripe depot Jan 7, 2024, 4:03 PM

#

![Image](http://url/a.png)

#

this is what I am doing

#

pretty much

#

I got this from the common mark docs

spare crescent Jan 7, 2024, 4:04 PM

#

spare crescent try this on any page ```ts <img src="/api/images/hash" /> ```

try this first

ripe depot Jan 7, 2024, 4:06 PM

#

does not work

#

#

i face this error

spare crescent Jan 7, 2024, 4:07 PM

#

/api/image

#

you add a s

ripe depot Jan 7, 2024, 4:07 PM

#

my ba

#

the console is fine now but the image is not rendered

spare crescent Jan 7, 2024, 4:08 PM

#

ripe depot the console is fine now but the image is not rendered

<img src="/api/images/hash" height={300} width={480} />

how about this?

ripe depot Jan 7, 2024, 4:08 PM

#

still nothing

spare crescent Jan 7, 2024, 4:08 PM

#

just this?

ripe depot Jan 7, 2024, 4:09 PM

#

ye

spare crescent Jan 7, 2024, 4:11 PM

#

ripe depot ye

what is the code on express now?

ripe depot Jan 7, 2024, 4:11 PM

#

ripe depot ```js router.get('/:imageID', async (req,res) =>{ res.redirect( AWS_URL + `...

this.

spare crescent Jan 7, 2024, 4:12 PM

#

doing redirect?

ripe depot Jan 7, 2024, 4:12 PM

#

yea

#

It pretty much does the same thing that we were doing anyways

#

I just went back to our code and retried it! it does the exact same thing

spare crescent Jan 7, 2024, 4:14 PM

#

ok i know the problem

#

try change image/* to image/png

ripe depot Jan 7, 2024, 4:18 PM

#

one minute

ripe depot Jan 7, 2024, 4:18 PM

#

spare crescent just this?

lmao api/image/acfc7a71128cd0e8d436d64fa661bd506f7eb73e677f6374d729c955cb42f3db returns this

spare crescent Jan 7, 2024, 4:19 PM

#

not work?

ripe depot Jan 7, 2024, 4:19 PM

#

it actually rendered an image

#

#

this is what I see at /api/image/hash

#

lol

spare crescent Jan 7, 2024, 4:20 PM

#

is this the actual image?

ripe depot Jan 7, 2024, 4:21 PM

#

no

#

it isn;t

#

oh I realised what the error is

#

I am having an error when uploading the actual image

spare crescent Jan 7, 2024, 4:23 PM

#

lol

ripe depot Jan 7, 2024, 4:23 PM

#

#

i did a test by manually uploading an image and it worked

#

however, this is my code to upload images

#

router.post("/", uploadImages.single("image"), async (req, res) =>{
     // Put an object into an Amazon S3 bucket.
     const image = req.file.buffer;
     const hash = crypto.createHmac('sha256', image)
                    .digest('hex');
        
     console.log("imagehash:",hash);
     console.log('awsurl:', AWS_URL + `/${hash}`)
   
    try{
        const response = await axios.put(
            AWS_URL + `/${hash}`,  // url
            req.file.buffer, //file body
            {
                headers: {'content-type': "image/"},
            },
        )
        console.log("response", response)
        res.status(200).json({imageID: `${hash}`})
    }catch(error){
        console.log(error);
        res.status(400).json({error: error})
    }
})

#

i have to change the headers correct?

#

do you think this will work?

spare crescent Jan 7, 2024, 4:27 PM

#

ripe depot do you think this will work?

I think you need to provide the correct content-type

ripe depot Jan 7, 2024, 4:27 PM

#

router.post("/", uploadImages.single("image"), async (req, res) =>{
     // Put an object into an Amazon S3 bucket.
     const image = req.file.buffer;
     const fileExtension = req.file.originalname.split('.').pop();
     const hash = crypto.createHmac('sha256', image)
                    .digest('hex');
        
     console.log("imagehash:",hash);
     console.log('awsurl:', AWS_URL + `/${hash}`)
   
    try{
        const response = await axios.put(
            AWS_URL + `/${hash}`,  // url
            req.file.buffer, //file body
            {
                headers: {'content-type': `image/${fileExtension}`},
            },
        )
        console.log("response", response)
        res.status(200).json({imageID: `${hash}`})
    }catch(error){
        console.log(error);
        res.status(400).json({error: error})
    }
})```

#

I added the file extension! hopefully this works

#

that still didn't work

spare crescent Jan 7, 2024, 4:33 PM

#

ripe depot that still didn't work

router.post("/", uploadImages.single("image"), async (req, res) =>{
     // Put an object into an Amazon S3 bucket.
     const image = req.file.buffer;
     const fileExtension = req.file.originalname.split('.').pop();
     const hash = crypto.createHmac('sha256', image)
                    .digest('hex');
        
     console.log("imagehash:",hash);
     console.log('awsurl:', AWS_URL + `/${hash}`)
   
    try{
        const response = await axios.put(
            AWS_URL + `/${hash}`,  // url
            req.file, //file body
            {
                headers: {'content-type': `image/${fileExtension}`},
            },
        )
        console.log("response", response)
        res.status(200).json({imageID: `${hash}`})
    }catch(error){
        console.log(error);
        res.status(400).json({error: error})
    }
})

#

req.file instead of req.file.buffer

ripe depot Jan 7, 2024, 4:34 PM

#

did not wokr

spare crescent Jan 7, 2024, 4:35 PM

#

any error

ripe depot Jan 7, 2024, 4:36 PM

#

no

#

I think the api gateway needs some work

spare crescent Jan 7, 2024, 4:38 PM

#

ripe depot I think the api gateway needs some work

good luck lolsob

#unsure how to integrate expressjs backend, aws api gateway, and nextjs.