How to send img to discord webhook with javascript

Issue

const params = new URLSearchParams(window.location.search);
$(document).ready(_ => {
  if (params.get("url") != null) {
    $("input")[0].value = params.get("url");
  }
  if (params.get("img") != null) {
    $("input")[1].value = params.get("img");
  }
});

let url;
let img;

let submit = _ => {
  url = $("input")[0].value;
  img = $("input")[1].value;

  if (!url.length) {
    return alert('Please enter URL');
  }

}

let send = _ => {

  $.ajax({
    type: "POST",
    url: url,
    async: true,
    data: {
      file: (img)
    },
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="box">
  <p title="Webhook url to send spam message">Webhook URL</p><input required name="inp1" placeholder="https://discord.com/api/webhooks/........." type="url" autocomplete></input>
</div>
<div class="box">
  <p title="Message you want to spam it">Image</p><input required name="inp2" placeholder="Image Link" type="file"></input>
</div>

<a onclick="submit()"><button id="button" >Send</button></a>

I want the attachment to be sent through the API in discord chat. I tried doing it like this but it doesn’t work. The file:() I think might be the issue but also the input type I don’t know

Solution

Without jQuery you might try something like this using the fetch api in conjunction with the FormData interface and the FileList

const d=document;
const q=(e,n=d)=>n.querySelector(e);

d.addEventListener('DOMContentLoaded', ()=>{
  q('button#button').addEventListener('click', e=>{
    e.preventDefault();

    let url = q('input[name="inp1"]').value;
    let files = q('input[name="inp2"]').files;

    if (!url.length) return alert('Please enter URL');

    let fd = new FormData();
        fd.set('url', url);
        fd.set('img', files.item(0));

    fetch( url, { method:'post', body:fd } )
      .then(r=>r.text())
      .then(text=>{
        alert(text)
      })
  })
});
<div class="box">
  <p title="Webhook url to send spam message">Webhook URL</p>
  <input required name="inp1" placeholder="https://discord.com/api/webhooks/........." type="url" autocomplete />
</div>

<div class="box">
  <p title="Message you want to spam it">Image</p>
  <input required name="inp2" placeholder="Image Link" type="file" />
</div>

<button id="button">Send</button>

The jQuery version is quite probably not quite correct as the snippet yields an error with the $.post method and being unfamiliar with jQuery I cannot see the mistake

const params = new URLSearchParams( window.location.search );
$(document).ready(() => {
  let url;
  let img;
  let fd=new FormData();

  if( params.get("url") != null ) {
    $("input[name='inp1']")[0].value = params.get("url");
  };

  $('#button').click(e=>{
    url = $("input[name='inp1']")[0].value;
    img = $("input[name='inp2']")[0]; 


    if( !url.length ) {
      return alert('Please enter URL');
    }
    
    fd.set('url',url);
    fd.set('img',img.files.item(0));

    $.ajax({
      type:"POST",
      url:url,
      data:fd,
      success:r=>{console.log(r)},
      error:e=>{console.warn(e)}
    });
  });
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="box">
  <p title="Webhook url to send spam message">Webhook URL</p>
  <input required name="inp1" placeholder="https://discord.com/api/webhooks/........." type="url" autocomplete />
</div>

<div class="box">
  <p title="Message you want to spam it">Image</p>
  <input required name="inp2" placeholder="Image Link" type="file" />
</div>

<button id="button">Send</button>

Worth noting perhaps is that you cannot set the value of a file input element programmatically – only the user can set this value by browsing for and selecting a file.

Answered By – Professor Abronsius

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.