Sending Messages to Discord Server Using Webhooks with Attachment Files Using Pure JavaScript
Published: 2024-02-20 11:42:25



### Step-by-Step Guide: Sending Messages to Discord Server Using Webhooks with Attachment Files

#### Step 1: Setting Up a Discord Webhook

1. **Create a Discord Server:**

   Start by creating or selecting the Discord server where you want to send messages.

2. **Generate a Webhook URL:**

   - Navigate to the channel within your Discord server where you want to send messages.
   - Right-click on the channel name and select "Edit Channel."
   - Go to the "Webhooks" tab and click on "Create Webhook."
   - Follow the prompts to generate a webhook URL. Copy this URL for later use.

#### Step 2: Prepare HTML and JavaScript Files

1. **Create HTML File:**

   Create an HTML file (e.g., `index.html`) in your project directory.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Send Message to Discord Server</title>
</head>
<body>

<input type="file" id="fileInput" accept=".jpg, .png, .gif">
<button id="sendButton">Send Message</button>

<script src="script.js"></script>

</body>
</html>
```

2. **Create JavaScript File:**

   Create a JavaScript file (e.g., `script.js`) in the same directory.

```javascript
document.addEventListener('DOMContentLoaded', function () {
    const fileInput = document.getElementById('fileInput');
    const sendButton = document.getElementById('sendButton');

    sendButton.addEventListener('click', async function () {
        const file = fileInput.files[0];
        if (!file) {
            console.error('No file selected.');
            return;
        }

        const formData = new FormData();
        formData.append('file', file);
        formData.append('content', 'Hello from Discord Webhooks!');

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

            if (response.ok) {
                const responseData = await response.json();
                console.log('Message sent successfully.');
                console.log('Message Content:', responseData.content);
                console.log('Attachment URL:', responseData.attachments[0].url);
            } else {
                console.error('Failed to send message.');
            }
        } catch (error) {
            console.error('Error sending message:', error);
        }
    });
});
```

#### Step 3: Writing JavaScript Code

```javascript
// Wait for the HTML document to be fully loaded
document.addEventListener('DOMContentLoaded', function () {

    // Get the file input and send button elements
    const fileInput = document.getElementById('fileInput');
    const sendButton = document.getElementById('sendButton');

    // Add an event listener to the send button
    sendButton.addEventListener('click', async function () {
        
        // Retrieve the selected file
        const file = fileInput.files[0];

        // Check if a file is selected
        if (!file) {
            console.error('No file selected.');
            return;
        }

        // Create a new FormData object to hold the file and message content
        const formData = new FormData();
        formData.append('file', file);
        formData.append('content', 'Hello from Discord Webhooks!');

        try {
            // Define the Discord webhook URL
            const webhookUrl = 'YOUR_DISCORD_WEBHOOK_URL';

            // Send a POST request to the webhook URL with the file and message content
            const response = await fetch(webhookUrl, {
                method: 'POST',
                body: formData
            });

            // Check if the request was successful
            if (response.ok) {
                // Parse the response JSON
                const responseData = await response.json();
                
                // Log success message and attachment URL
                console.log('Message sent successfully.');
                console.log('Message Content:', responseData.content);
                console.log('Attachment URL:', responseData.attachments[0].url);
            } else {
                // Log error message if the request failed
                console.error('Failed to send message.');
            }
        } catch (error) {
            // Log any errors that occur during the sending process
            console.error('Error sending message:', error);
        }
    });
});
```

#### Step 4: Implementing the Logic

1. **Retrieve Elements:**

```javascript
const fileInput = document.getElementById('fileInput');
const sendButton = document.getElementById('sendButton');
```

2. **Add Event Listener:**

```javascript
sendButton.addEventListener('click', async function () { /* Event handler code */ });
```

3. **Retrieve File:**

```javascript
const file = fileInput.files[0];
```

4. **Create FormData:**

```javascript
const formData = new FormData();
formData.append('file', file);
formData.append('content', 'Hello from Discord Webhooks!');
```

5. **Send POST Request:**

```javascript
const response = await fetch(webhookUrl, {
    method: 'POST',
    body: formData
});
```

6. **Handle Response:**

```javascript
if (response.ok) { /* Success handling */ } else { /* Error handling */ }
```

#### Step 5: Testing

1. **Replace Webhook URL:**

```javascript
const webhookUrl = 'YOUR_DISCORD_WEBHOOK_URL';
```

2. **Run the Application:**

   Open the HTML file (`index.html`) in a web browser. Select a file to attach, and click the "Send Message" button to test the message sending process.

{% codepen https://codepen.io/SH20RAJ/pen/KKEYWbV %}