Display (and NOT download) image from firebase storage
This is likely due to the file type application/octet-stream instead of image/png. application/octet-stream is the default value when you upload to Firebase Storage.
How to change to image/png
First, create a metadata object (or add to existing metadata) that has the field contentType
const metadata = {
contentType: 'image/png',
};
Then, upload the file as you would normally, including the metadata as the 3rd argument.
const uploadTask = uploadBytes(storageRef, file, metadata);
You can then use the download URL normally, showing the image instead of downloading it.
Example in Firebase Docs of uploading with metadata
Example in Firebase Docs of adding metadata later
Note: If you use other file formats for images, you can use these MIME types for other image and file formats.
How to download and view images from the new Firebase Storage?
Try
first getting reference to the image you want to download using
let reference = FIRStorage.storage().reference("uploads/sample.jpg")
If you know the size of image is low - like 1-2 mb max . download the image in memory
reference.dataWithMaxSize(1 * 1024 * 1024) { (data, error) -> Void in
if (error != nil) {
print(error)
} else {
let myImage: UIImage! = UIImage(data: data!)
}
}
This will be the quickest and easy way to download directly from Firebase Storage.
However there are cases when you want the progress blocks and certain other things like caching. In such cases you could use any third party like Alamofire to download the image from the url you get from Firebase Storage.
To get the url do something like this
reference.downloadURLWithCompletion { (URL, error) -> Void in
if (error != nil) {
// Handle any errors
} else {
print(URL)
// download image using NSURLSession or Alamofire
}
}
How to let user download an image from firebase storage on web app?
I was able to come up with a workaround.
<body>
<a id = 'tagID' href = '' download = ''>Download</a>
</body>
<script>
//create a reference to the image in the firebase storage by using the url
var httpsReference = storage.refFromURL(imageURL);
// Get the download URL
httpsReference.getDownloadURL()
.then((url) => {
// download image directly via url
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = (event) => {
var blob = xhr.response;
//create a file from the returned blob
var file = new File([blob], "image name", { type: blob.type });
//grab the a tag
a1 = document.getElementById('tagID');
//set the download attribute of the a tag to the name stored in the file
a1.download = file.name;
//generate a temp url to host the image for download
a1.href = URL.createObjectURL(file);
};
xhr.open('GET', url);
xhr.send();
});
</script>
Image will now download when a user clicks the anchor element.
Note: You can create the reference to storage with a direct path or with the url to google cloud as well. See the firebase docs: https://firebase.google.com/docs/storage/web/download-files
How to retrieve Image preview from Firebase Storage?
Glide library for Android automatically caches the images on your local device. So if the size of an image is 4MB, then the image on your local storage will be 4MB too. It's true that you can create a preview of an image by resizing it as needed in code, but the amount of data that is downloaded and the size of the image on the disk will remain the same.
So if you only need a small preview of a 4MB image, then you should also add the preview of that image to the Firebase Storage too. This kind of image is called the thumbnail of the image. You can create the thumbnail yourself in code, or you can use:
- Resize Images Extension from Firebase
Use this extension to create resized versions of an image uploaded to a Cloud Storage bucket.
So using this Extension, the hard work is done for you behind the scenes. So you'll be able to get only the thumbnail that will have the size of only a few KB. However, if you need the entire 4MB image, then you can access it on demand.
Download Multiple images from Firebase Realtime Database to device storage
I found the perfect solution to my problem. All I had to do was create an OnItemClick interface to get a different result for each item click and use Download manager to download the images.
override fun onItemClick(item: String, pos:Int) {
abstractData = item
positionItem = pos
if (checkSelfPermission(requireActivity(), Manifest.permission.WRITE_EXTERNAL_STORAGE) == PackageManager.PERMISSION_GRANTED ){
requestPermissions(arrayOf(Manifest.permission.WRITE_EXTERNAL_STORAGE), REQ_CODE)
}else{
startDownloading()
}
Toast.makeText(requireActivity(), "Saved to Internal storage/Pictures/AbstractWallpaper", Toast.LENGTH_LONG).show()
}
private fun startDownloading() {
val request = DownloadManager.Request(Uri.parse(abstractData))
request.setAllowedNetworkTypes(DownloadManager.Request.NETWORK_WIFI or DownloadManager.Request.NETWORK_MOBILE)
request.setTitle("Abstract Wallpaper")
request.setDescription("Your image is downloading")
request.allowScanningByMediaScanner()
request.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED)
request.setDestinationInExternalPublicDir(Environment.DIRECTORY_PICTURES, "AbstractWallpapers")
val manager = activity?.getSystemService(Context.DOWNLOAD_SERVICE) as DownloadManager
manager.enqueue(request)
Toast.makeText(requireActivity(), "Download is starting...", Toast.LENGTH_LONG).show()
}
IONIC - How to display image from firebase storage without having to download it
The download URL is just a normal URL and you can set it as the source of image.
Like in HTML <img src="theURL" />.
I looked up for Ionic and it looks like the syntax is:
<img [src]="imgurl">
All you have to do is get the download URL and set it as the source wherever you want to show it.
Related Topics
Opening Viewcontroller in Appdelegate While Keeping Tabbar
Horizontal Paging Uicollectionview with Automatic Item Size in a Vertical Stack View
Swift3 - How to Protect Secret Key
Why Is Uisearchcontroller Changing the Navigation Bar Colors
Clipping Sound with Opus on Android, Sent from iOS
How to Make Watchkit Extension App and My iPhone App Share the Same Icloud Databases
Passing Data Between Views in One Viewcontroller in Swift
Give Thumbnail Image with Uiactivityviewcontroller
Implementing State Restoration in iOS 14
Lineargravityfield() Is Not Affecting Physics Bodies in the Scene Scenekit
Programmatically Obtaining the Imei or Udid of an iOS Device
iOS 10.3 - How to Change App Icon Programmatically
Gmsmapview Animatetocameraposition Zoom in - Zoom Out Animation
Wkwebview: How to Preload Multiple Urls
Create Hash in Swift Using Key and Message
Binary Operator + Cannot Be Applied to Operands of Type Cgfloat Int