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://camo.githubusercontent.com/3a17db332241756a0c41fe12aee3b92d4f90e4b73c901456b7706e35d6e4cb60/68747470733a2f2f696d672e6a7364656c6976722e636f6d2f6769746875622e636f6d2f5348323052414a2f7368323072616a2f6173736574732f36363731333834342f33343436373864302d333739352d346431662d623332362d396264643638343636383762
" 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
// Function to upload a file and text to Discord via webhook
async function uploadFileToDiscord(file, text, webhookURL) {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('payload_json', JSON.stringify({ content: text }));

    try {
        const response = await fetch(webhookURL, {
            method: 'POST',
            body: formData
        });

        if (!response.ok) {
            throw new Error(`Failed to upload image (HTTP ${response.status}): ${response.statusText}`);
        }

        const responseData = await response.json();
        const imageUrl = responseData.attachments[0].url;
        return imageUrl;
    } catch (error) {
        console.error('Error uploading image:', error);
        throw new Error('Error uploading image to Discord.');
    }
}

// DOM content loaded event listener
document.addEventListener('DOMContentLoaded', function () {
    const fileInput = document.getElementById('fileInput');
    const uploadButton = document.getElementById('uploadButton');
    const responseDiv = document.getElementById('response');
    const uploadedImage = document.getElementById('uploadedImage');
    const webhookURL = 'https://discord.com/api/webhooks/1209461004518432778/zMKaNOteB0b0M3Aq7WykfAk2KkODHFISU9Uh6GG7pvBJF1PGsYfSfpuB4TJgegtlnmnt';

    uploadButton.addEventListener('click', async function () {
        const file = fileInput.files[0];
        const text = 'Uploaded via custom uploader'; // Example text, you can customize this
        if (!file) {
            responseDiv.textContent = 'Please select a file.';
            return;
        }

        try {
            const imageUrl = await uploadFileToDiscord(file, text, webhookURL);
            responseDiv.textContent = `Image uploaded successfully. URL: \n ${imageUrl} and this is the permanent URL: \n ${convertToCloudinaryUrl(imageUrl)}` ;
            uploadedImage.src = imageUrl;
        } catch (error) {
            console.error('Error uploading image:', error);
            responseDiv.textContent = 'Error uploading image.';
        }
    });
});


export function convertToCloudinaryUrl(originalUrl) {
    // Prefix for Cloudinary fetch URL
    const cloudinaryPrefix = 'https://res.cloudinary.com/practicaldev/image/fetch/';

    // Encode the URL part after 'fetch/'
    const encodedUrl = encodeURIComponent(originalUrl);

    // Construct the final Cloudinary URL
    const cloudinaryUrl = `${cloudinaryPrefix}${encodedUrl}`;

    return cloudinaryUrl;
}

## 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://camo.githubusercontent.com/3a17db332241756a0c41fe12aee3b92d4f90e4b73c901456b7706e35d6e4cb60/68747470733a2f2f696d672e6a7364656c6976722e636f6d2f6769746875622e636f6d2f5348323052414a2f7368323072616a2f6173736574732f36363731333834342f33343436373864302d333739352d346431662d623332362d396264643638343636383762
	" 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>
	// Function to upload a file and text to Discord via webhook
	async function uploadFileToDiscord(file, text, webhookURL) {
	const formData = new FormData();
	formData.append('file', file);
	formData.append('payload_json', JSON.stringify({ content: text }));

	try {
	const response = await fetch(webhookURL, {
	method: 'POST',
	body: formData
	});

	if (!response.ok) {
	throw new Error(`Failed to upload image (HTTP ${response.status}): ${response.statusText}`);
	}

	const responseData = await response.json();
	const imageUrl = responseData.attachments[0].url;
	return imageUrl;
	} catch (error) {
	console.error('Error uploading image:', error);
	throw new Error('Error uploading image to Discord.');
	}
	}

	// DOM content loaded event listener
	document.addEventListener('DOMContentLoaded', function () {
	const fileInput = document.getElementById('fileInput');
	const uploadButton = document.getElementById('uploadButton');
	const responseDiv = document.getElementById('response');
	const uploadedImage = document.getElementById('uploadedImage');
	const webhookURL = 'https://discord.com/api/webhooks/1209461004518432778/zMKaNOteB0b0M3Aq7WykfAk2KkODHFISU9Uh6GG7pvBJF1PGsYfSfpuB4TJgegtlnmnt';

	uploadButton.addEventListener('click', async function () {
	const file = fileInput.files[0];
	const text = 'Uploaded via custom uploader'; // Example text, you can customize this
	if (!file) {
	responseDiv.textContent = 'Please select a file.';
	return;
	}

	try {
	const imageUrl = await uploadFileToDiscord(file, text, webhookURL);
	responseDiv.textContent = `Image uploaded successfully. URL: \n ${imageUrl} and this is the permanent URL: \n ${convertToCloudinaryUrl(imageUrl)}` ;
	uploadedImage.src = imageUrl;
	} catch (error) {
	console.error('Error uploading image:', error);
	responseDiv.textContent = 'Error uploading image.';
	}
	});
	});


	export function convertToCloudinaryUrl(originalUrl) {
	// Prefix for Cloudinary fetch URL
	const cloudinaryPrefix = 'https://res.cloudinary.com/practicaldev/image/fetch/';

	// Encode the URL part after 'fetch/'
	const encodedUrl = encodeURIComponent(originalUrl);

	// Construct the final Cloudinary URL
	const cloudinaryUrl = `${cloudinaryPrefix}${encodedUrl}`;

	return cloudinaryUrl;
	}
	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;
	}