How to upload output blob to a server?

Question

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.

FormData can easily handle blobs, with the append method you can add them directly, and then you just specify the FormData instance as the data you are sending with your AJAX request. — 04FS
– 04FS, Commented Oct 25, 2019 at 12:36
Can somebody give a some example based on details what I gave. For the advise - thanks. Will educate myself. — noszone
– noszone, Commented Oct 28, 2019 at 4:22
Ok. I can help. What type of server page are you using? PHP, ASP.net, if you give some details, I can help to give you an example. — user1605822
– user1605822, Commented Jun 8, 2021 at 6:04

noszone · Accepted Answer · 2022-02-17 03:00:19Z

Here is fully working example with how to upload a blob:

<html>
<head>
<meta charset="UTF-8"> 
<script>
function init() {
  var form = document.getElementById('f');
  if(form) {
    form.addEventListener('submit', function(event) {
      if(form.ajax.checked) {
        var formData = new FormData();
        for(var i=0; i<form.length; i++) {
          if(form[i].type == 'file') {
            var files = form[i].files;
            var blob = files[0].slice(0, files[0].size, files[0].type);
            formData.append(form[i].name, blob, files[0].name);
          }
          else {
            formData.append(form[i].name, form[i].value);
          }
        }
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'blob';
        xhr.onreadystatechange = function() {
          if(xhr.readyState == 4) {
            // what do I do here?
            // is it
            // window.location = URL.createObjectURL(xhr.response);
            // or should it be
            // document.write(responseText);
            // or even
            // document.close(); document.open(); document.write(xhr.responseText);
            // or?
          }
        };
        xhr.open('POST', form.action, true);
        xhr.send(formData);
        event.preventDefault();
      }
    }, false);
  }
}
</script>
</head>
<body onload='init()'>
<?php
  if(isset($_FILES['file'])) {
    echo '<ul>';
    echo '<li>name: '.$_FILES['file']['name'].'</li>';
    echo '<li>type: '.$_FILES['file']['type'].'</li>';
    echo '<li>size: '.$_FILES['file']['size'].'</li>';
    echo '<li>upload type: '.$_POST['ajax'].'</li>';
    echo '</ul>';
    echo "<a href='http://localhost/test.php'>reset</a>";
  }
  else {
?>
<form enctype='multipart/form-data' id='f' method='POST'>
<input name='file' type='file'/>
ajax: <input name='ajax' type='checkbox'/>
<input type='submit'/>
</form>
<?php
  }
?>
</body>
</html>

Collectives™ on Stack Overflow

How to upload output blob to a server?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related