SH20RAJ/discord-image-uploader.markdown

## discord-image-uploader.markdown

      
    Raw
  

              discord-image-uploader.markdown
            
          
    Discord Image Uploader

A Pen by SH20RAJ on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Discord Webhook</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Upload Image to Discord</h1>
        <input type="file" id="fileInput" >
        <button id="uploadButton">Upload</button>
        <div id="response"></div>
        <a href="#" target="_blank"><img src="https://cdn.discordapp.com/attachments/1209460718370553896/1209461328658436116/giphy.gif?ex=65e701a3&is=65d48ca3&hm=84f8cc38c7736f21e89c51e12d4db0d4b1913cac990e37e25ba63bbb3389755e&
" alt="Uploaded Image" id="uploadedImage"></a>

      <br>


      <a href="" target="_blank" hidden>See result on Discord Server</a>
    </div>
    <script src="script.js"></script>
</body>
</html>

## script.js
document.addEventListener('DOMContentLoaded', function () {
    const fileInput = document.getElementById('fileInput');
    const uploadButton = document.getElementById('uploadButton');
    const responseDiv = document.getElementById('response');
    const uploadedImage = document.getElementById('uploadedImage');

    uploadButton.addEventListener('click', async function () {
        const file = fileInput.files[0];
        if (!file) {
            responseDiv.textContent = 'Please select a file.';
            return;
        }

        const formData = new FormData();
        formData.append('file', file);

        try {
            const response = await fetch('https://discord.com/api/webhooks/1209461004518432778/zMKaNOteB0b0M3Aq7WykfAk2KkODHFISU9Uh6GG7pvBJF1PGsYfSfpuB4TJgegtlnmnt', {
                method: 'POST',
                body: formData
            });
            const responseData = await response.json();
          console.log(responseData)
            responseDiv.textContent = `Image uploaded successfully. URL: ${responseData.attachments[0].url}`;
            uploadedImage.src = responseData.attachments[0].url;
        } catch (error) {
            console.error('Error uploading image:', error);
            responseDiv.textContent = 'Error uploading image.';
        }
    });
});

## style.css
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 600px;
    margin: 50px auto;
    text-align: center;
}

h1 {
    color: #333;
}

input[type="file"] {
    margin-bottom: 20px;
}

#response {
    margin-top: 20px;
}

#uploadedImage {
    max-width: 100%;
    margin-top: 20px;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Discord Webhook</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<div class="container">
	<h1>Upload Image to Discord</h1>
	<input type="file" id="fileInput" >
	<button id="uploadButton">Upload</button>
	<div id="response"></div>
	<a href="#" target="_blank"><img src="https://cdn.discordapp.com/attachments/1209460718370553896/1209461328658436116/giphy.gif?ex=65e701a3&is=65d48ca3&hm=84f8cc38c7736f21e89c51e12d4db0d4b1913cac990e37e25ba63bbb3389755e&
	" alt="Uploaded Image" id="uploadedImage"></a>

	<br>


	<a href="" target="_blank" hidden>See result on Discord Server</a>
	</div>
	<script src="script.js"></script>
	</body>
	</html>
	document.addEventListener('DOMContentLoaded', function () {
	const fileInput = document.getElementById('fileInput');
	const uploadButton = document.getElementById('uploadButton');
	const responseDiv = document.getElementById('response');
	const uploadedImage = document.getElementById('uploadedImage');

	uploadButton.addEventListener('click', async function () {
	const file = fileInput.files[0];
	if (!file) {
	responseDiv.textContent = 'Please select a file.';
	return;
	}

	const formData = new FormData();
	formData.append('file', file);

	try {
	const response = await fetch('https://discord.com/api/webhooks/1209461004518432778/zMKaNOteB0b0M3Aq7WykfAk2KkODHFISU9Uh6GG7pvBJF1PGsYfSfpuB4TJgegtlnmnt', {
	method: 'POST',
	body: formData
	});
	const responseData = await response.json();
	console.log(responseData)
	responseDiv.textContent = `Image uploaded successfully. URL: ${responseData.attachments[0].url}`;
	uploadedImage.src = responseData.attachments[0].url;
	} catch (error) {
	console.error('Error uploading image:', error);
	responseDiv.textContent = 'Error uploading image.';
	}
	});
	});
	body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	}

	.container {
	max-width: 600px;
	margin: 50px auto;
	text-align: center;
	}

	h1 {
	color: #333;
	}

	input[type="file"] {
	margin-bottom: 20px;
	}

	#response {
	margin-top: 20px;
	}

	#uploadedImage {
	max-width: 100%;
	margin-top: 20px;
	}