Upload image from Windows to web server and create virtual URL with .png extension

Question

I am trying upload an image to a web server and have it stored temporarily so that another process can manipulate it. That other process requires that it be a URL with image file extension.

For example:

http://localhost:XXXXX/image.jpg
http://localhost:XXXXX/image.png (etc, etc.)

It can't be a blob or a data URL. It must be an image URL with a png/jpg/jpeg extension so that this 'other' process can do something with the image URL.

I tried to do this in Flutter using an image_picker and a http.MultipartRequest, but my request response is returning 404. I noticed that the object returned by the MultipartFile.fromBytes method has an error:

<getObject: type 'Null' is not a subtype of type 'InstanceRef' in type cast>

Here is the method that allows the user to pick an image and where I attempt to create a URL :

void processImage() async {
  final imagepicker = ImagePicker();

  var image = await imagepicker.pickImage(source: ImageSource.gallery);

  if (image == null) {
    return null;
  } else {
    var fname = image.name;
    var imageAsBytes = await image.readAsBytes();
    var postUri = Uri.parse('${Uri.base}$fname');

    var request = http.MultipartRequest('POST', postUri);
    
    // No exception thrown, but multipartFile has an an error: 
    // <getObject: type 'Null' is not a subtype of type 'InstanceRef' in type cast>
    var multipartFile = http.MultipartFile.fromBytes('data', imageAsBytes, filename: fname, contentType: http_parser.MediaType('image', 'png'));

    request.files.add(multipartFile);
    var response = await request.send();

    setState(() {
      if (response.statusCode == 200) {
        // do some stuff on the image URL
        sourceTextController.text = "stuff done to image url";
      } else {
        sourceTextController.text = "UPLOAD FAILED: ${response.statusCode.toString()}";
      }
    });
  }
}

Here is what the local variables look like upon inspection after the request is sent:

image: Xfile
imageAsBytes: NativeUint8List ([137, 80, 78, 71, 13, 10, ... ])
imagepicker: ImagePicker
multipartFile: MultipartFile
  <getObject: type 'Null' is not a subtype of type 'InstanceRef' in type cast>

** I don't think the rest matters, but I'll include it **

postUri: _Uri (http://localhost:XXXXX/#/test_image.png)
  _fragment: "/test_image.png"
  _host: "localhost"
  _port: XXXXX
  _query: null
  _text: "http://locahost:XXXXX/#/test_image.png"
  _userInfo: ""
  hashCode: null
  path: "/"
  pathSegments: null
  queryParametersAll: null
  scheme: "http"
request: MultipartRequest (POST http://localhost:XXXXX/#/test_image.png)
  _contentLength: null
  _finalized: true
  _followRedirects: true
  _maxRedirects: 5
  _persistentConnection: true
  fields: Map (0 items)
  files: List (1 item)
    [0]: MultipartFile
      <getObject: type 'Null' is not a subtype of type 'InstanceRef' in type cast>
  headers: CustomHashMap<String, String> ({content-type: multipart/form-data; boundary=dart-http-boundary-7ORdZa_c0fyWMIBgmA9P5aAwFJMG+wt13NdCqy.-AlgWmy6csvP})
  method: "POST"
  url: ** same as postUri above **
response: StreamedResponse
  <getObject: type 'Null' is not a subtype of type 'InstanceRef' in type cast>

I've researched following instructions give here and here among several others. I tried hardcoding the image byte data as a List but that made no difference. I've also attempted to move this code to javascript and attempt something similar using fetch, but no dice.

Upload image from Windows to web server and create virtual URL with .png extension

0 Answers0