Sending a File Through Discord Webhook Using Javascript

Coding Help
, ,
1

I Want to Make a Submission Form where you can Submit files Via a webhook
I have code But i am unsure What to do To Allow that to happen I have Researched this and Nothing is clear or is close to answering my Question due to it Being In Javascript i want to use Javascript Vanilla for this
here is the code i have so Far (FULL HTML PAGE SO YOU CAN FULL ANALYSE THE CODE):

> <!DOCTYPE html>
> <html lang="en">
>   <head>
>     <title>Redirect</title>
>     <meta charset="utf-8">
>     <meta http-equiv="X-UA-Compatible" content="IE=edge">
>     <meta name="viewport" content="width=device-width, initial-scale=1">
>     <link rel="icon" href="https://cdn.discordapp.com/attachments/638677753662668801/696614301481435176/boofboat1.png">
>  <h1>
>       Select files with HTML and JavaScript
>     </h1>
>     <input type="file" id="file-selector" multiple/>
>     <ul id="output"></ul>
>     
>               <button
>                 type="submit"
>                 class="btn"
>                 onclick="upload()"
>               >
>                 Upload file
>               </button>
>     <script>
>       const output = document.getElementById('output');
>       if (window.FileList && window.File) {
>         document.getElementById('file-selector').addEventListener('change', event => {
>           output.innerHTML = '';
>           for (const file of event.target.files) {
>             const li = document.createElement('li');
>             const name = file.name ? file.name : 'NOT SUPPORTED';
>             const type = file.type ? file.type : 'NOT SUPPORTED';
>             const size = file.size ? file.size : 'NOT SUPPORTED';
>             li.textContent = `name: ${name}, type: ${type}, size: ${size}`;
>             output.appendChild(li);
>           }
>         }); 
>       }
>     </script>
> 
> <script>
>   function upload() {
>             var request = new XMLHttpRequest();
> var file = document.getElementById("file-selector").files[0]
> var filejson = JSON.stringify(file);
>           request.open(
>             "POST",
>             "MYWEBHOOKURL"
>           );
> 
>           request.setRequestHeader("Content-type", "application/json");
> 
>           var params = {
>             username: "File Upload",
>             content:
>               "Uploaded File",
>             
>           };
>               request.send(JSON.stringify(params));
>   }
> </script>
>             <link rel="favicon" type="favicon" href="icon.png" />
>             <meta
>               name="description"
>               content="Join Remux Giveaways By CLicking This Link They Hold Giveaway's And Stuff"
>             />
>             <meta name="keywords" content="Boofboat,boofboat studios" />
>             <meta name="robots" content="index, follow" />
>             <meta name="language" content="English" />
>             <meta name="revisit-after" content="1 days" />
>             <meta
>               property="og:image"
>               content="https://cdn.discordapp.com/attachments/638677753662668801/696614301481435176/boofboat1.png"
>             />
>   </head>
> </html>

If there is a Very Clear guide on Doing it without Discord.js I Will happly have a look
At it But i do Prefer to have a Guide here (just whatever Works best for you)
And Yes i have Looked at the DOCS The Code was changed Because i Looked at the Docs
They have Not much on the file Section that i can Find

Thanks in advance

2

You should use the gofile API to upload the files, then send the link to discord.
https://gofile.io/api

1 Like
3

I want to Send the File Directly Through the Webhook Not Use an External API Which Will Cause Possibly More Delays I Also Plan to Make this As a template for File Submissions People can Use

4

Maybe this can help you then.
https://birdie0.github.io/discord-webhooks-guide/structure/file.html

5

Okay I have seen that one I understand I need to send it with the header

Content-Type: multipart/form-data

But Now How do i format it and also Reading the code Will the File System i have Work
for Uploading?
Also The Guide has no example of Doing it in Javascript or Walkthrough or anything

6

Howdy I found a Way to Do it on my Own
Here is The code i used In case you’re Interested:

 function upload2() {
    var formData = new FormData();
formData.append("file", document.getElementById("file-selector").files[0]);
    formData.append("content", "File Submited");
        
var xhr = new XMLHttpRequest();
xhr.open("POST", "WEBHOOKURLHERE");
xhr.send(formData);
  }

It Uses This Piece of Code to Find a File

<input type="file" id="file-selector" multiple/>

Now I just Gotta Add Check Params And Stuff Heck Yeah i am Starting to get a little Good at this!!!
Thanks for U Guys for any Help and Stuff you tried to Give
I Kinda Wanna Keep Ya Posted On This But i feel it will Go off topic I will Post The Project In The Gallery When I Finish as it is a Great Image/File Submission Method That Fits into 1 HTML File

1 Like
7

Can you send it again with the amendment ?

8

Hello, I’d recommend that you have a look at Discord’s API docs:

9

Hey, r u still on this site? I cant get it to work, if you can help me a bit. Webhook is working fine but it doesnt attach the image.