Anonymous

Feature Rich Uploader - Copy this Html, Tailwind Component to your project

Unique-design-responsive-dynamically-ui-and-error-or-success-msg-dynamically-display-on-top,-best-ui-design,-add-bakcend-logics-in-php-and-js-.-I-will-give-you-code-t-index.html-upload.php-<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Image-Generator-and-Uploader</title>-<link-href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"-rel="stylesheet">-<style>-.spinner-{-border:-4px-solid-rgba(0,-0,-0,-0.1);-border-top-color:-#4A5568;-border-radius:-50%;-width:-36px;-height:-36px;-animation:-spin-1s-linear-infinite;-}-@keyframes-spin-{-to-{-transform:-rotate(360deg);-}-}-</style>-</head>-<body-class="bg-gradient-to-r-from-blue-500-to-purple-600-flex-items-center-justify-center-min-h-screen">-<div-class="bg-white-p-8-rounded-xl-shadow-lg-w-full-max-w-md-text-center-space-y-6">-<h1-class="text-3xl-font-bold-text-gray-800">Image-Generator-and-Uploader</h1>--<div-class="mb-4">-<label-for="imageUrl"-class="block-text-gray-700">Enter-Image-URL-(Optional)</label>-<input-type="text"-id="imageUrl"-name="imageUrl"-class="mt-2-p-2-w-full-border-border-gray-300-rounded"-placeholder="Enter-URL-if-you-want-to-upload-a-specific-image">-</div>--<button-id="generateButton"-class="bg-indigo-500-hover:bg-indigo-600-text-white-font-bold-py-3-px-6-rounded-md-shadow-lg">Generate-and-Upload-Image</button>--<div-id="loading"-class="hidden-flex-justify-center-mt-6">-<div-class="spinner"></div>-</div>--<div-id="imageDisplay"-class="mt-6-hidden">-<img-id="generatedImage"-class="mx-auto-rounded-lg-shadow-md"-alt="Generated-Image">-<a-id="downloadLink"-href="#"-download="generated_image.jpg"-class="inline-block-mt-4-bg-blue-500-hover:bg-blue-600-text-white-py-2-px-4-rounded">Download-Image</a>-</div>--<div-id="apiResponse"-class="mt-4-text-gray-700-hidden">-<h2-class="font-bold">API-Response:</h2>-<pre-id="apiResponseText"-class="bg-gray-100-p-4-rounded"></pre>-</div>-</div>-<script>-document.getElementById('generateButton').addEventListener('click',-async-function()-{-document.getElementById('loading').classList.remove('hidden');-document.getElementById('imageDisplay').classList.add('hidden');-document.getElementById('apiResponse').classList.add('hidden');-const-imageUrl-=-document.getElementById('imageUrl').value;-try-{-const-response-=-await-fetch('upload.php',-{-method:-'POST',-headers:-{-'Content-Type':-'application/x-www-form-urlencoded',-},-body:-new-URLSearchParams({-imageUrl:-imageUrl-})-});-const-result-=-await-response.json();-document.getElementById('loading').classList.add('hidden');-//-Directly-display-the-API-response-data-if-(result.fileId)-{-document.getElementById('generatedImage').src-=-result.image_url;-document.getElementById('imageDisplay').classList.remove('hidden');-document.getElementById('downloadLink').href-=-result.image_url;-//-Display-the-API-response-data-(fileId,-name,-and-URL)-document.getElementById('apiResponseText').textContent-=-JSON.stringify(result,-null,-2);-document.getElementById('apiResponse').classList.remove('hidden');-}-else-{-//-Display-error-response-if-available-document.getElementById('apiResponseText').textContent-=-JSON.stringify(result,-null,-2);-document.getElementById('apiResponse').classList.remove('hidden');-}-}-catch-(error)-{-document.getElementById('loading').classList.add('hidden');-document.getElementById('apiResponseText').textContent-=-`Error:-${error.message}`;-document.getElementById('apiResponse').classList.remove('hidden');-}-});-</script>-</body>-</html>-<?php-require_once-__DIR__-.-'/vendor/autoload.php';-use-ImageKit\ImageKit;-$imageKit-=-new-ImageKit(-"public_6Ujt2/6gyQR3nNxhEtKquVSSZEA=",-"private_53Ks5kjVLdIUjZdb5n1oKNyPHhA=",-"https://ik.imagekit.io/imageai898"-);-function-generateImageUrl($prompt,-$model,-$width-=-768,-$height-=-768,-$seed-=-null)-{-$encodedPrompt-=-urlencode($prompt);-$seed-=-$seed-??-rand(100000,-999999);-//-Use-random-seed-if-not-provided-return-"https://pollinations.ai/p/{$encodedPrompt}?width={$width}&height={$height}&seed={$seed}&model={$model}";-}-if-($_SERVER['REQUEST_METHOD']-===-'POST')-{-$url-=-$_POST['imageUrl']-??-'';-//-Get-the-URL-from-the-input-field-$prompt-=-"Create-a-realistic-image-of-a-beautiful-24-year-old-modern-girl-with-blond-hair-sitting-on-the-bed,-wearing-black-t-shirt,-cute-and-beautiful-perfect-face-cut.";-$model-=-"flux";-$generatedImageUrl-=-$url-?-$url-:-generateImageUrl($prompt,-$model);-//-Use-the-user-input-URL-if-provided,-otherwise-generate-//-Upload-to-ImageKit-try-{-$uploadFile-=-$imageKit->uploadFile([-'file'-=>-$generatedImageUrl,-//-URL-of-the-generated-image-'fileName'-=>-'generated_image_'-.-uniqid()-.-'.jpg'-]);-//-Save-the-API-response-to-a-file-$apiResponse-=-json_encode($uploadFile);-file_put_contents('imagekit_response.json',-$apiResponse);-//-Display-the-API-response-in-the-frontend-if-(isset($uploadFile->success)-&&-$uploadFile->success)-{-$imageUrl-=-$uploadFile->result->url;-$response-=-['success'-=>-true,-'image_url'-=>-$imageUrl,-'message'-=>-'Image-uploaded-successfully!',-'api_response'-=>-$uploadFile];-}-else-{-$response-=-['success'-=>-false,-'message'-=>-$uploadFile->message-??-'Failed-to-upload-image-to-ImageKit.'];-}-}-catch-(Exception-$e)-{-$response-=-['success'-=>-false,-'message'-=>-'Error:-'-.-$e->getMessage()];-}-//-Return-the-response-as-JSON-header('Content-Type:-application/json');-echo-json_encode($response);-exit;-}-?>-<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Image-Generator-and-Uploader</title>-<link-href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"-rel="stylesheet">-<style>-.spinner-{-border:-4px-solid-rgba(0,-0,-0,-0.1);-border-top-color:-#4A5568;-border-radius:-50%;-width:-36px;-height:-36px;-animation:-spin-1s-linear-infinite;-}-@keyframes-spin-{-to-{-transform:-rotate(360deg);-}-}-</style>-</head>-<body-class="bg-gradient-to-r-from-blue-500-to-purple-600-flex-items-center-justify-center-min-h-screen">-<div-class="bg-white-p-8-rounded-xl-shadow-lg-w-full-max-w-md-text-center-space-y-6">-<h1-class="text-3xl-font-bold-text-gray-800">Image-Generator-and-Uploader</h1>--<div-id="notification"-class="hidden-p-4-rounded-text-white-font-semibold"></div>--<div-class="mb-4">-<label-for="imageUrl"-class="block-text-gray-700">Enter-Image-URL-(Optional)</label>-<input-type="text"-id="imageUrl"-name="imageUrl"-class="mt-2-p-2-w-full-border-border-gray-300-rounded"-placeholder="Enter-URL-if-you-want-to-upload-a-specific-image">-</div>--<button-id="generateButton"-class="bg-indigo-500-hover:bg-indigo-600-text-white-font-bold-py-3-px-6-rounded-md-shadow-lg">Generate-and-Upload-Image</button>--<div-id="loading"-class="hidden-flex-justify-center-mt-6">-<div-class="spinner"></div>-</div>--<div-id="imageDisplay"-class="mt-6-hidden">-<img-id="generatedImage"-class="mx-auto-rounded-lg-shadow-md"-alt="Generated-Image">-<a-id="downloadLink"-href="#"-download="generated_image.jpg"-class="inline-block-mt-4-bg-blue-500-hover:bg-blue-600-text-white-py-2-px-4-rounded">Download-Image</a>-</div>--<div-id="apiResponse"-class="mt-4-text-gray-700-hidden">-<h2-class="font-bold">API-Response:</h2>-<pre-id="apiResponseText"-class="bg-gray-100-p-4-rounded"></pre>-</div>-</div>-<script>-document.getElementById('generateButton').addEventListener('click',-async-function()-{-showNotification('Generating-and-uploading-image...',-'bg-blue-500');-document.getElementById('loading').classList.remove('hidden');-document.getElementById('imageDisplay').classList.add('hidden');-document.getElementById('apiResponse').classList.add('hidden');-const-imageUrl-=-document.getElementById('imageUrl').value;-try-{-const-response-=-await-fetch('',-{-method:-'POST',-headers:-{-'Content-Type':-'application/x-www-form-urlencoded',-},-body:-new-URLSearchParams({-imageUrl:-imageUrl-})-});-const-result-=-await-response.json();-document.getElementById('loading').classList.add('hidden');-if-(result.success)-{-document.getElementById('generatedImage').src-=-result.image_url;-document.getElementById('imageDisplay').classList.remove('hidden');-document.getElementById('downloadLink').href-=-result.image_url;-showNotification('Image-generated-and-uploaded-successfully!',-'bg-green-500');-//-Display-the-API-response-document.getElementById('apiResponseText').textContent-=-JSON.stringify(result.api_response,-null,-2);-document.getElementById('apiResponse').classList.remove('hidden');-}-else-{-showNotification(result.message-||-'Error-generating-or-uploading-image.',-'bg-red-500');-}-}-catch-(error)-{-document.getElementById('loading').classList.add('hidden');-showNotification('Error-generating-or-uploading-image.',-'bg-red-500');-console.error(error);-}-});-function-showNotification(message,-colorClass)-{-const-notification-=-document.getElementById('notification');-notification.textContent-=-message;-notification.className-=-`p-4-rounded-mb-4-${colorClass}`;-notification.classList.remove('hidden');-setTimeout(()-=>-notification.classList.add('hidden'),-3000);-}-</script>-</body>-</html>

Prompt

About

Feature Rich Uploader - A responsive uploader with error/success messages, image URL input, loading spinner, and download link, built wi. Access free code!

Feature Rich Uploader - Copy this Html, Tailwind Component to your project

About

Tags

Share