Skip to content

Commit

Permalink
chore: Remove commented out code for image upload in Upload page
Browse files Browse the repository at this point in the history
  • Loading branch information
@bramses
bramses committed Sep 8, 2024
1 parent e11f150 commit 8a84e68
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 74 deletions.
64 changes: 0 additions & 64 deletions src/app/[locale]/(auth)/dashboard/upload/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,70 +82,6 @@ const Upload = () => {
};

const uploadImage = async () => {
// const fileInput = document.getElementById('file-input');
// if (!fileInput) return;
// (fileInput as HTMLInputElement).click();

// fileInput.addEventListener('change', async (event) => {
// const file = (event.target as HTMLInputElement).files?.[0];
// if (!file) return;

// const formData = new FormData();
// formData.append('file', file);
// setLoading(true);

// const worker = new Worker('/uploadWorker.js');
// worker.postMessage({ formData, apiKey });

// worker.onmessage = (e) => {
// const { success, data, error } = e.data;
// if (success) {
// console.log('Image description:', data);
// add(data.data, {
// author: data.metadata.imageUrl,
// title: 'Image',
// });
// } else {
// console.error('Error:', error);
// }
// setLoading(false);
// };
// // const response = await fetch(
// // 'https://commonbase-supabase-alpha.onrender.com/cf-images/upload',
// // {
// // method: 'POST',
// // headers: {
// // Authorization: `Bearer ${apiKey}`,
// // },
// // body: formData,
// // },
// // );
// // const data = await response.json();
// // console.log('Image uploaded:', data);
// // const pngUrl = `${data.url}?format=png`;
// // console.log('PNG URL:', pngUrl);

// // const response2 = await fetch(
// // 'https://commonbase-supabase-alpha.onrender.com/cf-images/describe',
// // {
// // method: 'POST',
// // headers: {
// // Authorization: `Bearer ${apiKey}`,
// // 'Content-Type': 'application/json',
// // },
// // body: JSON.stringify({ imageUrl: pngUrl }),
// // },
// // );
// // const data2 = await response2.json();
// // console.log('Image description:', data2);

// // add(data2.data, {
// // author: data2.metadata.imageUrl,
// // title: 'Image',
// // });

// // setLoading(false);
// });
const fileInput = document.getElementById('file-input');
if (!fileInput) return;
(fileInput as HTMLInputElement).click();
Expand Down
90 changes: 80 additions & 10 deletions src/components/Uploader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Uploader = () => {
lastName: '',
});

// const apiKey = 'apikeyyyy'; // todo get from env
const apiKey = 'apikeyyyy'; // todo get from env
const [loading, setLoading] = useState(false);

useEffect(() => {
Expand All @@ -32,14 +32,28 @@ const Uploader = () => {
}
}, [isLoaded, user]);

const add = async (data: string) => {
const add = async (
data: string,
argMetadata: Record<string, string> = {
author: '',
title: '',
},
) => {
// get value from input fields and add to metadata
// set to loading
setLoading(true);
const metadata = {
author,
title,
};
// const metadata = {
// author,
// title,
// };

const metadata: Record<string, string> = {};
console.log('argMetadata:', argMetadata);
for (const field of Object.keys(argMetadata)) {
if (argMetadata[field] !== undefined) {
metadata[field] = argMetadata[field]!;
}
}

const response = await fetch('/api/add', {
method: 'POST',
Expand Down Expand Up @@ -75,7 +89,7 @@ const Uploader = () => {
// TODO: implement image upload

// const uploadImage = async () => {
// const fileInput = document.getElementById('file-input');
// const fileInput = document.getElementById('file-input-modal');
// if (!fileInput) return;
// (fileInput as HTMLInputElement).click();

Expand Down Expand Up @@ -125,25 +139,65 @@ const Uploader = () => {
// });
// };

const uploadImage = async () => {
const fileInput = document.getElementById('file-input-modal');
if (!fileInput) return;
(fileInput as HTMLInputElement).click();

fileInput.addEventListener('change', async (event) => {
const file = (event.target as HTMLInputElement).files?.[0];
if (!file) return;

const reader = new FileReader();
reader.onload = () => {
const arrayBuffer = reader.result;
setLoading(true);

const worker = new Worker('/imageWorker.js');
worker.postMessage({ file: arrayBuffer, apiKey });

worker.onmessage = (e) => {
const { success, data, error } = e.data;
if (success) {
console.log('Image description:', data);
add(data.data, {
author: data.metadata.imageUrl,
title: 'Image',
});
} else {
console.error('Error:', error);
}
setLoading(false);
};
};
reader.readAsArrayBuffer(file);
});
};

return (
<div className="[&_p]:my-6">
{/* an input field for your name and then a textarea and a button to submit to /api/add */}

<textarea
id="modal-message"
rows={4}
style={{ fontSize: '17px' }}
className="mt-4 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
placeholder="Your message..."
value={textAreaValue}
onKeyDown={(e) => {
if (e.key === 'Enter' && e.metaKey) {
add(textAreaValue);
add(textAreaValue, {
author,
title,
});
}
}}
onChange={(e) => setTextAreaValue(e.target.value)}
/>
<input
type="text"
style={{ fontSize: '17px' }}
className="mt-2 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
placeholder={title}
onChange={(e) => setTitle(e.target.value)}
Expand All @@ -156,6 +210,7 @@ const Uploader = () => {
/>
<input
type="text"
style={{ fontSize: '17px' }}
className="mt-2 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
placeholder={author}
onChange={(e) => setAuthor(e.target.value)}
Expand All @@ -180,9 +235,24 @@ const Uploader = () => {
</span>
</div>

<p>
<input
type="file"
accept="image/*"
className="hidden"
id="file-input-modal"
/>
<button
type="button"
onClick={uploadImage}
className="mt-2 block rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Upload Image
</button>
{/* {loading && <p>Loading...</p>} */}

{/* <p>
<em>image upload coming soon, use /dashboard/upload for now</em>
</p>
</p> */}

{/* <div className="inline-flex w-full items-center justify-center">
<hr className="my-8 h-px w-64 border-0 bg-gray-200 dark:bg-gray-700" />
Expand Down

0 comments on commit 8a84e68

Please sign in to comment.