Skip to content

Add image uploading to other tools and change button colors #430

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
natnaelat merged 2 commits into from
Nov 16, 2025
Merged

Add image uploading to other tools and change button colors #430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3d123aa
Add image uploading to other tools and change button colors
natnaelat Nov 16, 2025
adbf51f
Fix formatting with Prettier
natnaelat Nov 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion frontend/src/components/ImageUploadSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@ import { ImagesService, Body_upload_image_images_post } from "../api";
export function ImageUploadSection({
tempImage,
setTempImage,
showLabel = false,
}: {
tempImage: string;
setTempImage: (value: string) => void;
showLabel?: boolean;
}) {
const fileInputRef = useRef<HTMLInputElement>(null);
const [uploadError, setUploadError] = useState<string>("");
Expand Down Expand Up @@ -130,7 +132,8 @@ export function ImageUploadSection({

return (
<div className="flex flex-col w-full min-w-0 gap-3">
<div>image url or path:</div>
{/* Conditionally show label */}
{showLabel && <div>image url or path:</div>}

<div className="flex flex-col gap-2 w-full">
{/* URL Input */}
Expand Down
44 changes: 41 additions & 3 deletions frontend/src/pages/BookEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,27 @@ function PropsForm({ tempProps, setTempProps }: PropsFormProps) {
console.error("Error parsing tempProps JSON:", e);
}

const imageKeys = new Set([
"image",
"imageUrl",
"imageSrc",
"backgroundImage",
"img",
]);

// Helper to check if a key is an image field
const isImageField = (key: string): boolean => {
const lowerKey = key.toLowerCase();
return (
imageKeys.has(lowerKey) ||
lowerKey.includes("image") ||
lowerKey.includes("img") ||
(typeof propsObject[key] === "string" &&
(propsObject[key].startsWith("http") ||
propsObject[key].startsWith("/")))
);
};

// Compute arrays based on the initial propsObject
const objectArrays = Object.keys(propsObject).filter(
(key) =>
Expand Down Expand Up @@ -215,6 +236,14 @@ function PropsForm({ tempProps, setTempProps }: PropsFormProps) {
className="border border-gray-300 rounded p-1 font-mono whitespace-pre w-full max-w-full min-w-0"
style={{ resize: "vertical" }}
/>
) : isImageField(key) ? (
// *** NEW: Use ImageUploadSection for image fields ***
<ImageUploadSection
tempImage={propsObject[key]}
setTempImage={(newValue) =>
handleInputChange(key, newValue)
}
/>
) : (
<input
id={key}
Expand Down Expand Up @@ -326,6 +355,14 @@ function PropsForm({ tempProps, setTempProps }: PropsFormProps) {
<option value="true">True</option>
<option value="false">False</option>
</select>
) : isImageField(field) ? (
// *** NEW: Use ImageUploadSection for image fields in arrays ***
<ImageUploadSection
tempImage={value}
setTempImage={(newValue) =>
handleOptionChange(arrayKey, index, field, newValue)
}
/>
) : (
<input
id={`${field}-${index}`}
Expand Down Expand Up @@ -472,13 +509,13 @@ function PageNavigator({
</button>

<a
className="w-9/12 h-12 border border-primary-green flex items-center justify-center rounded-xl text-lg hover:bg-primary-green hover:text-white text-center"
className="w-9/12 h-12 bg-primary-green text-white flex items-center justify-center rounded-xl text-lg hover:bg-green-700 text-center transition-colors"
href={`/book/${bookId}/1`}
>
Preview Book
</a>
<button
className="w-9/12 h-12 border border-primary-green flex items-center justify-center rounded-xl text-lg hover:bg-primary-green hover:text-white text-center"
className="w-9/12 h-12 bg-primary-green text-white flex items-center justify-center rounded-xl text-lg hover:bg-green-700 text-center transition-colors"
onClick={() => setPageNum(0)}
>
Book Details
Expand Down Expand Up @@ -531,7 +568,7 @@ function PageNavigator({
);
})}
<button
className="w-9/12 h-12 border border-primary-green flex flex-col items-center justify-center rounded-xl text-xl hover:bg-primary-green hover:text-white"
className="w-9/12 h-12 bg-primary-green text-white flex flex-col items-center justify-center rounded-xl text-xl hover:bg-green-700 transition-colors"
onClick={addPage}
>
+
Expand Down Expand Up @@ -731,6 +768,7 @@ function BookImageEditor({
<ImageUploadSection
tempImage={tempImage}
setTempImage={setTempImage}
showLabel={true}
/>
) : (
<>
Expand Down