i have a problem with the firebase storage rules, i saved a picture in firebase storage and, if i set the read mode in false is equally possible to see the image. after i save my image in the storage i change my storage rules with this simple code
service firebase.storage {
match /b/mybucketaddress/o {
match /{allImages=**}{
allow write, read: if false
}
}
}
if i put the picture address in the browser the picture is still visible (also into my app, not only in browser), how i fix this problem?
Related
I am currently creating a WidgetKit for my React Native application. However, I need to create a post request to retrieve my current logined user information. I was wondering if importing FirebaseAuth in my WidgetKit would return the correct current user in my widget project?
import FirebaseAuth
func getUser(){
FIRAuth.auth().currentUser?.uid
}
I wouldn't recommend requiring actual Firebase functionality in a WidgetExtension unless your Widget requires data that may change. If it really does, you should just be including your Firebase code in the build for the Widget, you don't want to duplicate the code you've written for interacting with Firebase.
If you don't need live data, just save the Object your widget needs access to into the UserDefaults. You can do this easily so long as the object in question conforms to Codable. I'm assuming you're suggesting using FirebaseAuth because the Object you want to construct relies on your Firebase data in some way, but there's no need to actually interact with Firebase in a Widget. The log in status of your user can't change if they aren't in your app, so it's not particularly unsafe to save the data directly. If they sign out you can just clear the UserDefaults value.
I'm working on a React-app in which I would like to show the avatar of the logged in user. I retrieve all the user-information from my PHP backend, so i know the url of the image i want to show. The images however, are stored in a private folder which is protected with a .htaccess file.
Because of privacy reasons, the images-folder needs to remain private, so the images can't directly be accessed. I was thinking about converting the image with base64 encoding and passing it through the api, but this doesn't feel like a correct solution. Is there a way to retrieve the images from the private folder, by authenticating myself in any kind of way?
Thanks in advance
I am using the upload image widget without success.
1) result.info.path returns invalid url.
2) There is no preview of the uploaded images due to no.1
3) No images are were uploaded to my media folder at Cloudinary.
Fiddle:
https://jsfiddle.net/7uqb83t1/
These are my preset settings:
Can someone share a working version of this widget + preset settings?
On successful upload, you need to check result.info.secure_url for a link to the asset. Currently, in your preset, you're using Async which means the incoming transformation is performed in the background (asynchronously), and as such, you will get a pending result. Async assumes you're using a Notification URL as a webhook where you'll receive the Upload API response when the processing is complete. In your case, I'd recommend turning the Async off.
Also, your incoming transformation configured in the preset is not valid and because of that, you will be getting an error on upload. Please console.log this in your JSFiddle to see it. Essentially, it'll be -
Auto gravity can only be used with crop, fill, lfill, fill_pad or
thumb
'auto' gravity (g_auto) implies cropping (automatically selecting the most interesting part of the image to focus on) and therefore you need to use an appropriate crop mode. 'scale' keeps all image data and no cropping is made so that is why g_auto can't work with it. Please see the following section of the documentation for details on the different crop modes - https://cloudinary.com/documentation/image_transformation_reference#crop_parameter - which will help you decide which one you want to use.
Lastly, you should also consider updating your incoming transformation so that it only resizes once, since currently, resizing it three times with the same crop mode is redundant. For example, you can use c_scale,q_auto,w_687 only, or if you want with 'auto' gravity you can try c_fill,g_auto,q_auto,w_687.
I am having difficulties to understand Image prefetch. In the doc's there is not much explanation about it:
"Prefetches a remote image for later use by downloading it to the disk
cache"
Could you please help me understand the following about Image prefetch:
Suppose a user uploads a profile image, and the image's URL is stored in the AsyncStorage.
Should I run Image.prefetch(UserStore.profileImageUrl) only once after successful upload. And use prefetched image in the components normally like <Imagesource={{uri: UserStore.profileImageUrl}}/>
Or should I always run Image.prefetch(UserStore.profileImageUrl) before using that image in the component, then only run <Imagesource={{uri: UserStore.profileImageUrl}}/>
Suppose, later on, the user changes their profile image by uploading a new image and after successful upload, I will prefetch the new image. Will the previously cached image still exist on the disk?
If yes, won't it occupy a lot of space in the device if there are lots of prefetched images?
Is there any way to manually remove the prefetched image from the disk?
With the above questions in mind, if there are alternate solutions to achieve caching of images when using react native with expo, could you please help me with it.
It was indeed a question that I was dealing with for a while, and I learned a few things about Image.prefetch:
In the current React-Native version (0.48), this method is still in progress. To be more precise:
the ios implementation is still incomplete.
There is no complete guide on it.
There is no way to clear cache (you can check if the url is cached, however as far as I know you cannot clear it now).
As a result, I don't suggest you use it. Regardless, if you want to know how the API works, it is how:
Purpose
The purpose is quite obvious I think, this API:
Prefetches a remote image for later use by downloading it to the disk cache
It means that you can use Image.prefetch(url) in your constructor or componentWillMount. It tries to fetch image asynchronically, then, render your page with some kind of an ActivityIndicator, Finally, when the image is successfully fetched you can re-render your component.
Image.prefetch(url) actually saves the image to disk (not memory), as a result, whenever or wherever you try to use
<Image source={{uri:url}}/>
At firsts it checks the list of caches urls, if you have prefetched that url before (and it is located on the disk), it won't bother to re-fetch (unless you run function `Image.prefetch(url)' again (I am not sure if it works properly).
The implications of this issue are so complicated. It means that if you prefetch an image inside one component (for example <Component1/>), when you try to show this specific image in another component (for example <Component12>), It won't fetch the image and just uses the disk cache.
Therefore, either don't use this Image.prefetch at all (until there is a complete API, with cache control) or use it at your own risk.
on Android
On Android, you have 3 APIs for prefetch, and only one of them is presented in the documentation:
prefetch:
var response = Image.prefetch(imageUrl,callbackFunction)
Image.prefetch can have an optional second argument callbackFunction, which a function that runs Before fetching image. It can be written in the following format:
var response = Image.prefetch(imageUrl,()=>console.log('Image is being fetched'))
It might be worthy to note that, callbackFunction can have an argument called requestId, (indicating the number of prefetch among all other prefetches) which can be then used to abort the fetch.
var response = Image.prefetch(imageUrl,(id)=>console.log(id))
Moreover, response is a promise, you can use .then to do more after the image is pre-fetched.
abortPrefetch
Image.abortPrefetch(requestId) ;
used to abort the pending prefetch. requestId used as argument is the same as the one seen in prefetch.
queryCache
Image.queryCache([url1,url2, ...])
.then((data)=>console.log(data));
Used to check if a certain url is already cached, and if so where is it cached (disk or memory)
on IOS
I think that only Image.prefetch(url) is currently available on IOS, and there is no callback function to be called as the second argument.
if there are alternate solutions to achieve caching of images when
using react native with expo, could you please help me with it.
You may be interested in my higher order component module that adds performance related image caching and "permanent cache" functionality to the native <Image> component.
React Native Image Cache HOC
Tl;DR Code Example:
import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/rc29s4bz61uz.png'}} />
<CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/hhhim0kc5swz.jpg'}} permanent={true} />
</View>
);
}
}
The first image will be cached until the total local cache grows past 15 MB (by default) then cached images are deleted oldest first until total cache is below 15 MB again.
The second image will be stored to local disk permanently. People use this as a drop in replacement for shipping static image files with your app.
Personally I would not overcomplicate things by writing over files over and over when the file changes, that's just asking for a massive headache. Instead I would create a unique filename for each upload. So the user's profile pic the first time they upload is "profile-uniqueIdHere.jpg" and when they change their profile pic you just create a new file "profile-anotherUniqueIdHere.jpg" and update their user data to reflect the new file location. For help with creating unique Ids look at react-native-uuid.
I've been looking for a solution to my problem for a while and didn't get the answer.
I have a page with a VideoDisplay object and a "Take screenshot" button. I would like to get the screenshot from the streaming video and save it but I'm getting an error:
Security sandbox violation: BitmapData.draw: http://xxx/xxx.swf cannot access rtmp://xxx/xx/xx/. No policy files granted access.
The domain of the website from which I'm capturing the image and the rtmp is the same.
I'm using ImageSnapshot class to capture the screenshot. This is the function responsible for taking the screenshot:
function takeSnapshot()
{
var imageSnap:ImageSnapshot=ImageSnapshot.captureImage(mainPlayer);
var imageByteArray:ByteArray=imageSnap.data as ByteArray;
var fileRef:FileReference=new FileReference();
fileRef.save(imageByteArray, "screenshot.png");
}
I've got also a cross-domain policy file with a lin:
<allow-access-from domain="*" />
I'd be grateful for your help.
It seems someone has figured it out.
He was having an issue with not connecting to the stream correctly
Have a look
Flash Player cannot access bitmap data
or sound spectrum data for media
loaded from RTMP sources, although it
can display and play bitmaps and
sounds loaded from these servers.