How to upload recording file from Expo-av via Axios? - react-native

I am trying to upload a file recorded using expo-av via an Axios post request to my server. Forgive me, I am a Python backend dev so I am not that familiar with JS or Axios. I have tried various solutions but can't get anything working.
The code I am using for the recording is this, mostly straight from the Expo docs (the recording element) and it is working fine (the audio file gets created by the simulator, e.g. a .caf file for iOS simulator)
import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { Audio } from 'expo-av';
export default function App() {
const [recording, setRecording] = React.useState();
async function startRecording() {
try {
console.log('Requesting permissions..');
await Audio.requestPermissionsAsync();
await Audio.setAudioModeAsync({
allowsRecordingIOS: true,
playsInSilentModeIOS: true,
});
console.log('Starting recording..');
const { recording } = await Audio.Recording.createAsync(
Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY
);
setRecording(recording);
console.log('Recording started');
} catch (err) {
console.error('Failed to start recording', err);
}
}
async function stopRecording() {
console.log('Stopping recording..');
setRecording(undefined);
await recording.stopAndUnloadAsync();
const uri = recording.getURI();
console.log('Recording stopped and stored at', uri);
//My code for the upload
const formData = new FormData();
formData.append("attribute_x", "123");
formData.append("attribute_y", "456");
let soundFile = //NOT SURE WHAT THE ACTUAL SOUND FILE IS. The uri is just a string
formData.append("recording", {uri: uri, name: 'soundfile.caf', type: 'audio/x-caf'});
const response = await axios.post(my_url, formData, {
headers: {
'Content-Type': 'multipart/form-data',
'X-CSRFToken': 'csrftoken',
}
})
... deal with the response...
}
return (
<View style={styles.container}>
<Button
title={recording ? 'Stop Recording' : 'Start Recording'}
onPress={recording ? stopRecording : startRecording}
/>
</View>
);
}
The request body I need to send should be:
{
"attribute_x": 333,
"attribute_y": 291,
"recording": THE SOUND FILE
}
It's .caf for iOS and will be .mp4 for Android (defaults) but I can figure out how to deal with that myself. Just really pulling my hair out now with the upload/post request.
Thanks in advance.

I was unable to get it work with react-native, main cause is that multipart/form-data header wasn't set correctly and formdata.getHeaders() isn't defined in react-native.
Tried all that was tested here, but without success: https://github.com/axios/axios/issues/318
Solution: use https://github.com/sindresorhus/ky
const uri = recording.getURI();
const filetype = uri.split(".").pop();
const filename = uri.split("/").pop();
const fd = new FormData();
fd.append("audio-record", {
uri,
type: `audio/${filetype}`,
name: filename,
});
await ky.post("audio/upload", {
body: fd,
});
the headers will set automatically like with fetch api, and the boudary part will be provided !

Related

Getting the Plaid Link to Work in my Create React App with Auth0

I had started a project a little while ago and have been busy lately so I have not been able to work on it. I am out of practice with web development because I had recently joined the military. Right now the project consists of a create-react-app app with auth0 integrated. What I am trying to do is get the plaid link integrated into the page it takes you after logging in using auth0. I am requesting help on what code from the plaid docs I use in order for this to work. Their documentation is a little confusing to me, maybe because I'm so out of practice. Any help would be much much appreciated.
https://github.com/CollinChiz/SeeMyCash
Have you taken a look at the Quickstart at https://github.com/plaid/quickstart/? It contains a full React implementation that does this. Here's the relevant excerpt:
// APP COMPONENT
// Upon rendering of App component, make a request to create and
// obtain a link token to be used in the Link component
import React, { useEffect, useState } from 'react';
import { usePlaidLink } from 'react-plaid-link';
const App = () => {
const [linkToken, setLinkToken] = useState(null);
const generateToken = async () => {
const response = await fetch('/api/create_link_token', {
method: 'POST',
});
const data = await response.json();
setLinkToken(data.link_token);
};
useEffect(() => {
generateToken();
}, []);
return linkToken != null ? <Link linkToken={linkToken} /> : <></>;
};
// LINK COMPONENT
// Use Plaid Link and pass link token and onSuccess function
// in configuration to initialize Plaid Link
interface LinkProps {
linkToken: string | null;
}
const Link: React.FC<LinkProps> = (props: LinkProps) => {
const onSuccess = React.useCallback((public_token, metadata) => {
// send public_token to server
const response = fetch('/api/set_access_token', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ public_token }),
});
// Handle response ...
}, []);
const config: Parameters<typeof usePlaidLink>[0] = {
token: props.linkToken!,
onSuccess,
};
const { open, ready } = usePlaidLink(config);
return (
<button onClick={() => open()} disabled={!ready}>
Link account
</button>
);
};
export default App;

