How can javascript upload a blob

Question

I have a blob data in this structure   Blob  type   audio wav   size  655404  slice  function  size  655404 type   audio wav    proto    Blob   It s actually sound data recorded using the recent Chrome getUerMedia   and Recorder js  How can I upload this blob to the server using jquery s post method  I ve tried this without any luck        post  http   localhost upload php     fname   test wav   data  soundBlob         function responseText               console log responseText

User · Answer

I was able to get  yeeking example to work by not using FormData but using javascript object to transfer the blob  Works with a sound blob created using recorder js  Tested in Chrome version 32 0 1700 107   function uploadAudio  blob       var reader   new FileReader      reader onload   function event       var fd           fd  fname      test wav       fd  data     event target result        ajax         type   POST         url   upload php         data  fd        dataType   text         done function data            console log data                  reader readAsDataURL blob       Contents of upload php   lt      pull the raw binary data from the POST array  data   substr   POST  data    strpos   POST  data           1      decode it  decodedData   base64 decode  data      print out the raw data   filename     POST  fname    echo  filename     write the data out to the file  fp   fopen  filename   wb    fwrite  fp   decodedData   fclose  fp     gt

User · Answer

You actually don t have to use FormData to send a Blob to the server from JavaScript  and a File is also  a Blob    jQuery example   var file       fileInput   get 0  files item 0      instance of File   ajax     type   POST     url   upload php     data  file    contentType   application my-binary-type      set accordingly   processData  false       Vanilla JavaScript example   var file       fileInput   get 0  files item 0      instance of File var xhr   new XMLHttpRequest    xhr open  POST     upload php   true   xhr onload   function e           xhr send file     Granted  if you are replacing a traditional HTML multipart form with an  AJAX  implementation  that is  your back-end consumes multipart form data   you want to use the FormData object as described in another answer   Source  New Tricks in XMLHttpRequest2   HTML5 Rocks

User · Answer

I tried all the solutions above and in addition  those in related answers as well  Solutions including but not limited to passing the blob manually to a HTMLInputElement s file property  calling all the readAs  methods on FileReader  using a File instance as second argument for a FormData append call  trying to get the blob data as a string by getting the values at URL createObjectURL myBlob  which turned out nasty and crashed my machine   Now  if you happen to attempt those or more and still find you re unable to upload your blob  it could mean the problem is server-side  In my case  my blob exceeded the http   www php net manual en ini core php ini upload-max-filesize and post max size limit in PHP INI so the file was leaving the front end form but getting rejected by the server  You could either increase this value directly in PHP INI or via  htaccess

User · Answer

I could not get the above example to work with blobs and I wanted to know what exactly is in upload php  So here you go     tested only in Chrome 28 0 1500 95      javascript function that uploads a blob to upload php function uploadBlob           create a blob here for testing     var blob   new Blob   i am a blob           var blob   yourAudioBlobCapturedFromWebAudioAPI    for example        var reader   new FileReader           this function is triggered once a call to readAsDataURL returns     reader onload   function event           var fd   new FormData            fd append  fname    test txt            fd append  data   event target result             ajax               type   POST               url   upload php               data  fd              processData  false              contentType  false            done function data                   print the output from the upload php script             console log data                                   trigger the read from the reader        reader readAsDataURL blob        The contents of upload php    lt      pull the raw binary data from the POST array  data   substr   POST  data    strpos   POST  data           1      decode it  decodedData   base64 decode  data      print out the raw data   echo   decodedData    filename    test txt      write the data out to the file  fp   fopen  filename   wb    fwrite  fp   decodedData   fclose  fp     gt

User · Answer

Try this  var fd   new FormData    fd append  fname    test wav    fd append  data   soundBlob     ajax       type   POST       url    upload php       data  fd      processData  false      contentType  false    done function data           console log data         You need to use the FormData API and set the jQuery ajax s processData and contentType to false

User · Answer

2019 Update  This updates the answers with the latest Fetch API and doesn t need jQuery   Disclaimer  doesn t work on IE  Opera Mini and older browsers  See caniuse    Basic Fetch  It could be as simple as     fetch  https   example com upload php    method  POST   body blobData                    then response   gt  console log response text       Fetch with Error Handling  After adding error handling  it could look like   fetch  https   example com upload php    method  POST   body blobData                then response   gt                    if  response ok  return response                  else throw Error  Server returned   response status     response statusText                                then response   gt  console log response text                  catch err   gt                    alert err                     PHP Code  This is the server-side code in upload php    lt  php            gets entire POST body      data   file get contents  php   input           write the data out to the file      fp   fopen  path to file    wb         fwrite  fp   data       fclose  fp     gt

[javascript] How can javascript upload a blob?

Examples related to javascript

Examples related to jquery

Examples related to html