'How to upload output blob to a server?

Trying to upload a blob data from browser, there is input and output in console. I am using the Image-Compressor from (https://github.com/fengyuanchen/compressorjs).

All working fine, but the problem with understanding hot to "catch" this blob and send to a server.

I tried out this:

<form method="post" action="">
<input type="button" value="Проверить" onclick="myAjax()">
</form>

<script type="text/javascript">
var file = "outputURL"; // instance of File
function myAjax() {
$.ajax({
  type: 'POST',
  url: 'upload.php',
  data: file,
  contentType: 'application/my-binary-type', // set accordingly
  processData: false
});
}
</script>

upload.php:

$fname = "11" . ".wav";
move_uploaded_file($_FILES['file']['tmp_name'], "/" . $fname);

The idea of this to have some button on html which will upload the output compressed image to a server. I've tried out also several other examples, but main problem - I am don understanding how to handle a blob.

Here is my console output:

Input:  FilelastModified: 1548655773101lastModifiedDate: Mon Jan 28 2019 11:09:33 GMT+0500 {}name: "IMG_20160705_165257565.jpg"size: 3233327type: "image/jpeg"webkitRelativePath: ""__proto__: File

Output:  BloblastModified: 1572005360479lastModifiedDate: Fri Oct 25 2019 17:09:20 GMT+0500  {}name: "IMG_20160705_165257565.jpg"size: 1625797type: "image/jpeg"__proto__: Blob 

Please help to understand how to handle with blobs data in browser.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source