React Native w/ Expo: Axios post works on emulator, but not on physical device

I'm trying to upload an image and some data to my API with Axios on my Expo app. Here's the code:
// api.ts
import axios from 'axios'
const api = axios.create({
baseURL: 'http://999.999.999.999/api', // <-- my cloud server ip
responseType: 'json'
})
export default api
// register.ts
import FormData from 'form-data' // https://www.npmjs.com/package/form-data
import api from '../services/api'
const options = { headers: 'Content-Type': 'multipart/form-data' } }
export const register = async (formData: FormData): Promise<boolean> => {
try {
const response = api.post<{ error: boolean, data: string }>(
'/authentication/register',
formData,
options
)
return Boolean(response.data?.data)
} catch (error) {
return false
}
}
I'm also using the expo-image-picker and appending the result to FormData:
const result = await ImagePicker.launchCameraAsync({})
if (result.cancelled) {
return
}
const personalPhotoUriParts = result.uri.split('.')
const personalPhotoFileType = personalPhotoUriParts[personalPhotoUriParts.length - 1]
const formData = new FormData()
formData.append('email', 'teste#mail.com')
formData.appent('password', '123456')
formData.append('personal_photo', {
uri: result.uri,
name: `personal_photo.${personalPhotoFileType}`,
type: `image/${personalPhotoFileType}`
})
register(formData) // from register.ts
All the things work as expected on the emulator, send and print from PHP API body content I get:
// var_dump($_POST);
Array [
"email": "test#mail.com",
"password": "123456"
]
// var_dump($_FILES)
Object {
"personal_photo": Object {
"error": 0,
"name": "document_photo.jpg",
"size": 135327,
"tmp_name": "/tmp/php5o11qT",
"type": "image/jpg",
}
}
But when I try to send it from a physical device, I get an empty body on both cases:
// var_dump($_POST);
Array []
// var_dump(get_file_contents('php://input'));
// nothing
// var_dump($_FILES);
Array []
My bet is on FormData, I was using other API routes without problems (on physical device), but when I had to use multipart/form-data I've got this problem. For me, does not make sense since the same API worked with React JS (WEB), Postman, and RN w/ Expo on emulator.
Maybe you need to enable on your Android Manifest
android:usesCleartextTraffic="true"
your problem is on Android or iOS device ?

Push notification in existing expo project

