I'm building a music player in React, where I can upload mp3 files to my library. I know React and browsers in general doesn't have access to the file path, so I decided to upload them via multer to a folder on the server, and data like filenames and ID3 tags goes into database. I would really like to load them from their original location, without having to copy any files. Is there any workaround I could try?
Related
I have 2 folders utalk and server, in my server folder I have a public folder in src folder to save images, that users upload. But I don't know how to get image src from that public folder to display in frontend.(public folder not actually contains image but mp3 instead)
There is not a lot of context provided. From what i gather, if the folder is public, the resources should be directly accessible. Something like http://backend/image/file.mp3.
Also i would recommend using any static file hosting solution for hosting the content file (mp3 in your case). Serving all that content from your http server is a call for performance bottlenecks.
Do add some more context if you are looking for a more specific solution
I have a React app where I need to upload files (pdf files for example), and store them under distinctive folders,
What I need to know, is if there is a way to download or get download link for an entire folder X,
I tried with firebase, but it only offers to get link of a single file at a time, not full folder, does S3, or something else have this option?
Thanks.
I am trying save some video in react native app privately. So that i can download videos within app and can watch within app after download. So i am not able to get it how can i do this. Let me know if anybody have resolution for this approach. i was checking that we can convert files into byte than can store within react native app. again then convert into video and can watch it within app. Let me know if this can be done by anyone. Thanks
<Video source={{uri: "background"}}
ref={(ref) => {
this.player = ref
}}
onBuffer={this.onBuffer}
onError={this.videoError}
style={styles.backgroundVideo} />
Watch this video
You can watch the above video. Anybody have a idea that how mx doing this thing. I want to do same. Download videos and save and will be private and play in my app.
For downloading any file like video,img ..
there are two best known libraries for downloading files
https://www.npmjs.com/package/react-native-fs
https://www.npmjs.com/package/react-native-fetch-blob
Now you can follow their documentation to download files like Videos,images or whatever you want to your user's phone.
For the part that you dont want it to be available to user via gallery.
For this you can use react-native-fetchblob as it has builtin intent actions and views. You can download a video file with any random name like 1234CACHE any random name without any extension to it, specially dont give it extension like video.mp4 because gallery detects .mp4 files so dont give it any extension and the file won't be available in any gallery.
Now how to hide the file? react-native-fetch-blob allow us to save files into directories that are not publicly available i mean user cannot reach those directory and these directories are used only for saving App's data so you can save your video file in one of these directories.
Now after completing your download, You can open your file with the Intent.
Example:
const VIDEO_PATH = res.path() //the path where your downloaded video is saved, you will actually receive this in the response of download function.
const MIME_TYPE = "video/mp4"
//Now finally call the intent with video mime so the video will be opened in user's media player, or if you want your own media player you can use any library for that.
android.actionViewIntent(VIDEO_PATH , MIME_TYPE)
you can use https://github.com/RonRadtke/react-native-blob-util to download any remote files
I created a repository and then I uploaded audio files into it.
When I go to the audio files, for example: https://github.com/cre8ture/audioFilesForBL/blob/main/1.mp3
It goes to the github page, rather than playing the audio file directly.
My ultimate aim is to upload a few audio files so that a website using React can play the audio file
for instance I'd like to load
const audioTune = new Audio("https://github.com/cre8ture/audioFilesForBL/blob/main/1.mp3");
and play that file.
Thank you
I"m sure you already figured it out but append the url with "?raw=true" and it should run.
so like:
"https://github.com/cre8ture/audioFilesForBL/blob/main/1.mp3?raw=true"
So, I have a project in Reactjs where in I am getting some String data from JSON . and I am writing it to a file. Now I want to save this file in a folder on client side.
So is there a way to create a folder (for the first time execution) and check if a folder already exist on system. and save file on that folder?
I tried and searched a lot but couldn't find anything useful. I can save the file in downloads folder but I don't want that, I want my custom folder.
Thankyou.