I am trying to upload an image to Firebase Storage using Flutter Web. I have followed many tutorials online on how to go about this, but I end up with the same error.
This is my code for upload
pickImageFromGallery() async {
imageFile = await ImagePickerWeb.getImageInfo;
setState(() {
_image = imageFile!.fileName!;
});
}
Future<void> uploadFile(
MediaInfo mediaInfo, String ref, String fileName) async {
try {
String mimeType = mime(path.basename(mediaInfo.fileName!))!;
final String extension = extensionFromMime(mimeType)!;
var metadata = fb.UploadMetadata(
contentType: mimeType,
);
fb.StorageReference storageReference =
fb.storage().ref('images').child('$fileName.$extension');
fb.UploadTaskSnapshot uploadTaskSnapshot =
await storageReference.put(mediaInfo.data, metadata).future;
Uri imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
setState(() {
_imageURL = imageUri.toString();
});
} catch (e) {
setState(() {
_imageURL = e.toString();
});
}
}
This is my Storage rules for public access
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write;
}
}
}
This is the error I get
FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response.
{
"error": {
"code": 404,
"message": "Not Found."
}
} (storage/unknown)
I have tried everything online that seems to be the solution, but there is no exact solution for this problem. Please help me figure out what may be the problem.
I am using Flutter Web, and the following packages:
firebase,
path,
image_picker_web,
mime_type
EDIT: Working Code
The problem seemed to be with the StorageReference. It worked once edited to the following:
fb.StorageReference storageReference = fb.storage().refFromURL('gs://storageBucket/').child('$fileName.$extension');
replace 'storageBucket' with your storageBucket name shown in Firebase Storage
I also experienced this, because i did not update the firebase storage rules to allow me to write to the database
I got the same error.
It happens when the path can't reach the bucket, which I found out means "404 not found". Check the bucket name in storageBucket in firebaseConfig. In my case, I was using Dotenv and left a space after the double quotes.
Dotenv was converting it to "" double quotation marks.
You can check the bucket name in the Firebase storage console. You don't need the "gs://" at the beginning or the "/" at the end. Just check the name. If you are using Dotenv, watch out for spaces.
I got this error because when I copied the REACT_APP_FIREBASE_STORAGE_BUCKET variables from the .env file used in my local environment to Netlify which is my hosting service, I included the quotation marks (that is, I entered 'my.secret.url' instead of my.secret.url.
Related
I am attempting to use presigned urls to download files on s3 to my flutter app. I have a lambda function that generates and passes the url. The presigned url works fine by itself but once it gets into flutter the data is somehow changed and AWS comes back with 404 error. It seems that somehow the token is corrupted.
If have tried parsing the data returned as XML, JSON and with no parsing what so ever. I have also changed the output from the lambda to be JSON or just send the url directly, neither solved the issue. None of these approaches have worked. Do I have to extract XML or something?
Here's the code that gets the url from a lambda call:
http.Response res1 = await http.get(url2);
dynamic data1 = cnv.jsonDecode(res1.body); //XmlDocument.parse(res1.body);
if (data1['theStatus'] == "error") {
String theStatus2 = "error";
return theStatus2;
} else {
(data1['theUrl']);
writeData(77, data1['theUrl']); //save in Hive
return data1;
}
Here's the code that uses the presigned url:
tFuture<File?> downloadFile(String url, String name) async {
final appStorage = await getApplicationDocumentsDirectory();
final file = File('${appStorage.path}/$name');
final response = await Dio().get(
url,
options: Options(
responseType: ResponseType.bytes,
followRedirects: false,
receiveTimeout: 0,
),
);
final raf = file.openSync(mode: FileMode.write);
raf.writeFromSync(response.data);
print('file saved');
await raf.close();
return file;
}
http.Response res1 = await http.get(url2);
final data1 = cnv.jsonDecode(res1.body); //XmlDocument.parse(res1.body);
if (data1['theStatus'] == "error") {
String theStatus2 = "error";
return theStatus2;
} else {
String theUrl = data1['theUrl'];
writeData(77, data1['theUrl']); //save in Hive
return theUrl;
}
If I hard code theUrl above with a presigned url from the browser accessing the lambda everything works fine...
I believe the issue is something to do with XML but when I use XML parse it throws an error no root... Any help appreciated.
Found the issue... my lambda function did not have the correct credentials. I found the solution using this:
How I can generated pre-signed url for different file versions of AWS S3 objects in NodeJS?
I try to work with firebaseStorage in flutter Web but I have a problem when I send the image to storage, because that send me a message like "UnsupportedError (Unsupported operation: Platform._operatingSystem)" and I dont know how to fix, also, I configure all firebase in my proyect but I dont know If i have to add firebase hosting and more, I would like to know how to fix
this is my code
String imagePath = '';
if (image.path != '')
imagePath = await setImage(image: image, random_id: randomId);
Future<String> setImage({
required File image,
required String random_id,
}) async {
final Reference reference = _storage.ref().child("imageSave");
TaskSnapshot updateImage = await reference.child(random_id).putFile(image);
String link = await updateImage.ref.getDownloadURL();
return link;
}
I added flutterFire or firebase cli to my project but nothing happens I keep with error "UnsupportedError (Unsupported operation: Platform._operatingSystem)"
Iam uploading files to firebase storage and the referenced url in cloudfirestore. Uploading and showing the file in the app works perfectly.
But when i try to delete an image, i get an error:
"[firebase_storage/object-not-found] No object exists at the desired reference."
I found out that the urls in firebasestorage and in cloudfirestore are not the same:
FirebaseStorage URL: https://firebasestorage.googleapis.com/v0/b/project-db68d.appspot.com/o/images%2FNvbKO7fZxv5KXsPy1lPJovsxiKXN%2Fimage_cropper_1662715164516_out.jpg?alt=media&token=2d591f0d-d2ee-4640-8133-57cea509d3d7 //Does not show the file in the browser
CloudFirestore URL: gs://project-db68d.appspot.com/images/NvbKO7fZxv5KXsPy1lPJovsxiKXN/image_cropper_1662715164516_out.jpg // Shows the file in der browser
I don`t understand why 2 different urls are created and how to fit it, when i print the url it shows the url from firestorage?
This is my code:
Iam working with ImagePicker, flutter_image_compress and image_cropper, latest versions flutter and packages
Future<File?> getImageFromCamera()async{
File receivedImageFromCamera = await _pickImageFromDevice.pickSingleImageFromGallerieOrCamera(ImageSource.camera);
File receivedCroppedImage = await _croppImageFromDevice.imageCropper(receivedImageFromCamera);
File? compressedFile = (await _imageCompressor.compressFile(receivedCroppedImage));
return compressedFile;
}
static Future<String> uploadFile(String destination,File file)async{
final ref = FirebaseStorage.instance.ref(destination);
final result = await ref.putFile(file);
final String fileUrl = (await result.ref.getDownloadURL()).toString();
return fileUrl;
}
if(compressedFile==null) return;
final fileName = basename(compressedFile.path);
final destination = 'images/$chatId/$fileName';
final fileUrl = await UploadFileToStorage.uploadFile(destination,compressedFile);
Both URLs are valid references to the file, but they have a different protocol. The gs:// protocol is specific to Google Cloud Storage, and is supported by very few clients. The https:// protocol is universal and supported almost everywhere.
So I already read about the topic but I simply didn't understand the solutions on stack.
I came up with this code:
Im saving a url looking like this:
final String myDataUrl = file.url;
print(myDataUrl);
blob:http://localhost:51947/2952a3b1-db6a-4882-a42a-8e1bf0a0ad73
& then Im trying to add it into Firebase Storage with the putString operator, that I guessed that suited me best while reading the Documentation. I thought that I have a Url and therefore should be able to upload it like this:
FirebaseStorage.instance
.ref()
.child("bla")
.putString(myDataUrl, format: PutStringFormat.dataUrl);
But it doesn't work, it says that:
Error: Invalid argument (uri): Scheme must be 'data': Instance of '_Uri'
So Im guessing that it somehow can't format my url to one that is accepted.
What can I do different to upload a blob successfully to firebase Storage?
-----------------Answer----------------------
Answer in the comment of the answer.
You have to convert your Blob to a Uint8List & upload it like:
Future<Uint8List> fileConverter() async {
final reader = html.FileReader();
reader.readAsArrayBuffer(file!);
await reader.onLoad.first;
return reader.result as Uint8List;
}
and then put it into your Storage:
Future uploadFile(String uid) async {
if (file == null) return;
final path = "nachweise/$uid";
Uint8List fileConverted = await fileConverter();
try {
FirebaseStorage.instance
.ref()
.child(path)
.putData(fileConverted)
.then((bla) => print("sucess"));
} on FirebaseException catch (e) {
return null;
}
}
The Firebase Storage SDKs can upload local data as either a File, an array of bytes, or a base-64 encoded string. The only URLs it accepts are so-called data URLs, which start with data:// and contain the complete data of the object. They cannot upload data directly from URLs that you more commonly see, such as http:// or https://.
You'll need to first download the data from that URL to the local device, and then upload it from there.
Or How to upload an image to s3 with public access by Flutter Amplify?
In my current flutter project, I can't pass ACL:public-read property while uploading files to S3 using amplify.
And because of this, whenever I'm uploading a new file to s3, I need to make it public manually.
So I just want to upload a new file with public read access for everyone.
I found some solutions for the Javascript project but not in the Flutter project.
Below is a method, I'm using to upload.
Future<String> uploadFile(String fileName, File local) async {
try {
Map<String, String> metadata = <String, String>{};
metadata['name'] = 'filename';
metadata['desc'] = 'A file';
S3UploadFileOptions options = S3UploadFileOptions(accessLevel: StorageAccessLevel.guest, metadata: metadata);
UploadFileResult result = await Amplify.Storage.uploadFile(key: fileName, local: local, options: options);
return result.key;
} catch (e) {
print('UploadFile Err: ' + e.toString());
}
return null;
}
I think you should be using Dio for declaring the client object that will be used for posting the request
You can find an example code in the following answer
So far Flutter Amplify is not giving any option to upload images with public access.
It always uploads with private read access.
So I updated a few things in my project as described below.
Before Amplify integration I was uploading images to S3 and storing that URL to my server, and wherever I have to display, I'm just fetching URL from my server and loading images.
But now I'm storing key(that is used to upload images to S3 by Amplify) to my server.
And to display the image I'm getting the image URL from Amplify using that key(which is stored in my server).
Amplify adds a token to the image URL with a default validity of 7 days
Future<String> getUrl(String key) async {
try {
S3GetUrlOptions options = S3GetUrlOptions(accessLevel: StorageAccessLevel.guest, expires: 10000);
GetUrlResult result = await Amplify.Storage.getUrl(key: key, options: options);
String url = result.url;
return url;
} catch (e) {
print('GetUrl Err: ' + e.toString());
}
return null;
}
So it can be displayed by ImageView.