Turn a blob url into a upload file for FormData() and send it via AJAX to a PHP file

Question

I want to convert a blob URL AKA (window.URL.createObjectURL(blob);) into a file object so I can use it with FormData() so I can use that as an upload image file for AJAX but I am not able to do that successfully and I can't find a way to make the blob URL into a file

object for my code situation and I know its possible to do this according to the posts I visited on here it can be done here's one of posts that claim that you can do that How to convert Base64 String to javascript file object like as from file input form? but the reason why I'm not using any of those posts methods because I don't know how to integrate their methods to my code situation or its too complicated to understand.

This is my code that I been working on.

index.php

<script>

document.addEventListener('DOMContentLoaded',function(){

document.querySelector('#image-input').addEventListener('change',createABlobUrlForAImgSrcAndUseThatAsAFileUploadFile);

function createABlobUrlForAImgSrcAndUseThatAsAFileUploadFile(){

//Creating a blob URL

var image_input = document.querySelector('#image-input').files[0];

var file_type= image_input.type;

var blob = new Blob([image_input], { type: file_type || 'application/*'});

var blob_url= window.URL.createObjectURL(blob); //<-Example blob:http://localhost/ed6761d2-2bb4-4f97-a6d8-a35c84621ba5

//

//Form data
var formData= new FormData();

formData.append('blob_url', blob_url);
//

//<AJAX>
var xhr= new XMLHttpRequest();
xhr.onreadystatechange= function(){

if(xhr.readyState == 4){

document.querySelector('#output').innerHTML= xhr.responseText;

//<Allow JS in AJAX request>
var exJS= document.querySelectorAll('#output script');
var enableAll= exJS.length;
for(var i=0; i < enableAll.length; i++){
eval(exJS[i].text);
}
//</Allow JS in AJAX request>

}
}

xhr.open('POST','x');
xhr.send(formData);
//</AJAX>
}

});

</script>

<input id='image-input' type='file'>

<div id='output'></div>

x.php

<?php

$file=$_FILES['blob_url']['name'];
$location='images/'.$file;
move_uploaded_file($_FILES['blob_url']['tmp_name'],$location);  

?>

I know my code is not logically correct and I will have to change my code to be able to do what I want to do so I am aware it is not logically correct. Just trying to show you guys what I mean.

Answer 1

This is how I got it done in my project. But in my case, I wanted to convert a blob to a wav file and then send to the back-end.

//Save your blob into a variable
var url = URL.createObjectURL(blob);

//Now convert the blob to a wav file or whatever the type you want
var wavefilefromblob = new File([blob], 'filename.wav');

//Pass the converted file to the backend/service
sendWavFiletoServer(wavefilefromblob);

//This is my function where I call the backend service to send the wav file in Form data
function sendWavFiletoServer(wavFile) {
  var formdata = new FormData();
  formdata.append("file", wavFile); 
  var ajax = new XMLHttpRequest();
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "https://yourserviceurl/api/");
  ajax.setRequestHeader('API_SECRET', UzI1NiIsInR5cCI6IkpXVCJ9eyLCJleHAiO');
  ajax.send(formdata); 
}

Answer 2

I think uploading form data should be a blob object, not a blob URL

javascrip:

var image_input = document.querySelector('#image-input').files[0];
var blob_url= window.URL.createObjectURL(image_input); 
//Form data
var formData= new FormData();
// ...

// here , content-type: multipart/form-data
formData.append('upload_file', image_input);

php:

$file=$_FILES['upload_file']['name'];
$location='images/'.$file;
move_uploaded_file($_FILES['upload_file']['tmp_name'],$location);  

Answer 3

I had the same question and found a way.

This will give you a Blob object:

let blob = await fetch(url).then(r => r.blob());