JSFiddle - React, Tailwind, and code Playground

by musicreader

HTML

<form id="postFile" enctype="multipart/form-data" method="post" action="javascript:;" accept-charset="utf-8">
        <input name="file" type="file" id="file"/> <input type="submit" id="upload-btn"/>
</form>

JavaScript

$(document).ready(function () {
        $('#postFile').submit(function (event) {
            event.preventDefault();
            
            var file_format="pdf";
            
						convertFile($("#file")[0].files[0],file_format,function(file){
            	alert("success:"+file.name);
            },function(file){
            		alert("error");
            });            
        });
    });
    
function convertFile(file_object,file_format,callback_success,callback_failed){
						var formData = new FormData();
            formData.append("file", file_object);						
						prepareConversionJob(file_format,function(job_id,url,token){
            	$.ajax({
                url: url,
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                processData: false,
                contentType: false,
                mimeType: 'multipart/form-data',
                headers: {
                    'x-oc-token': token,
                    'cache-control': 'no-cache',
                    'x-oc-upload-uuid': makeid(15),                    
                },
                success: function () {
                    completeConversionJob(job_id,callback_success,callback_failed.bind(this,file_object));
                },
                error: function () {
										callback_failed(file_object);
                }
            	});
            },callback_failed.bind(this,file_object));
}

function makeid(length) {
   var result           = '';
   var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   var charactersLength = characters.length;
   for ( var i = 0; i < length; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
   return result;
}

function prepareConversionJob(file_format,callback,callback_failed){
    var xml_http=new XMLHttpRequest();
    xml_http.open("GET",...