Val Town Code SearchReturn to Val Town

4
5<div align="center">
6<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="700px"/>
7</div>

8
9<div align="center">
10<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
11</div>

3import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4
5// import { getImages } from "./get-images";
6
7// const images = await getImages("image", 12);
8// export const IMAGE_URLS = images;
9
10// mock data
11const IMAGE_URLS = [
12  "https://charmaine-blob_admin.web.val.run/api/public/public%2F1738957396306_pngtree-valentine-day-gift-box-open-love-heart-and-rose-potale-greeting-png-image_6564851.png",
13  "https://charmaine-blob_admin.web.val.run/api/public/public%2F1738959510139_2020-heart-pounding-animation.gif",
14  "https://charmaine-blob_admin.web.val.run/api/public/public%2F1738959545863_sugary-heart-valentine-png-5692911.png",
15  "https://charmaine-blob_admin.web.val.run/api/public/public%2F1738957543311_Red_Happy_Valentine's_Day_PNG_Clip-Art_Image.png",
16];
17
81}
82
83function DraggableImage({ imageUrl, initialPosition, index, onPositionChange, isCreating, delay = 0 }) {
84  const [position, setPosition] = useState(initialPosition);
85  const [isDragging, setIsDragging] = useState(false);
149    >
150      <img
151        src={imageUrl}
152        alt="Valentine"
153        style={{
165  const [message, setMessage] = useState("");
166  const [isCreating, setIsCreating] = useState(false);
167  const [imagePositions, setImagePositions] = useState([]);
168  const [showEnvelope, setShowEnvelope] = useState(false);
169  const [contentVisible, setContentVisible] = useState(false);
177      if (urlMessage) setMessage(decodeURIComponent(urlMessage));
178      if (urlPositions) {
179        setImagePositions(JSON.parse(decodeURIComponent(urlPositions)));
180      } else {
181        initializeRandomPositions();
196      scale: 0.8 + Math.random() * 0.4,
197    }));
198    setImagePositions(positions);
199  };
200
201  const handlePositionChange = (index, newPosition) => {
202    const newPositions = [...imagePositions];
203    newPositions[index] = newPosition;
204    setImagePositions(newPositions);
205  };
206
208    const url = new URL(window.location.href);
209    url.searchParams.set("message", message);
210    url.searchParams.set("positions", encodeURIComponent(JSON.stringify(imagePositions)));
211    navigator.clipboard.writeText(url.toString());
212    alert("URL copied to clipboard!");
278            />
279            <div style={{ fontSize: "14px", color: "#666" }}>
280              Drag the images to arrange them
281            </div>
282            <button
347      )}
348
349      {imagePositions.map((position, index) => (
350        <DraggableImage
351          key={index}
352          index={index}
353          imageUrl={IMAGE_URLS[index % IMAGE_URLS.length]}
354          initialPosition={position}
355          onPositionChange={handlePositionChange}

4
5// export const manager = {
6//   getImages(type: string, count: number): Promise<string[]> {
7//     return getImages(type, count);
8//   },
9// };
10
11export async function getImages(type: string, count: number): Promise<string[]> {
12  // Query to select random rows of the specified type
13  const result = await sqlite.execute(
22  );
23
24  let images: string[] = [];
25  console.log(result.rows);
26  for (const row of result.rows) {
27    const blobPath = await blob.get(row["path"] as string);
28    images.push(`https://shouser-blob_admin.web.val.run/api/public/${blobPath.url}`);
29  }
30
31  return images;
32  // console.log("images", await getImages("image", 1));
33  // Extract paths from the result rows
34  // return result.rows.map(asyncrow => await blob.get(row.path as string));
35}
36
37console.log(await getImages("image", 10));

2
3
4![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/4534f57c-96cc-4eba-bc51-5b3b52e78500/public)
5
6

4
5// export const manager = {
6//   getImages(type: string, count: number): Promise<string[]> {
7//     return getImages(type, count);
8//   },
9// };
10
11export async function getImages(type: string, count: number): Promise<string[]> {
12  // Query to select random rows of the specified type
13  const result = await sqlite.execute(
22  );
23
24  // console.log("images", await getImages("image", 1));
25  // Extract paths from the result rows
26  return result.rows.map(row => await blob.get(row.path));

7  const [uploadStatus, setUploadStatus] = useState<string>("Drag and drop files here");
8  const [fileUrl, setFileUrl] = useState<string | null>(null);
9  const [imageType, setImageType] = useState<string>("image");
10  const urlInputRef = useRef<HTMLInputElement>(null);
11
29
30      // Validate file type
31      if (!["image/jpeg", "image/gif", "image/png"].includes(file.type)) {
32        setUploadStatus("Only JPG, GIF, and PNG files are allowed");
33        return;
36      const formData = new FormData();
37      formData.append("file", file);
38      formData.append("type", imageType);
39
40      fetch("/upload", {
52        });
53    }
54  }, [imageType]);
55
56  const handleDragOver = useCallback((event: React.DragEvent<HTMLDivElement>) => {
77      <p>{uploadStatus}</p>
78      <select
79        value={imageType}
80        onChange={(e) => setImageType(e.target.value)}
81        style={{
82          width: "100%",
85        }}
86      >
87        <option value="image">Image</option>
88        <option value="gif">GIF</option>
89        <option value="stock_image">Stock Image</option>
90      </select>
91      <div
97        }}
98      >
99        Drag and drop an image here
100      </div>
101      {fileUrl && (
146              }}
147            >
148              View Image
149            </a>
150          </div>
167    const formData = await request.formData();
168    const file = formData.get("file") as File;
169    const imageType = formData.get("type") as string;
170
171    if (!file) {
204    await sqlite.execute(
205      `INSERT INTO ${DATABASE_TABLENAME} (type, path) VALUES (?, ?)`,
206      [imageType, filename],
207    );
208
211        url: publicUrl,
212        filename: filename,
213        type: imageType,
214      }),
215      {
223    <html>
224      <head>
225        <title>Image Upload</title>
226        <style>${css}</style>
227      </head>

3hi sophieee
4
5ok so i only edited `frontend_card`, you can see where im directly grabbing a public url i have in my blob storage aka: https://charmaine-blob_admin.web.val.run/api/public/public%2F1738957543311_Red_Happy_Valentine's_Day_PNG_Clip-Art_Image.png
6
7i would love to be able to make get requests to a url like that instead of hard coding them :p

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![Screenshot 2024-11-22 at 15.43.43@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d075a4ee-93ec-4cdd-4823-7c8aee593f00/public)
6
7Versions 0-17 of this val were done with Hono and server-rendering. 

440          {profile && (
441            <div className="flex items-center space-x-4">
442              <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
443              <span>{profile.username}</span>
444              <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
583                            alt="Blob content"
584                            className="max-w-full h-auto"
585                            onError={() => console.error("Error loading image")}
586                          />
587                        </div>
635                  <li>Create public shareable links for blobs</li>
636                  <li>View and manage public folder</li>
637                  <li>Preview images directly in the interface</li>
638                </ul>
639              </div>
694  const { ValTown } = await import("npm:@valtown/sdk");
695  const vt = new ValTown();
696  const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();
697  // const authorEmail = me.email;
698
762
763  c.set("email", email);
764  c.set("profile", { profileImageUrl, username });
765  await next();
766};