-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
241 additions
and
478 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,96 +1,96 @@ | ||
| import { v2 as cloudinary } from 'cloudinary'; | ||
| import { NextRequest, NextResponse } from 'next/server'; | ||
| import { createImageInsecure } from '../../../database/imgQueries'; | ||
|
|
||
| export type ImageUploadResponsePost = | ||
| | { | ||
| imageUrl: string; | ||
| } | ||
| | { | ||
| error: string; | ||
| }; | ||
|
|
||
| type CloudinaryResponse = { | ||
| secure_url: string; | ||
| }; | ||
|
|
||
| cloudinary.config({ | ||
| cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME, | ||
| api_key: process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY, | ||
| api_secret: process.env.CLOUDINARY_API_SECRET, | ||
| }); | ||
|
|
||
| export async function POST( | ||
| request: NextRequest, | ||
| ): Promise<NextResponse<ImageUploadResponsePost>> { | ||
| try { | ||
| const formData = await request.formData(); | ||
| const file = formData.get('image') as File; | ||
|
|
||
| if (!file.name) { | ||
| return NextResponse.json({ error: 'Please select an image' }); | ||
| } | ||
|
|
||
| if (file.size > 1024 * 1024 * 5) { | ||
| return NextResponse.json({ error: 'Image is too large' }); | ||
| } | ||
|
|
||
| const arrayBuffer = await file.arrayBuffer(); | ||
| const buffer = new Uint8Array(arrayBuffer); | ||
|
|
||
| const response = await new Promise<CloudinaryResponse | undefined>( | ||
| (resolve, reject) => { | ||
| cloudinary.uploader | ||
| .upload_stream({}, (error, result) => { | ||
| if (error) { | ||
| reject(error); | ||
| return; | ||
| } | ||
| resolve(result); | ||
| }) | ||
| .end(buffer); | ||
| }, | ||
| ); | ||
|
|
||
| if (!response) { | ||
| return NextResponse.json({ error: 'Image upload failed' }); | ||
| } | ||
|
|
||
| const image = await createImageInsecure(response.secure_url); | ||
|
|
||
| if (!image) { | ||
| return NextResponse.json({ error: 'Image upload failed' }); | ||
| } | ||
|
|
||
| return NextResponse.json({ imageUrl: image.url }); | ||
| } catch (error) { | ||
| return NextResponse.json({ | ||
| error: (error as Error).message, | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| // import { v2 as cloudinary } from 'cloudinary'; | ||
| // import { NextRequest, NextResponse } from 'next/server'; | ||
| // import { createImageInsecure } from '../../../database/imgQueries'; | ||
|
|
||
| // export type ImageUploadResponsePost = | ||
| // | { | ||
| // imageUrl: string; | ||
| // } | ||
| // | { | ||
| // error: string; | ||
| // }; | ||
|
|
||
| // type CloudinaryResponse = { | ||
| // secure_url: string; | ||
| // }; | ||
|
|
||
| // cloudinary.config({ | ||
| // cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME, | ||
| // api_key: process.env.CLOUDINARY_API_KEY, | ||
| // api_key: process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY, | ||
| // api_secret: process.env.CLOUDINARY_API_SECRET, | ||
| // }); | ||
|
|
||
| // // eslint-disable-next-line no-restricted-syntax | ||
| // export async function POST(request: NextRequest): Promise<NextResponse> { | ||
| // const body = (await request.json()) as { | ||
| // paramsToSign: Record<string, string>; | ||
| // }; | ||
| // export async function POST( | ||
| // request: NextRequest, | ||
| // ): Promise<NextResponse<ImageUploadResponsePost>> { | ||
| // try { | ||
| // const formData = await request.formData(); | ||
| // const file = formData.get('image') as File; | ||
|
|
||
| // if (!file.name) { | ||
| // return NextResponse.json({ error: 'Please select an image' }); | ||
| // } | ||
|
|
||
| // if (file.size > 1024 * 1024 * 5) { | ||
| // return NextResponse.json({ error: 'Image is too large' }); | ||
| // } | ||
|
|
||
| // const arrayBuffer = await file.arrayBuffer(); | ||
| // const buffer = new Uint8Array(arrayBuffer); | ||
|
|
||
| // const response = await new Promise<CloudinaryResponse | undefined>( | ||
| // (resolve, reject) => { | ||
| // cloudinary.uploader | ||
| // .upload_stream({}, (error, result) => { | ||
| // if (error) { | ||
| // reject(error); | ||
| // return; | ||
| // } | ||
| // resolve(result); | ||
| // }) | ||
| // .end(buffer); | ||
| // }, | ||
| // ); | ||
|
|
||
| // if (!response) { | ||
| // return NextResponse.json({ error: 'Image upload failed' }); | ||
| // } | ||
|
|
||
| // const image = await createImageInsecure(response.secure_url); | ||
|
|
||
| // if (!image) { | ||
| // return NextResponse.json({ error: 'Image upload failed' }); | ||
| // } | ||
|
|
||
| // return NextResponse.json({ imageUrl: image.url }); | ||
| // } catch (error) { | ||
| // return NextResponse.json({ | ||
| // error: (error as Error).message, | ||
| // }); | ||
| // } | ||
| // } | ||
|
|
||
| // // import { v2 as cloudinary } from 'cloudinary'; | ||
| // // import { NextRequest, NextResponse } from 'next/server'; | ||
|
|
||
| // const { paramsToSign } = body; | ||
| // // cloudinary.config({ | ||
| // // cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME, | ||
| // // api_key: process.env.CLOUDINARY_API_KEY, | ||
| // // api_secret: process.env.CLOUDINARY_API_SECRET, | ||
| // // }); | ||
|
|
||
| // const signature = cloudinary.utils.api_sign_request( | ||
| // paramsToSign, | ||
| // process.env.CLOUDINARY_API_SECRET as string, | ||
| // ); | ||
| // // // eslint-disable-next-line no-restricted-syntax | ||
| // // export async function POST(request: NextRequest): Promise<NextResponse> { | ||
| // // const body = (await request.json()) as { | ||
| // // paramsToSign: Record<string, string>; | ||
| // // }; | ||
|
|
||
| // return NextResponse.json({ signature }); | ||
| // } | ||
| // // const { paramsToSign } = body; | ||
|
|
||
| // // const signature = cloudinary.utils.api_sign_request( | ||
| // // paramsToSign, | ||
| // // process.env.CLOUDINARY_API_SECRET as string, | ||
| // // ); | ||
|
|
||
| // // return NextResponse.json({ signature }); | ||
| // // } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,59 +1,59 @@ | ||
| 'use client'; | ||
| import { CldUploadWidget } from 'next-cloudinary'; | ||
| import React, { useState } from 'react'; | ||
| // 'use client'; | ||
| // import { CldUploadWidget } from 'next-cloudinary'; | ||
| // import React, { useState } from 'react'; | ||
|
|
||
| interface UploadedAssetData { | ||
| public_id: string; | ||
| width: number; | ||
| height: number; | ||
| id: string; | ||
| } | ||
| // interface UploadedAssetData { | ||
| // public_id: string; | ||
| // width: number; | ||
| // height: number; | ||
| // id: string; | ||
| // } | ||
|
|
||
| export default function ImageUpload() { | ||
| const [pictureUrl, setPictureUrl] = useState(''); | ||
| const [resultPicture, setResultPicture] = useState<UploadedAssetData>(); | ||
| // export default function ImageUpload() { | ||
| // const [pictureUrl, setPictureUrl] = useState(''); | ||
| // const [resultPicture, setResultPicture] = useState<UploadedAssetData>(); | ||
|
|
||
| console.log(resultPicture); | ||
| // console.log(resultPicture); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div> | ||
| <span>Event Poster:</span> | ||
| {!!pictureUrl && ( | ||
| <div> | ||
| <img src={pictureUrl} alt="Event Poster" /> | ||
| </div> | ||
| )} | ||
| <CldUploadWidget | ||
| signatureEndpoint="/api/sign-image" | ||
| onSuccess={(res) => { | ||
| setResultPicture(res.info as UploadedAssetData); | ||
| try { | ||
| if (typeof res.info === 'string') { | ||
| throw new Error('Unexpected string in res.info'); | ||
| } | ||
| if (typeof res.info === 'undefined') { | ||
| throw new Error('Unexpected undefined in res.info'); | ||
| } | ||
| const secureUrl = res.info.secure_url; | ||
| setPictureUrl(secureUrl); | ||
| } catch (error) { | ||
| console.error('Error:', error); | ||
| } | ||
| }} | ||
| > | ||
| {({ open }) => { | ||
| return ( | ||
| <button | ||
| onClick={() => open()} | ||
| className="input input-bordered w-full py-3 px-4 text-center" | ||
| > | ||
| Upload an image | ||
| </button> | ||
| ); | ||
| }} | ||
| </CldUploadWidget> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| // return ( | ||
| // <div> | ||
| // <div> | ||
| // <span>Event Poster:</span> | ||
| // {!!pictureUrl && ( | ||
| // <div> | ||
| // <img src={pictureUrl} alt="Event Poster" /> | ||
| // </div> | ||
| // )} | ||
| // <CldUploadWidget | ||
| // signatureEndpoint="/api/sign-image" | ||
| // onSuccess={(res) => { | ||
| // setResultPicture(res.info as UploadedAssetData); | ||
| // try { | ||
| // if (typeof res.info === 'string') { | ||
| // throw new Error('Unexpected string in res.info'); | ||
| // } | ||
| // if (typeof res.info === 'undefined') { | ||
| // throw new Error('Unexpected undefined in res.info'); | ||
| // } | ||
| // const secureUrl = res.info.secure_url; | ||
| // setPictureUrl(secureUrl); | ||
| // } catch (error) { | ||
| // console.error('Error:', error); | ||
| // } | ||
| // }} | ||
| // > | ||
| // {({ open }) => { | ||
| // return ( | ||
| // <button | ||
| // onClick={() => open()} | ||
| // className="input input-bordered w-full py-3 px-4 text-center" | ||
| // > | ||
| // Upload an image | ||
| // </button> | ||
| // ); | ||
| // }} | ||
| // </CldUploadWidget> | ||
| // </div> | ||
| // </div> | ||
| // ); | ||
| // } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.