JSFiddle - React, Tailwind, and code Playground

by Luis Valle

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input id="file" type="file" />
<div>
  <button id="but_upload">upload</button>
</div>
<div>
  <button id="but_ajax">regular ajax call</button>
</div>
<div>
  <span id="lblResults"></span>
</div>

JavaScript

$("#but_upload").click(function(){
	$("#lblResults").html('');

        var fd = new FormData();
        var files = $('#file')[0].files[0];
        fd.append('file',files);
        $.ajax({
            url: 'https://localhost:44333/api/sms',
            type: 'post',
            data: fd,
            contentType: false,
            processData: false,
            success: function(response){
                if(response != 0){
                    $("#lblResults").html('file was uploaded');
                }else{
                    $("#lblResults").html('file not uploaded');
                }
            },
        });
    });
    
$("#but_ajax").click(function(){
	$("#lblResults").html('');

        var fd = new FormData();
        var files = $('#file')[0].files[0];
        fd.append('file',files);
        $.ajax({
            url: 'https://localhost:44333/api/sms',
            type: 'post',
            data: JSON.stringify({
            	action: "outgoing"
            }),
            contentType: false,
            processData: false,
            success: function(response){
                if(response != 0){
                    $("#lblResults").html('file was uploaded');
                }else{
                    $("#lblResults").html('file not uploaded');
                }
            },
        });
    });