Send Blob object with POST Form

Question

I record an audio from microphone and I need to send it to server with a POST form.

I am able to record and to have the blob object, but I do not know how to send.
I tried to transform the blob to ArrayBuffer and set an hidden field with the value, but I am not sure if it is the right way.

This is the js code to get the blob, transform to ArrayBuffer and set to the hidden field:

var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function(event) {
    arrayBuffer = event.target.result;

    jQuery('hidden_field').val(arrayBuffer);
};
fileReader.readAsArrayBuffer(blobObject);

After that I simply send the form normally with a submit button.
On the server, If I do dd command to the request object, this is what I get:

array:2 [▼
    "_token" => "8HcKsoGblW9lEPVY0JYrFDbDAajdb63xdSQC3r5E"
    "hidden_field" => "[object ArrayBuffer]"
]

I do not know if it is correct or not.
If it is correct, how can I handle it?

UPDATED
I solved sending the blob in an hidden field as a base64 string, with this code:

var fileReader = new FileReader();
fileReader.onload = function(event) {
     jQuery('#hidden').val(fileReader.result.substr(fileReader.result.indexOf(',')+1));
};
fileReader.readAsDataURL(s);

related: stackoverflow.com/questions/37218585/…

gbalduzzi
– gbalduzzi

2018-05-03 16:21:27 +00:00
Commented May 3, 2018 at 16:21 — gbalduzzi
– gbalduzzi, Commented May 3, 2018 at 16:21

Endless · Accepted Answer · 2018-05-04 07:46:34Z

You could read it as dataURI and assign hidden_field with base64 string and later decode it on the backend...

otherwise this is the only way to append a blob to a form

// only way to change input[type=file] value is with a other FileList instance
// and this is currently the only way to construct a new FileList
function createFileList(a) {
  a = [].slice.call(Array.isArray(a) ? a : arguments)
  for (var c, b = c = a.length, d = !0; b-- && d;) d = a[b] instanceof File
  if (!d) throw new TypeError('expected argument to FileList is File or array of File objects')
  for (b = (new ClipboardEvent('')).clipboardData || new DataTransfer; c--;) b.items.add(a[c])
  return b.files
}

var file = new File([blobObject], 'filename.txt', {type: 'text/plain'})
var input = document.createElement('input')

input.type = 'file'
// input.multiple = true
input.files = createFileList(file)
input.name = 'hidden_field'
input.hidden = true

form.appendChild(input)

this will not work in every browser since all has constraints, i know for sure firefox and blink supports this haven't tested other browsers

the other solution is to make the request with ajax + FormData

var form = document.querySelector('form')

// get all other field in the form
var fd = new FormData(form)
// or start of with a empty form
var fd = new FormData()

// append the needed blob to the formdata
fd.append('hidden_field', blobObject, 'filename.txt')

fetch(form.action, {
  method: form.method,
  body: fd
}).then(function(res) {
  if (!res.ok) {
    console.log('something unexpected happened')
  }
  res.text().then(function(text) {
    // navigate to forms action page
    // location.href = form.action
  })
})

this has more cross browser support

Collectives™ on Stack Overflow

Send Blob object with POST Form

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related