Send audio from ReactMediaRecorder to a server - javascript

I'm trying to program a Client, that can record audio data and then send it to a server.
I don't have much experience in front-end development. I was told to use React and so I'm trying to use ReactMediaRecorder (https://github.com/avasthaathraya/react-media-recorder).
render () {
return (
<ReactMediaRecorder
audio
whenStopped={blobUrl=>this.setState({audio: blobUrl })}
render={({startRecording, stopRecording, mediaBlob }) => (
<div>
<button id="recorder" className="button" onClick={startRecording}>Start Recording</button>
<button className="button" onClick={() => {stopRecording();this.upload()}}>Stop Recording</button>
<audio id="player" src={mediaBlob} controls />
</div>
)}
/>
)
}
upload() {
console.log("upload was called with blob " + this.state.audio)
//if (false) {
if (this.state.audio != null) {
console.log("got here, type of audio is " + this.state.audio)
var xhr = new XMLHttpRequest();
var filename = new Date().toISOString();
xhr.onload = function (e) {
if (this.readyState === 4) {
console.log("Server returned: ", e.target.responseText);
}
};
var fd = new FormData();
fd.append("audio_data", this.state.audio, filename);
xhr.open("POST", "http://127.0.0.1:3000", true);
xhr.send(fd);
}
}
At first it seemed very straightforward. But I don't get why I can't send the mediaBlob. The formData.append says, that this.state.audio is not of type Blob. So I checked it's type in the console log, and found out it is of type stringContent. I tried to create a Blob from that by using new Blob() but failed. I also fail to find information of this type.
Does somebody know what to do?

Ok I finally got it. The mistake was, that mediaBlob is actually not blob, but a blob Url. So first we need to load it and then we can send it. I changed my upload function to:
upload(mediaBlob) {
if (this.state.audio != null) {
//load blob
var xhr_get_audio = new XMLHttpRequest();
xhr_get_audio.open('GET', mediaBlob, true);
xhr_get_audio.responseType = 'blob';
xhr_get_audio.onload = function(e) {
if (this.status == 200) {
var blob = this.response;
//send the blob to the server
var xhr_send = new XMLHttpRequest();
var filename = new Date().toISOString();
xhr_get_audio.onload = function (e) {
if (this.readyState === 4) {
console.log("Server returned: ", e.target.responseText);
}
};
var fd = new FormData();
fd.append("audio_data",blob, filename);
xhr_send.open("POST", "http://localhost/uploadAudio",
true);
xhr_send.send(fd);
}
};
xhr_get_audio.send();
}
}
Now it works fine.

Related

How to download files using Springboot #RestController via ajax

I have an Springboot rest controller to download a file. I am trying to access the endpoint using the browser and able to see the response in the xhr.response. However, i want to force the file download which i am not able to achieve.
The code is as follows :
Rest based endpoint (Springboot):
#GetMapping(value = "download/{id}", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE, consumes = "*/*")
public ResponseEntity<InputStreamResource> getFile(#PathVariable("id") Long contractId) {
Contract contract;
contract = this.contractRepository.findOne(contractId);
System.out.println(contract.getPath()); // test
InputStreamResource resource = null;
HttpHeaders respHeaders = new HttpHeaders();
if (contract != null) {
try {
File file = new File(contract.getPath());
FileInputStream fileInputStream = new FileInputStream(file);
resource = new InputStreamResource(fileInputStream);
System.out.println(resource.exists());//test
respHeaders.add("Content-Type", URLConnection.guessContentTypeFromStream(fileInputStream));
respHeaders.add("Cache-Control", "no-cache, no-store, must-revalidate");
respHeaders.add("Pragma", "no-cache");
respHeaders.add("Expires", "0");
respHeaders.add("Content-Disposition", "attachment;filename=" + file.getName());
respHeaders.add("Content-Transfer-Encoding", "Binary");
respHeaders.setContentLength(file.length());
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
return new ResponseEntity<InputStreamResource>(
this.companyService.downloadContract(contractId),
respHeaders,
HttpStatus.OK
);
}
My xhr request is as follows
var xhr = new XMLHttpRequest();
xhr.open("GET", http.getHRTargetURL() + "download/" + id, true);
xhr.setRequestHeader("X-Auth-Token", http.getToken());
xhr.setRequestHeader("Accept", "application/octet-stream");
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.response != "0") {
console.log(xhr)
console.log("Downloaded file");
} else {
console.log("error downloading document")
}
}
xhr.send();
I am able to get the response from the endpoint . I can see the file contents in the xhr response on the browser
My problem is how can I force this response to popup file save wizard on the browser.
You could try like this.
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.response != "0") {
console.log(xhr)
var windowUrl = window.URL || window.webkitURL;
var url = windowUrl.createObjectURL(xhr);
anchor.prop('href', url);
anchor.prop('download', "filename");
anchor.get(0).click();
windowUrl.revokeObjectURL(url);
console.log("Downloaded file");
} else {
console.log("error downloading document")
}
}
xhr.send();
Well as I figured out that problem was with the frontend and had nothing to do with backend as Springboot was sending the proper response back.
Building on the answer provided by Dinesh above i modified my answer as follows
download(id, name){
var xhr = new XMLHttpRequest();
xhr.open("GET", http.getHRTargetURL() + "download/" + id, true);
xhr.setRequestHeader("X-Auth-Token", http.getToken());
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.responseType = "blob";
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
var url = window.URL.createObjectURL(new Blob([xhr.response], {type: "octet/stream"}));
a.href = url;
a.download = name;
a.click();
window.URL.revokeObjectURL(url);
} else {
console.log("error downloading document")
}
}
xhr.send();
}