I have an existing app in expo create in react-native. In that app I have to add expo push notification functionality. I have created the NotificationController using below link:
https://docs.expo.io/versions/v32.0.0/guides/push-notifications
I now need to know where I have to place this controller. I am very new in mobile development and just need help about the correct placement of this controller so that we can show this to the customer.
Once you have created your push notification service , either this can be a function in a single file in side your services directory (create if it doesn't exists) , or a component.
Then import that function inside your main app.js and use it inside componentDidMount lifecycle function. This is just a sample code and I'm sure this can be improved further, However this is enough to get started.
push_notification.js
import {Permissions, Notifications} from 'expo';
import { ActivityIndicator, AsyncStorage} from 'react-native';
export default async () => {
try{
let previousToken = await AsyncStorage.getItem('pushToken');
if(previousToken){
return;
}else{
let {status} = await Permissions.askAsync(Permissions.NOTIFICATIONS);
console.log(status);
if(status !== 'granted'){
console.log("Don't like to receive push");
}
let token = await Notifications.getExpoPushTokenAsync();
return token;
}
} catch(err){
console.log(err);
}
};
App.js
import PushNotification from "../services/push_notifications";
import axios from 'axios';
async componentDidMount(){
let tokenFromStorage = await zlAsyncStorage.getItem('pushToken');
console.log('token from storage',tokenFromStorage);return;
let token = await PushNotification();
AsyncStorage.setItem('pushToken',token);
console.log("here");
//Save the token in couch db
await axios({
url:"http://192.168.8.148:5984/mycompany",
method: 'post',
timeout: 1000,
headers: {
'Accept-Encoding' : 'gzip, deflate',
'Content-Type':'application/json',
'Authorization':'Basic YTph'
},
data: {
user: "cheran",
tokenReceived : token,
},
auth: {
username: 'a',
password: 'a'
},
}).then(function(response){
//console.log(response);
});
}

Is it possible to download an audio file and play it using React Native Expo?

I have audio files hosted on a server that I'd like my app to access after authenticating. Users send a GET request which includes an authentication token, and the server returns the binary audio data.
As far as I can see there is no way to save this 'blob' as an audio file to the filesystem. The current implementation of fetch in react-native doesn't support blobs: link
... and the ideally-suited react-native-fetch-blob library isn't supported in expo either: link
Additionally I can see no way of streaming the audio file from the server. The included audio library with expo allows streaming of audio from a url (e.g. http://example.com/myaudio.mp3) however I can't see any way to attach an authorisation header to the request (e.g. "Authorization": "Bearer [my-token]").
Is there a way of achieving this, either by downloading and saving the audio blob, or streaming from a url with an authorisation header included in the request? I could detach my project from Expo but I'd like to leave that as a last-resort.
Yes, it is. You need to use the Audio module exposed by expo to do it. Below are the steps that you have to follow to load and play an audio file from a given URL. I've also copied over the code for my component that is doing the same for me.
Load Audio module exposed by expo
import { Audio } from 'expo'
Create a new sound Object from it
soundObject = new Audio.Sound()
Asynchronously load your file
await this.soundObject.loadAsync({ uri: this.props.source })
Once loaded play the loaded file using
this.soundObject.playAsync()
Below is a simple component that I wrote for doing it -
import React, { Component } from 'react';
import { View, TouchableNativeFeedback } from 'react-native';
import { Audio } from 'expo';
class AudioPlayer extends Component {
constructor(props) {
super(props);
this.state = { isPlaying: false };
this.loadAudio = this.loadAudio.bind(this);
this.toggleAudioPlayback = this.toggleAudioPlayback.bind(this);
}
componentDidMount() {
this.loadAudio();
}
componentWillUnmount() {
this.soundObject.stopAsync();
}
async loadAudio() {
this.soundObject = new Audio.Sound();
try {
await this.soundObject.loadAsync({ uri: this.props.source /* url for your audio file */ });
} catch (e) {
console.log('ERROR Loading Audio', e);
}
}
toggleAudioPlayback() {
this.setState({
isPlaying: !this.state.isPlaying,
}, () => (this.state.isPlaying
? this.soundObject.playAsync()
: this.soundObject.stopAsync()));
}
render() {
return (
<TouchableNativeFeedback onPress={this.toggleAudioPlayback}>
<View style={this.props.style}>
{this.props.children}
</View>
</TouchableNativeFeedback>
);
}
}
export default AudioPlayer;
i figured it out. I should've load the sound in componentdidmount using async. In case someone met this problem
componentDidMount() {
this.loadAudio();
}
//async function to load the audio
async loadAudio() {
const { navigation } = this.props;
const id = navigation.getParam("id");
this.sound = new Audio.Sound();
for (let i = 0; i < soundArray.length; i++) {
if (soundArray[i].id === id) {
this.currentSound = soundArray[i];
console.log(this.currentSound);
break;
}
}
try {
await this.sound.loadAsync({
uri: this.currentSound.sound /* url for your audio file */
});
await this.sound.setOnPlaybackStatusUpdate(
this._updateScreenForSoundStatus
);
} catch (e) {
console.log("ERROR Loading Audio", e);
}
}

How to upload file to server using react-native

I am developing a app where i need to upload an image to the server. Based on the image i get a response which i need to render?.
Can you please help me how to upload an image using react-native?.
There is file uploading built into React Native.
Example from React Native code:
var photo = {
uri: uriFromCameraRoll,
type: 'image/jpeg',
name: 'photo.jpg',
};
var body = new FormData();
body.append('authToken', 'secret');
body.append('photo', photo);
body.append('title', 'A beautiful photo!');
var xhr = new XMLHttpRequest();
xhr.open('POST', serverURL);
xhr.send(body);
My solution is using fetch API and FormData.
Tested on Android.
const file = {
uri, // e.g. 'file:///path/to/file/image123.jpg'
name, // e.g. 'image123.jpg',
type // e.g. 'image/jpg'
}
const body = new FormData()
body.append('file', file)
fetch(url, {
method: 'POST',
body
})
I wrote something like that. Check out https://github.com/kamilkp/react-native-file-transfer
I have been struggling to upload images recently on react-native. I didn't seem to get the images uploaded. This is actually because i was using the react-native-debugger and network inspect on while sending the requests. Immediately i switch off network inspect, the request were successful and the files uploaded.
I am using the example from this answer above it works for me.
This article on github about the limitations of network inspect feature may clear things for you.
Just to build on the answer by Dev1, this is a good way to upload files from react native if you also want to show upload progress. It's pure JS, so this would actually work on any Javascript file.
(Note that in step #4 you have to replace the variables inside the strings with the type and file endings. That said, you could just take those fields out.)
Here's a gist I made on Github: https://gist.github.com/nandorojo/c641c176a053a9ab43462c6da1553a1b
1. for uploading one file:
// 1. initialize request
const xhr = new XMLHttpRequest();
// 2. open request
xhr.open('POST', uploadUrl);
// 3. set up callback for request
xhr.onload = () => {
const response = JSON.parse(xhr.response);
console.log(response);
// ... do something with the successful response
};
// 4. catch for request error
xhr.onerror = e => {
console.log(e, 'upload failed');
};
// 4. catch for request timeout
xhr.ontimeout = e => {
console.log(e, 'cloudinary timeout');
};
// 4. create formData to upload
const formData = new FormData();
formData.append('file', {
uri: 'some-file-path', // this is the path to your file. see Expo ImagePicker or React Native ImagePicker
type: `${type}/${fileEnding}`, // example: image/jpg
name: `upload.${fileEnding}` // example: upload.jpg
});
// 6. upload the request
xhr.send(formData);
// 7. track upload progress
if (xhr.upload) {
// track the upload progress
xhr.upload.onprogress = ({ total, loaded }) => {
const uploadProgress = (loaded / total);
console.log(uploadProgress);
};
}
2. uploading multiple files
Assuming you have an array of files you want to upload, you'd just change #4 from the code above to look like this:
// 4. create formData to upload
const arrayOfFilesToUpload = [
// ...
];
const formData = new FormData();
arrayOfFilesToUpload.forEach(file => {
formData.append('file', {
uri: file.uri, // this is the path to your file. see Expo ImagePicker or React Native ImagePicker
type: `${type}/${fileEnding}`, // example: image/jpg
name: `upload.${fileEnding}` // example: upload.jpg
});
})
In my opinion, the best way to send the file to the server is to use react-native-fs package, so install the package
with the following command
npm install react-native-fs
then create a file called file.service.js and modify it as follow:
import { uploadFiles } from "react-native-fs";
export async function sendFileToServer(files) {
return uploadFiles({
toUrl: `http://xxx/YOUR_URL`,
files: files,
method: "POST",
headers: { Accept: "application/json" },
begin: () => {
// console.log('File Uploading Started...')
},
progress: ({ totalBytesSent, totalBytesExpectedToSend }) => {
// console.log({ totalBytesSent, totalBytesExpectedToSend })
},
})
.promise.then(({ body }) => {
// Response Here...
// const data = JSON.parse(body); => You can access to body here....
})
.catch(_ => {
// console.log('Error')
})
}
NOTE: do not forget to change the URL.
NOTE: You can use this service to send any file to the server.
then call that service like the following:
var files = [{ name: "xx", filename:"xx", filepath: "xx", filetype: "xx" }];
await sendFileToServer(files)
NOTE: each object must have name,filename,filepath,filetype
A couple of potential alternatives are available. Firstly, you could use the XHR polyfill:
http://facebook.github.io/react-native/docs/network.html
Secondly, just ask the question: how would I upload a file in Obj-C? Answer that and then you could just implement a native module to call it from JavaScript.
There's some further discussion on all of this on this Github issue.
Tom's answer didn't work for me. So I implemented a native FilePickerModule which helps me choose the file and then use the remobile's react-native-file-transfer package to upload it. FilePickerModule returns the path of the selected file (FileURL) which is used by react-native-file-transfer to upload it.
Here's the code:
var FileTransfer = require('#remobile/react-native-file-transfer');
var FilePickerModule = NativeModules.FilePickerModule;
var that = this;
var fileTransfer = new FileTransfer();
FilePickerModule.chooseFile()
.then(function(fileURL){
var options = {};
options.fileKey = 'file';
options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);
options.mimeType = 'text/plain';
var headers = {
'X-XSRF-TOKEN':that.state.token
};
options.headers = headers;
var url = "Set the URL here" ;
fileTransfer.upload(fileURL, encodeURI(url),(result)=>
{
console.log(result);
}, (error)=>{
console.log(error);
}, options);
})
Upload Files : using expo-image-picker npm module. Here we can upload any files or images etc. The files in a device can be accessed using the launchImageLibrary method. Then access the media on that device.
import * as ImagePicker from "expo-image-picker";
const loadFile = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
aspect: [4, 3],
});
return <Button title="Pick an image from camera roll" onPress={loadFile} />
}
The above code used to access the files on a device.
Also, use the camera to capture the image/video to upload by using
launchCameraAsync with mediaTypeOptions to videos or photos.