Val Town Code SearchReturn to Val Town

178
179- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken
180- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead
181- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
182- **Storage:** DO NOT use the Deno KV module for storage
183- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods

9import { useUsageStats } from "../hooks/useUsageStats.ts";
10import { Messages } from "./Messages.tsx";
11import { InputBox, ImageDropContainer } from "./InputBox.tsx";
12import { PreviewFrame } from "./PreviewFrame.tsx";
13import { BranchSelect } from "./BranchSelect.tsx";
66  refetch: () => void;
67}) {
68  const [images, setImages] = useState<(string|null)[]>([]);
69  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
70  const { audio, user } = useContext(AppContext);
85    branchId,
86    selectedFiles,
87    images,
88    soundEnabled: audio,
89  });
109
110  return (
111    <ImageDropContainer
112      running={running}
113      images={images}
114      setImages={setImages}>
115      <div className="single-column-container">
116        <div className="single-sticky-header">
120            rel="norefferer"
121            className="block-link text-link lockup">
122            {project.imageUrl ? (
123              <img src={project.imageUrl} className="image-thumbnail" />
124            ) : user?.profileImageUrl ? (
125              <img
126                src={user.profileImageUrl}
127                className="avatar"
128                alt={user.username}
131              />
132            ) : (
133              <div className="image-placeholder" />
134            )}
135            <div>{project.name}</div>
178              onSubmit={e => {
179                handleSubmit(e);
180                setImages([]);
181              }}
182              onCancel={handleStop}
183              running={running}
184              error={error}
185              images={images}
186              setImages={setImages}
187            />
188          )}
190        </div>
191      </div>
192    </ImageDropContainer>
193  );
194}

20  price: number;
21  category: "cultural" | "standard";
22  imageUrl: string;
23  stockQuantity: number;
24}
36      price REAL NOT NULL,
37      category TEXT NOT NULL,
38      imageUrl TEXT NOT NULL,
39      stockQuantity INTEGER NOT NULL
40    )
53    await sqlite.execute(
54      `INSERT INTO ${KEY}_products 
55      (name, description, price, category, imageUrl, stockQuantity) 
56      VALUES (?, ?, ?, ?, ?, ?)`,
57      [
60        product.price,
61        product.category,
62        product.imageUrl,
63        product.stockQuantity,
64      ],
369      price: 0,
370      category: "standard",
371      imageUrl: "",
372      stockQuantity: 0,
373    });
441          </div>
442          <div style={{ marginBottom: "10px" }}>
443            <label>Image URL:</label>
444            <input
445              type="url"
446              value={newProduct.imageUrl}
447              onChange={(e) => setNewProduct({ ...newProduct, imageUrl: e.target.value })}
448              required
449              style={{ width: "100%", padding: "5px" }}
536                  >
537                    <img
538                      src={product.imageUrl}
539                      alt={product.name}
540                      style={{ maxWidth: "100%", height: "250px", objectFit: "cover" }}
570              <div key={product.id} style={{ display: "flex", alignItems: "center", marginBottom: "10px" }}>
571                <img
572                  src={product.imageUrl}
573                  alt={product.name}
574                  style={{ width: "100px", marginRight: "10px" }}
608            >
609              <img
610                src={selectedProduct.imageUrl}
611                alt={selectedProduct.name}
612                style={{ maxWidth: "50%", objectFit: "cover" }}

40      <section className="mb-10 rounded-xl overflow-hidden shadow-lg relative">
41        <img
42          src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=1200&q=80"
43          alt="Zon Hero"
44          className="w-full h-64 object-cover"

5
6export interface ContentState {
7  type: "text" | "image";
8  value: string;
9}

4Built with React & Hono.
5
6- Paste text or images directly into the app
7- Upload files through the file input
8- Get shareable links instantly
9- Links are automatically copied to your clipboard
10- Preview images and text content
11- CLI tool for uploading files directly from your terminal
12- Smart content detection (automatically detects text vs binary)

21
22```bash
23cat image.png | fdt image.png
24```
25
52```bash
53# Upload and open in browser
54cat image.png | fdt image.png | xargs open
55
56# Upload and copy URL to clipboard (macOS)
73
74```bash
75cat image.png | fdt image.png
76```
77

1// Mime type mapping for file extensions
2export const mimeTypes: Record<string, string> = {
3  // Image formats
4  'jpg': 'image/jpeg',
5  'jpeg': 'image/jpeg',
6  'png': 'image/png',
7  'gif': 'image/gif',
8  'webp': 'image/webp',
9  'svg': 'image/svg+xml',
10  'bmp': 'image/bmp',
11  'ico': 'image/x-icon',
12  // Text formats
13  'txt': 'text/plain',

6    <title>File Dump Thing</title>
7    <link rel="stylesheet" href="/public/style.css">
8    <link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml">
9  </head>
10  <body>

89
90        // Create a local preview for the file
91        if (file.type.startsWith("image/")) {
92          const reader = new FileReader();
93          reader.onloadend = () => {
94            setContent({ type: "image", value: reader.result as string });
95          };
96          reader.readAsDataURL(file);
108    event.preventDefault();
109
110    // Check for image first
111    const file = event.clipboardData?.items[0]?.getAsFile();
112    if (file) {
148
149  const renderContent = () => {
150    if (content.type === "image") {
151      return <img src={content.value} alt="Pasted" style={{ maxWidth: "100%", maxHeight: "300px" }} />;
152    }