cloudinary javascript image uploads a blank file

i am using javascript to upload an image using the unsigned mode. the resultant image is a blank image or i can say an image filled with black color. not sure what is wrong. the code looks like follow:
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "https://api.cloudinary.com/v1_1/mycloud/image/upload", false);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.onreadystatechange = function() { //Call a function when the state changes.
if (xhttp.readyState == 4 && xhttp.status == 200) {
alert(xhttp.responseText);
} else {
alert("Error dude: " + xhttp.statusText);
}
}
var parameters = {
"file": imgData,
"upload_preset": "mycode"
};
xhttp.send(JSON.stringify(parameters));
resultant image is:
http://res.cloudinary.com/viksphotography/image/upload/v1490752341/irgvt7b3qwoug1vz7own.jpg
Please note that imgData is base64 encoded
You need to use FormData for uploading the file:
const cloudName = 'your cloud name';
const unsignedUploadPreset = 'your unsigned upload preset';
// Upload base64 encoded file to Cloudinary
uploadFile('data:image/gif;base64,R0lGODlhSAFIAf....');
// *********** Upload file to Cloudinary ******************** //
function uploadFile(file) {
var url = `https://api.cloudinary.com/v1_1/${cloudName}/upload`;
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open('POST', url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
// File uploaded successfully
var response = JSON.parse(xhr.responseText);
// https://res.cloudinary.com/cloudName/image/upload/v1483481128/public_id.jpg
var url = response.secure_url;
// Create a thumbnail of the uploaded image, with 150px width
var tokens = url.split('/');
tokens.splice(-2, 0, 'w_150,c_scale');
var img = new Image(); // HTML5 Constructor
img.src = tokens.join('/');
img.alt = response.public_id;
document.body.appendChild(img);
}
};
fd.append('upload_preset', unsignedUploadPreset);
fd.append('tags', 'browser_upload'); // Optional - add tag for image admin in Cloudinary
fd.append('file', file);
xhr.send(fd);
}
See full example here. It will upload a small Michael Jordan jumpman image to your account.

download XSLX or DOCX file using XMLHTTPRequest response in IE 9 [duplicate]

