Upload image to firebase storage via HTTP Post

Question

I want to upload an image into firebase storage in flutter web application. What i've done so far:

• Receive a signedURL via cloud functions; as described here Google guideline: Create signed URL - at the bottom of the article
• Load the image from local file via flutter package "image_picker_web" Package-Link
• the picker provides (Image-)Widget, Uint8List, html.File
• try to upload image via MultipartRequest to the signedURL, BUT receive an Error: XMLHttpRequest error , but without any further details.

My code for the MultipartRequest (bytes of type Uint8List):

var multipartFile = http.MultipartFile.fromBytes(
  'image', bytes, filename: 'test.jpeg', // optional
  contentType: new MediaType('image', 'jpeg'),
);
var uri = Uri.parse(url);
var request = http.MultipartRequest("POST", uri)
  ..files.add(multipartFile);
var response = await request.send();
if (response.statusCode == 200) print('Uploaded!');
response.stream.transform(utf8.decoder).listen((value) {
    print(value);
  });

...i also tried with stream:

var stream = http.ByteStream.fromBytes(bytes);
var multipartFile = new http.MultipartFile('file', stream, bytes.length,
      filename: 'test.jpeg', contentType: new MediaType('image', 'jpeg'));

I assume there is something wrong with the image data/type (MultipartFile) or the url doesn't work or the complete MultipartRequest doesn't conform to firebase storage

Does anybody has a solution for this or how can i investigate the problem further?

Answer 1

If you check your browser console, you will most probably be getting a CORS error.

There is a better way to upload an image to Firebase, here is the code to upload the image, and receive the URL where it is stored.

import 'dart:async';
import 'package:firebase/firebase.dart' as fb;
import 'dart:html' as html;

String url;

Future<String> uploadProfilePhoto(html.File image, {String imageName}) async {
  try {
    //Upload Profile Photo
    fb.StorageReference _storage = fb.storage().ref('displayPhotos/$imageName');
    fb.UploadTaskSnapshot uploadTaskSnapshot = await _storage.put(image).future;
    // Wait until the file is uploaded then store the download url
    var imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
    url = imageUri.toString();
  } catch (e) {
    print(e);
  }
  return url;
}