1

I pick file from this line

import 'dart:html';

import 'package:file_picker/file_picker.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
...
            TextButton(
              onPressed: () async{
                var picked = await FilePicker.platform.pickFiles();
                if (picked != null) {
                  print(picked.files.first.name);
                  File tempFile = File(picked.files ,picked.files.first.name);
                  print(tempFile);
                  setState(() {
                    _pickedFile = tempFile;
                    _isEnable = true;
                  });
                }
              },

And pass value to submit File using this function

import 'dart:html';

import 'package:shared_preferences/shared_preferences.dart';
import 'package:dio/dio.dart';
import '../constants.dart';


Future<Response> uploadFile(
    File? file,
    int currentMaxDownload,
    int currentExpiryOption,
    String? password
) async {
  print('Input Expire date in seconds from now: ${currentExpiryOption}');
  var utcNow = DateTime.now().toUtc();
  print('UTC Now: $utcNow');
  var trueExpiryDate = utcNow.add(Duration(seconds: currentExpiryOption));
  print('True expiry date: $trueExpiryDate');
  print('fileName: ${file!.name}');
  FormData formData = FormData.fromMap({
    // "file": await MultipartFile.fromFile(file.name, filename:file.name),
    "file": File(file, file.name),
    "max_downloads": currentMaxDownload,
    "expire_date": trueExpiryDate,
    "password": password
  });


  final prefs = await SharedPreferences.getInstance();
  String? value = prefs.getString('jwt');
  print('toekn from disk: $value');

  var dio = Dio();
  var response = await dio.post(
      '$backendUrl/api/uploads/',
      data: formData,
      options: Options(
        headers: {
          'Authorization': 'token $value'
        }
      )
  );
  return response;
}

Problem:
Because I am using dart:html which is not dart:io. I can't use MultipartFile in my code. I had tried putting file as below "file": File(file, file.name), But it raise error at compiled time.

lib/backend_requests/post_file.dart:23:18: Error: The argument type 'File' can't be assigned to the parameter type 'List<Object>'.
 - 'File' is from 'dart:html'.
 - 'List' is from 'dart:core'.
 - 'Object' is from 'dart:core'.
    "file": File(file, file.name),

Question
How does Flutter web pick and upload any file to server backend?

1 Answer 1

1

I have to change datatype

  1. Change input datatype to FilePickerResult
    FilePickerResult? picked = await FilePicker.platform.pickFiles();
  2. Do not use dart:html. Use dart:io
  3. Use MultipartFile.fromBytes since this is web. Reference
import 'package:file_picker/file_picker.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:dio/dio.dart';
import '../constants.dart';


Future<Response> uploadFile(
    FilePickerResult? picked,
    int currentMaxDownload,
    int currentExpiryOption,
    String? password
) async {
  print('Input Expire date in seconds from now: ${currentExpiryOption}');
  var utcNow = DateTime.now().toUtc();
  print('UTC Now: $utcNow');
  var trueExpiryDate = utcNow.add(Duration(seconds: currentExpiryOption));
  print('True expiry date: $trueExpiryDate');
  FormData formData = FormData.fromMap({
      "file": await MultipartFile.fromBytes(
      picked!.files.first.bytes as List<int>, filename: picked.files.first.name
    ),
    "max_downloads": currentMaxDownload,
    "expire_date": trueExpiryDate,
    "password": password
  });
Sign up to request clarification or add additional context in comments.

1 Comment

flutter web doesn't support dart:io.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.