This question already has answers here:
Download a file from Servlet using Ajax
(3 answers)
Closed 6 years ago.
How can i download XSLX or DOCX file using XMLHTTPRequest response in IE 9 ? I only need the IE 9 Solution.
This code works good for plain-text and csv Files but when i try to download XSLX or DOCX files nothing happens.
The response came from a java servlet with response-content-type set to
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
The javascript function that i need for downloading files.
function submitForm(command, event) {
disableButtons();
var form = $('form[name=myForm]');
var dataString = form.serialize();
var xhr = new XMLHttpRequest();
xhr.open('POST', myURL, true);
//tested => xhr.responseType = 'arraybuffer';
//tested => try { xhr.responseType = "arraybuffer"; } catch (e) { }; application/zip
//tested => try { xhr.responseType = "msxml-document"; } catch (e) { };
xhr.onreadystatechange = function() {
if(xhr.readyState == 4){
// xhr is complete (200 for web servers, 0 for local files in IE)
if ((xhr.status == 200)||(xhr.status == 0)){
// good
var filename = "";
var disposition = xhr.getResponseHeader('Content-Disposition');
if (disposition && disposition.indexOf('attachment') !== -1) {
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
var matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
}
var type = xhr.getResponseHeader('Content-Type');
var URL = window.URL || window.webkitURL;
var downloadUrl = URL.createObjectURL(blob);
var frame = document.createElement('iframe');
document.body.appendChild(frame);
frame.contentWindow.document.open(type, "replace");
frame.contentWindow.document.write(xhr.responseText); //tried also responseXML
frame.contentWindow.document.close();
frame.contentWindow.focus();
frame.contentWindow.document.execCommand('SaveAs', true, filename);
document.body.removeChild(frame);
setTimeout(function () {
URL.revokeObjectURL(downloadUrl);
}, 100); // cleanup
} else{
// error
}
}
}
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(dataString);
}
You can't, not with XMLHTTPRequest and IE9.
You can just use the form to submit the request and set its target to an iframe, the response content disposition header is set to attachment it will cause the save dialog to open.
<form name="myForm" target="somehiddeniframe>
..
</form>

Imgur API return "undefined"

I've the following js code to upload image to imgur using Auth.
<script type="text/javascript">
window.ondragover = function(e) {e.preventDefault()}
window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
function upload(file) {
if (!file || !file.type.match(/image.*/)) return;
document.body.className = "uploading";
var fd = new FormData();
fd.append("image", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.imgur.com/3/image.json");
xhr.onload = function() {
var code = '[img]' + JSON.parse(xhr.responseText).data.link + '[/img]';
var editor = eval('opener.' + 'clickableEditor');
editor.performInsert(code);
javascript:window.close()
}
xhr.setRequestHeader('Authorization', '39-letter-client-secret-code');
xhr.send(fd);
}
</script>
It doesn't uploads image to the imgur, but it returns data "undefined". Can you please mention me if I'm missing something here?
I've seen an issue in this line;
xhr.setRequestHeader('Authorization', '39-letter-client-secret-code');
I've changed it to;
xhr.setRequestHeader('Authorization', 'Client-ID 15-letter-Client-ID');
and it works. Sorry to bother you.

Downloading mp3 files using html5 blobs in a chrome-extension

I am trying to create a google-chrome-extension that will download an mp3 file. I am trying to use HTML5 blobs and an iframe to trigger a download, but it doesn't seem to be working. Here is my code:
var finalURL = "server1.example.com/u25561664/audio/120774.mp3";
var xhr = new XMLHttpRequest();
xhr.open("GET", finalURL, true);
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 && xhr.status == 200)
{
var bb = new (window.BlobBuilder || window.WebKitBlobBuilder)();
bb.append(xhr.responseText);
var blob = bb.getBlob("application/octet-stream");
var saveas = document.createElement("iframe");
saveas.style.display = "none";
saveas.src = window.webkitURL.createObjectURL(blob);
document.body.appendChild(saveas);
delete xhr;
delete blob;
delete bb;
}
}
xhr.send();
When looked in the console, the blob is created correctly, the settings look right:
size: 15312172
type: "application/octet-stream"
However, when I try the link created by the createObjectURL(),
blob:chrome-extension://dkhkkcnjlmfnnmaobedahgcljonancbe/b6c2e829-c811-4239-bd06-8506a67cab04
I get a blank document and a warning saying
Resource interpreted as Document but
transferred with MIME type
application/octet-stream.
How can get my code to download the file correctly?
The below code worked for me in Google chrome 14.0.835.163:
var finalURL = "http://localhost/Music/123a4.mp3";
var xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/octet-stream");
//xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
xhr.open("GET", finalURL, true);
xhr.responseType = "arraybuffer";
xhr.onload = function() {
var bb = new (window.BlobBuilder || window.WebKitBlobBuilder)();
var res = xhr.response;
if (res){
var byteArray = new Uint8Array(res);
}
bb.append(byteArray.buffer);
var blob = bb.getBlob("application/octet-stream");
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = window.webkitURL.createObjectURL(blob);
document.body.appendChild(iframe);
};
xhr.send(null);
I'm not sure, but i think this is your server's trouble. I've just tried your piece of code to download some sample blob of mp3-file and everything went ok. So maybe:
this file doesn't exist on your server
you server outputs wrong mime type for mp3 files

Categories