Im using React-360 to display a 360 photo. It works fine when we give remote url as src in Environment.setBackgroundImage(src, {format: format});
But i have a requirement to allow user to select a local 360 photo file and preview it.
Using Input tag and javascript i'm getting the file choose by user; but i'm not able to pass that file as src.
i tried this too.. didn't work.
src = URL.createObjectURL(file);
Environment.setBackgroundImage(src, {format: format});
Is it not possible to load local file in react 360.
Same Problem in google vr view also. Anything i can do to load local file choose by user.
have you tried using the asset method like so?
Environment.setBackgroundImage(asset('your_image.jpg'));
I think this could be what you are looking for.
Related
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'm making my android app with react native.
I want to make an upload(file, image) to my api server.
I searched in google, but I have some question.
The upload Flow what I thought is like below.
1. GET ACCESS TO LOCAL STORAGE
2. IF PERMISSION GRANTED, CLICK BUTTON AND MAKE POPUP
3. SELECT THE FILE/IMAGE AND GET URI
4. UPLOAD FILE WITH AXIOS
Am I thinking wrong? Is there a library to make it easier? Thank you
you can use react-native-image-crop-picker . it will ask for permission and you can take picture from camera or select image from gallery
if you want file other than image you can use react-native-document-picker
then upload file using axios
I am trying to download a file from amazon s3 but with a different name. i.e. not the name of the stored file which has timestamps attached_to_it.
But If I download it from s3.getObject
s3.getObject({
Key: fileKey,
Bucket: `/${albumBucketName}`,
//ResponseContentDisposition: `attachment; filename="${fileKey}"`,
//ResponseContentType: "audio/wav"
}, function (
err,
data
) {
....
});
it will not let the download being handled by browser. so, I will not get download progress in general. I dont want to handle the download progress in my app. I want it to download from browser.
I didn't go with URL approach because it won't let me specify a name for the file being downloaded.
EDIT:
there is a solution for this, which is giving anchor tags download attribute specifying the file name in it. but it wont work in ios safari. but still I dont want to loose accessibility of the feature for some user.
This part is on the right track:
ResponseContentDisposition: `attachment; filename="${desired_filename_here}"`,
...but instead of s3.getObject(), you need s3.getSignedUrl(). This generates a URL that contains embedded credentials, in a format that allows access to this one object but does not make the credentials reusable for any other purpose. Pass this URL to the browser and the file will be downloaded with the desired name.
You can use ResponseContentDisposition with s3.getSignedUrl().
In my AngularJS application I need to store the images that a user choose from his device, in the application folder.
Only the device used to choose the image has to see it.
So I will save in the backend only the path of this image.
I tried to search how to move or copy an image in a folder, but I haven't found any solution.
How should I do this?
Hi I am developing an ionic app using firebase as my database.
I read this question.
I understand it and have a more specific question.
I uploaded an image on amazon s3, imgur and filestack, and tried all three in firebase using data:url/<the url of image> and data:image/jpeg;<url of image>.
Am I typing something wrong into firebase?
The image does not come up. I do not want to write code in the app to upload the image etc, I just simply want an image to display on the app beside some data corresponding to an item in my firebase database.
I have read about base64, do I have to use it in this case?
(Optional) Perhaps If you could expand on the steps of doing this:
"You can use a filepicker to get the image file. Then you can host the image however you want, i prefer amazon s3. Once the image is hosted you can display the image using the url generated for the image."
I don't have much ionic experience, but why not just save the direct path to the image url and not include the data:url/ portion.
Simply store the url in firebase and then when it's retrieved inject it into your img src.