Develop Reference

Expo android network request failed

I want to post a wav file(in blob) to my server.
I've tested my server using postman, and it works fine.
I also creat a react-app(web) and post the wav using the same logic below successfully.
const formData = new FormData();
formData.append('file', blob, 'test');
let requestOptions = {
method: 'POST',
body: formData,
mode:'no-cors',
};
// not localhost
fetch('http://xx.xx.xx.xx', requestOptions)
.then(response => response.text())
.then(result => {
console.log(result)
})
.catch(error => console.log('error', error));
However I cannot even send the request out on my phone(Only got [TypeError: Network request failed] and my server didn't receive any request.)
I've been looking online and still not fix this issue. Please help.

It is not about the Blob, but more about the error you go.
So not sure if it can help...
I found out that I needed to put the Mime Type to match the file to upload.
formData.append('file', {
uri : "file://...",
name : "filename.mp4",
type: "video/mp4",
});

Sharing URL on android doesn't show up as link. React Native

I'm trying to share a deep-link to my app with a message using react-native-share.
The massage is there and so is the URL, but the URL is appearing as a String of array with the link in it.
Something like :["app://app/home"]
I want it to be a clickable link to my app,
IOS works fine for me.
My code:
import Share from 'react-native-share';
shareLink() {
Share.open({
title: 'Welcome',
message: 'this is a link to the home page',
url: 'app://app/home'
})
.catch((err) => console.log(err));
}
Thanks!

Uploading Audio to Cloudinary

this is my first Stack Overflow post so please go easy on me!
I'm building an audio recording app using EXPO as the SDK with React Native. One of the main features of the app is to be able to to record live audio as well as uploading audio from the client's device. By leveraging Expo's Audio API and FileSystem, I'm successfully able to record and save live audio and then retrieve it via FileSystem to upload, however I'm running in an error when I try to pass the localUri to upload to my Cloudinary database. There is very little documentation in regards to audio and audio uploads to cloudinary are clumped into video uploads so there's nothing audio specific to really point me in the right direction. I've tried converting the URI to base64 as well as a variety of MIME types but the response from Cloudinary with a secure url returns empty/undefined. I've successfully uploaded images with this method so you can imagine how frustrating it is. Here's my code that grabs a recording and tries to upload it to Cloudinary:
DocumentPicker.getDocumentAsync({
type: '*/*',
copyToCacheDirectory: true,
base64: true
})
.then(succ => {
//check out the saved info
console.log(succ, `path: ${succ.uri}, type: ${succ.type}, name: ${succ.id}, size: ${succ.size}`)
let Base64 = {/* Truncated Base64 object*/};
let base64Aud = `data:audio/x-wav;base64, ${Base64.encode(succ.uri)}`;
let cloud = `https://api.cloudinary.com/v1_1/${CLOUD_NAME}/upload`;
const data = {
'file': base64Aud,
'upload_preset': CLOUDINARY_UPLOAD_PRESET,
'resource_type': 'video',
}
fetch(cloud, {
body: JSON.stringify(data),
headers: {
'content-type': 'application/x-www-form-urlencoded'
},
method: 'POST',
})
.then(async r => {
let data = await r.json()
console.log('cloudinary url:', data.secure_url)
return data.secure_url
})
.catch(err => console.log(err))
}
This call prints the following to the console:
Object {
"name": "20200117_143416.mp4",
"size": 519612343,
"type": "success",
"uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Faloud-aaf24bff-8000-47f0-9d1c-0893b81c3cbc/DocumentPicker/c922deb7-fd4f-42d9-9c28-d4f1b4990a4c.mp4",
} path: file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Faloud-aaf24bff-8000-47f0-9d1c-0893b81c3cbc/DocumentPicker/c922deb7-fd4f-42d9-9c28-d4f1b4990a4c.mp4, type: success, name: undefined, size: 519612343
data:audio/x-wav;base64, ZmlsZTovLy9kYXRhL3VzZXIvMC9ob3N0LmV4cC5leHBvbmVudC9jYWNoZS9FeHBlcmllbmNlRGF0YS8lMjU0MGFub255bW91cyUyNTJGYWxvdWQtYWFmMjRiZmYtODAwMC00N2YwLTlkMWMtMDg5M2I4MWMzY2JjL0RvY3VtZW50UGlja2VyL2M5MjJkZWI3LWZkNGYtNDJkOS05YzI4LWQ0ZjFiNDk5MGE0Yy5tcDQ=
cloudinary url: undefined
Does anyone see any glaring issues or have any insight on this issue? Better yet, successfully uploaded audio to Cloudinary from the client using Expo & React Native? Thanks!

While I can't say for certain why the uploads fail in your case without seeing the error returned by Cloudinary, I have created a working JSFiddle which you can use to upload a Base64 data URI encoded audio file (1-second audio in my example to keep it short). Just replace your cloud name in the API endpoint URL and set the upload preset. Once that uploads successfully in your account you can replace the example with your Base64 Data URI and see if it works or not. That will tell you if the issue is with the Base64 String itself. Having said that, sharing the error returned by Cloudinary would be the best indicator.
Example code below:
var fd = new FormData();
fd.append("file", "data:audio/mpeg;base64,SUQzBAAAAAABBFRYWFgAAAASAAADbWFqb3JfYnJhbmQ...");
fd.append("upload_preset", "");
fd.append("resource_type", "video")
fetch('https://api.cloudinary.com/v1_1/cloud_name_here/upload',
{
method: 'POST',
body: fd
}
);

Flutter: Show PDF cover image

I want to show the cover page of a pdf. But I don't know how to proceed. I have the URL of the pdf file and I want to display the front page like an image. I am using the pdf library but I don't know how to proceed.

I was also looking for the same a few days ago and found solution for it.
You can use this package:https://pub.dev/packages/pdf_render
you can use it like this in your widget:
import 'package:pdf_render/pdf_render_widgets2.dart';
...
PdfDocumentLoader(
assetName: 'assets/hello.pdf',
filePath: 'path of the file in local storage',
pageNumber: 1,
pageBuilder: (context, textureBuilder, pageSize) => textureBuilder()
)

In the pdf_thumbnail package, it uses pdfx package to get every single page.
Relevant line in the library.
final page = await document.getPage(pageNumber);
final pageImage = await page.render(
width: page.width,
height: page.height,
);
images[pageNumber] = pageImage!.bytes;
await page.close();

There is a sample Futter wrapper for a PDF SDK here https://github.com/PDFTron/pdftron-flutter. And a corresponding blog: https://www.pdftron.com/blog/flutter/build-a-document-viewer-in-flutter/

React-Native: Downloading and uploading files from android webview

I am using the React-Native webview bridge module because I need its functions and now I am trying to make work the downloading and uploading files. For downloading I was sending a message with the url of the file and then using the Linking package to download in browser, unfortunately I was getting that the download is unsuccessful. Is there a way how I can manage both to work on this module?

I recently had to face the same problem for Android (although only for file uploads). You can see my implementation here: https://github.com/martinarroyo/react-native-webview-file-upload/
Maybe if you extend that code to include something like this you can include file downloading.

fetch(
_apiRoot+url+'?_format=json&access_token='+this.getAccessToken(),
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body:JSON.stringify(data)
}).then((response) => response.json())
.then((response) => {
success(response.data);
})
.catch((errorData) => {
error(errorData);
});
//Where data is an object like
let data = {
images:[responseDataFromImagePicker.data,responseDataFromImagePicker.data]
}
//the picker returns the image encoded in base64