How to mkdir with React-Native-FS - react-native

I'm trying to add functionality to my RN app that will allow users to create a new directory within their phone's file system.
I have tried to write the code so that the function creates a directory in the path /storage/emulated/0/AppName/NewFolder, since /storage/emulated/0 is the same path that is used by other apps I use to store user data (such as recording apps)
makeDirectory = () => {
const { currentFolder, units } = this.props;
const directoryName = 'New Folder'
const currentDirectory = units
const absolutePath = `/storage/emulated/0/MyApp/${currentDirectory}`
RNFS.mkdir(absolutePath)
.then((result) => {
console.log('result', result)
})
.catch((err) => {
console.warn('err', err)
})
}
However, this is just giving me an error: directory could not be created. I feel I am missing something here, and am not supposed to be saving the files like this to the phone's system.
My ultimate goal is to have the app with it's own folder system that will be mirrored within /storage/emulated/0/MyApp/home

const AppFolder = 'DirNameyouwant';
const DirectoryPath= RNFS.ExternalStorageDirectoryPath +'/'+ AppFolder;
RNFS.mkdir(DirectoryPath);

I've just tried out and my folder is created successfully.
use
const absolutePath = `/storage/emulated/0/${currentDirectory}`
instead
const absolutePath = `/storage/emulated/0/MyApp/${currentDirectory}`

You need to ask permission from the user for accessing his phone storage.
See this comment by Lylest on this reported issue from GitHub

I have resolved my issue by adding this line in the Android Manifest
file
android:requestLegacyExternalStorage="true"

Related

Download txt file from text in React Native

I'm trying to Download txt file from a text but that function is not working fine.
Txt Function
import RNFS from 'react-native-fs';
const txtDownload = () => {
let path = `${RNFS.DocumentDirectoryPath}/${filename}.txt`;
RNFS.writeFile(path, `Here is text`, 'utf8').then((res) => {
Toast('File saved successfully');
}
).catch((err) => {
Toast(err);
});
}
It returns File saved successfully but I can't find file
Log the path and check the location where it's trying to store. For me, it shows the location as below when I try to store in ${RNFS.DocumentDirectoryPath}/help.txt
/data/user/0/com.sample/files/help.txt
I suspect you were checking in the Documents folder. I don't know if you can write to the Documents folder. But it works for the Download folder using RNFS.DownloadDirectoryPath.

How to copy file using expo filesystem

I am trying to create a simple whatsapp status downloader app for android using expo and I am using expo-file-system for copying file but I am unable to get the file anywhere.
My functions looks something like this :
export const saveFile = async (filePath) => {
const res = await FileSystem.copyAsync({
from: filePath,
to: `${FileSystem.documentDirectory}saved/test.mp4`,
});
};
where filepath uses SAF file path.

How to download assets/files(.JSON) and store them inside my app not directly on the user's phone in React Native Expo

am using React Native Expo and I was browsing the web to find a way to download assets, and files to my react native project and came across with this post How to Download image in react native
When the user clicks the download button I want assets/files to be downloaded and stored inside the app not directly on the user's phone. I mean I don't want the users to view the downloaded files or delete them manually.
I just want the downloaded assets/files to be accessible by the React Native app. Am doing this to make the app work offline.
Once the users downloaded the assets/files, the app can use the downloaded assets/files. How can I accomplish that?
Thank you in advance!
If you are using expo managed workflow, then rn-fetch-blob will not work for you.
In that case, Expo File System is probably your way to go.
Firstly, install expo-file-system. See this
Next, for saving files and not letting users delete them manually, store them inside the cache-directory like this
import * as FileSystem from 'expo-file-system';
const downloadAssets = async () => {
let name = "Samplefile.jpg";
const result = FileSystem.createDownloadResumable(
url_Of_the_File_You_Want_to_Download,
FileSystem.cacheDirectory + name
);
const response = await result.downloadAsync();
if (response.status === 200) {
// File successfully saved
} else {
// Some error
}
};
To access this file in your app simple execute this function
import * as FileSystem from 'expo-file-system';
const getFiles = async () => {
const CacheDir = await FileSystem.readDirectoryAsync(
FileSystem.cacheDirectory
);
console.log(CacheDir); //Files are stored here
};

TestCafe: Changing download location

I am trying to change the download location and I found these codes doing research (sorry I forgot where I got these)
const browserConnection = t.testRun.browserConnection;
const client = browserConnection.provider.plugin.openedBrowsers[browserConnection.id].client;
const { Network, Page } = client;
const downloadDirectory = '../my_downloads');
await Promise.all([
Network.enable(),
Page.enable()
]);
Network.requestWillBeSent((param) => {
// console.log("Network.requestWillBeSent: " + JSON.stringify(param));
});
Network.responseReceived((param) => {
// console.log("Network.responseReceived: " + JSON.stringify(param));
});
await Page.setDownloadBehavior({
behavior: 'allow',
downloadPath: downloadDirectory
});
It was working perfectly fine using version 10.9.2 and this version was installed globally. I updated my TestCafe to 1.10.1 locally installed and now got this error:
TypeError: Cannot destructure property 'Network' of 'client' as it is undefined.
Any inputs are well appreciated. And looking forward to it :)
This internal API has changed due to testing support of multiple windows. Please use the getActiveClient method:
const browserConnection = t.testRun.browserConnection;
const runtimeInfo = rowserConnection.provider.plugin.openedBrowsers[browserConnection.id];
const { Network, Page } = await runtimeInfo.browserClient.getActiveClient();
If you need to change the download location to read and check a file from it, please use a public API for this: example.

Input form provides File - how to I upload it to Azure Blob storage using Vue?

I'm clearly missing something here so forgive me - all examples seem to involve express and I don't have express in my setup. I am using Vue.js.
Ultimately, want my client-side Vue app to be able to upload any file to azure blob storage.
I have the file(File api) from my Vue form. However, it does not provide a path (I believe this is for security reasons). The Azure docs have this snippet example:
const uploadLocalFile = async (containerName, filePath) => {
return new Promise((resolve, reject) => {
const fullPath = path.resolve(filePath);
const blobName = path.basename(filePath);
blobService.createBlockBlobFromLocalFile(containerName, blobName, fullPath, err => {
if (err) {
reject(err);
} else {
resolve({ message: `Local file "${filePath}" is uploaded` });
}
});
});
};
Is this not the api I should be using? What should I be doing to upload any type of blob to blob storage?
UPDATE
Following #Adam Smith-MSFT comments below I have tried the vue-azure-storage-upload but can't seem to get the files up to azure.
startUpload () {
if (!this.files || !this.baseUrl) {
window.alert('Provide proper data first!')
} else {
this.files.forEach((file:File) => {
this.$azureUpload({
baseUrl: this.baseUrl + file.name,
sasToken: this.sasToken,
file: file,
progress: this.onProgress,
complete: this.onComplete,
error: this.onError
// blockSize
})
})
}
},
According to the console the response.data is undefined and when the onError method fires, that too gives me an undefined event.
I'd highly recommend checking the following tutorial: https://www.npmjs.com/package/vue-azure-blob-upload
The author used a specific npm package to upload blobs(you can using file service) to upload objects:
npm i --save vue-azure-blob-upload
I'd also recommend checking the Storage JS documentation: https://github.com/Azure/azure-storage-js/tree/master/file , it provides specific examples related to Azure File Storage as well.