[V0_FILE]typescriptreact:file="components/exif-remover.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { ImagePlus, Trash2, Download, Info, ShieldCheck, Loader2 } from "lucide-react" import { removeExifData } from "@/lib/exif-utils" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog" import { useToast } from "@/hooks/use-toast" import ImagePreview from "@/components/image-preview" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" export default function ExifRemover() { const [selectedFiles, setSelectedFiles] = useState([]) const [processedFiles, setProcessedFiles] = useState<{ file: File; url: string }[]>([]) const [isProcessing, setIsProcessing] = useState(false) const [progress, setProgress] = useState(0) const [showConfirmDialog, setShowConfirmDialog] = useState(false) const [activeTab, setActiveTab] = useState("selected") const fileInputRef = useRef(null) const { toast } = useToast() const handleFileSelect = (e: React.ChangeEvent) => { if (e.target.files) { const files = Array.from(e.target.files).filter((file) => file.type.startsWith("image/")) if (files.length === 0) { toast({ title: "No valid images selected", description: "Please select image files only.", variant: "destructive", }) return } setSelectedFiles((prevFiles) => [...prevFiles, ...files]) setActiveTab("selected") } } const handleRemoveFile = (index: number) => { setSelectedFiles((prevFiles) => prevFiles.filter((_, i) => i !== index)) } const handleRemoveAllFiles = () => { setSelectedFiles([]) setProcessedFiles([]) setProgress(0) } const handleProcessFiles = async () => { setIsProcessing(true) setProgress(0) setProcessedFiles([]) try { const processed = [] for (let i = 0; i < selectedFiles.length; i++) { const file = selectedFiles[i] const processedFile = await removeExifData(file) processed.push(processedFile) // Update progress setProgress(Math.round(((i + 1) / selectedFiles.length) * 100)) } setProcessedFiles(processed) setActiveTab("processed") toast({ title: "Processing complete", description: `Successfully processed ${processed.length} images.`, }) } catch (error) { console.error("Error processing files:", error) toast({ title: "Processing failed", description: "An error occurred while removing EXIF data.", variant: "destructive", }) } finally { setIsProcessing(false) } } const handleDownloadAll = () => { processedFiles.forEach(({ file, url }) => { const link = document.createElement("a") link.href = url link.download = `clean_${file.name}` document.body.appendChild(link) link.click() document.body.removeChild(link) }) toast({ title: "Download started", description: `Downloading ${processedFiles.length} processed images.`, }) } return (

Image Processor Select images to remove EXIF data

{selectedFiles.length > 0 && ( )} {processedFiles.length > 0 && ( )}

{isProcessing && (

Processing images

{progress}%

)} {(selectedFiles.length > 0 || processedFiles.length > 0) && ( Selected {selectedFiles.length > 0 && ( {selectedFiles.length} )} Processed {processedFiles.length > 0 && ( {processedFiles.length} )} {selectedFiles.length > 0 && (

Selected Images

{selectedFiles.map((file, index) => ( handleRemoveFile(index)} disabled={isProcessing} /> ))}

)} {processedFiles.length > 0 && (

Processed Images

{processedFiles.map(({ file, url }, index) => (

{file.name}

))}

)} )} {selectedFiles.length === 0 && processedFiles.length === 0 && (

No Images Selected

Select images to remove EXIF data and protect your privacy

)}

Privacy Protection

Remove location data, device details, and timestamps from your photos before sharing.

Local Processing

All processing happens in your browser. Your photos never leave your device.

About EXIF Data

EXIF metadata can reveal personal information when sharing photos online.

Remove EXIF data from {selectedFiles.length} images? This will remove all metadata from your selected images. The original files will not be modified - you'll be able to download the processed copies. Cancel Proceed

) } [V0_FILE]typescriptreact:file="components/image-preview.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { X } from "lucide-react" import { Button } from "@/components/ui/button" interface ImagePreviewProps { file: File onRemove: () => void disabled?: boolean } export default function ImagePreview({ file, onRemove, disabled = false }: ImagePreviewProps) { const [preview, setPreview] = useState(null) useEffect(() => { const reader = new FileReader() reader.onload = (e) => { setPreview(e.target?.result as string) } reader.readAsDataURL(file) return () => { reader.abort() } }, [file]) return (

{preview ? (

) : (

)}

{file.name}

) } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, value, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="lib/exif-utils.ts" isMerged="true" import ExifReader from "exifreader" import imageCompression from "browser-image-compression" /** * Removes EXIF data from an image file * @param file The image file to process * @returns A promise that resolves to an object containing the processed file and its URL */ export async function removeExifData(file: File): Promise<{ file: File; url: string }> { try { // Read the EXIF data (for debugging or future use) const arrayBuffer = await file.arrayBuffer() const tags = ExifReader.load(arrayBuffer) // Log the tags that are being removed (optional) console.log("Removing EXIF tags:", Object.keys(tags)) // Create a new image without EXIF data // We use imageCompression library but set quality to 1 to maintain original quality const options = { maxSizeMB: 100, // Large value to avoid actual compression useWebWorker: true, preserveExif: false, // This is the key setting to remove EXIF data maxWidthOrHeight: 10000, // Large value to maintain original dimensions fileType: file.type, initialQuality: 1.0, // Maintain original quality } const compressedFile = await imageCompression(file, options) // Create a URL for the processed file const url = URL.createObjectURL(compressedFile) // Return both the processed file and its URL return { file: new File([compressedFile], file.name, { type: file.type }), url, } } catch (error) { console.error("Error removing EXIF data:", error) throw error } } /** * Extracts and returns EXIF data from an image file (for future use) * @param file The image file to extract EXIF data from * @returns A promise that resolves to the extracted EXIF tags */ export async function getExifData(file: File): Promise { try { const arrayBuffer = await file.arrayBuffer() const tags = ExifReader.load(arrayBuffer) return tags } catch (error) { console.error("Error reading EXIF data:", error) throw error } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import "@/app/globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import { Toaster } from "@/components/ui/toaster" const inter = Inter({ subsets: ["latin"] }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 142.1 76.2% 36.3%; --secondary-foreground: 355.7 100% 97.3%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.75rem; --chart-1: 221.2 83.2% 53.3%; --chart-2: 142.1 76.2% 36.3%; --chart-3: 0 84.2% 60.2%; --chart-4: 262.1 83.3% 57.8%; --chart-5: 24.6 95% 53.1%; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 142.1 70.6% 45.3%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; --chart-1: 217.2 91.2% 59.8%; --chart-2: 142.1 70.6% 45.3%; --chart-3: 0 62.8% 30.6%; --chart-4: 262.1 83.3% 57.8%; --chart-5: 24.6 95% 53.1%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import type { Metadata } from "next" import ExifRemover from "@/components/exif-remover" import Image from "next/image" export const metadata: Metadata = { title: "EXIF Remover", description: "Remove EXIF metadata from your photos with one click", } export default function Home() { return (

EXIF Remover

Remove EXIF metadata from your photos with one click. Your photos stay on your device - all processing happens in your browser for maximum privacy.

) }

About

Tags

Share

About

Tags

Share

More from hex-jolie-myright-9860

More Templates Like This

About

Tags

Share

About

Tags

Share

More from hex-jolie-myright-9860

More Templates Like This