How to upload a file using file_picker package in flutter

Question

I need to send a file through EmailJS to my email from my flutter app. I created a template in EmailJS, and also created a form on flutter. I'm getting all text fields and dropbox data to my email. How I can send the picked images using file_picker.

Here I defined variables

final response = await http.post(
url,
headers: {
  'origin': 'http://localhost',
  'Content-Type': 'application/json',
},
body:json.encode({
  'service_id': serviceId,
  'template_id': templateId,
  'user_id': userId,
  'template_params':{
    'user_accident_number': accident_number,
    'user_contact_name': contact_name,
    'user_mobile_number': mobile_number,
    'user_email': email,

    'user_car_registration': car_registration,
    'user_driving_license': driving_license,
    'user_police report': police_report,
    'user_qatar_id': qatar_id,

    'user_city': city,
    //'user_service': service,
  }
}),


);
  print(response.body);
}
class CustomForm extends StatefulWidget {
  const CustomForm({Key? key}) : super(key: key);
  @override
  _CustomFormState createState() => _CustomFormState();
}
class _CustomFormState extends State<CustomForm> {
  final _formKey = GlobalKey<FormState>();
  final items = ['Select', 'Doha', 'Al Khor', 'Al Wakrah'];
  //String? value;
  String dropdownValue = 'Select';
  final dropdownValueKey = GlobalKey<FormState>();
  final controllerAccidentNumber = TextEditingController();
  final controllerContactName = TextEditingController();
  final controllerMobileNumber = TextEditingController();
  final controllerEmail = TextEditingController();
  final snackBar = SnackBar(
    content: const Text(
        'Successfully Sent'
    ),
  );
  var carRegistration = 'No Files Selected';
  var drivingLicense = 'No Files Selected';
  var policeReport = 'No Files Selected';
  var qatarId = 'No Files Selected';

Here I'm picking the image

Padding(
          padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
          child: RaisedButton(
            elevation: 0,
            onPressed: () async{
              final result = await FilePicker.platform.pickFiles();
              if(result == null) return;
              final PlatformFile file = result.files.first;
              setState(() {
                qatarId = file.name;
              });
              openFile(file);
            },
            color: Colors.white,
            shape: RoundedRectangleBorder(
              side: BorderSide(
                color: Colors.green,
                width: 1),
              borderRadius: BorderRadius.all(Radius.circular(0),
              ),
            ),
            child: Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text(
                    'Qatar ID',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.normal,
                      color: Colors.green,
                    ),
                  ),
                  Icon(
                    Icons.upload_sharp,
                    color: Colors.green,
                  )
                ],
              ),
            ),
          ),
        ),

Here I'm sending the data.

onPressed: () => [
                if (_formKey.currentState!.validate()) {
                   sendEmail(
                     accident_number: controllerAccidentNumber.text,
                     contact_name: controllerContactName.text,
                     mobile_number: controllerMobileNumber.text,
                     email: controllerEmail.text,
                     city: dropdownValue.toString(),
                     car_registration: carRegistration,
                     driving_license: drivingLicense,
                     police_report: policeReport,
                     qatar_id: qatarId,
                   ),
                  controllerAccidentNumber.clear(),
                  controllerContactName.clear(),
                  controllerMobileNumber.clear(),
                  controllerEmail.clear(),
                  setState(() {
                    carRegistration = '';
                    drivingLicense = '';
                    policeReport = '';
                    qatarId = '';
                  }),
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                      content: Text(
                          'Successfully sent'
                      ),
                    ),
                  ),
                },
              ],

Also, I'm getting the image names in the email. How I can get the Image.

Answer 1

To include files in a post method you need to use multipart

With a multipart POST request, you can also include files with binary content (images, various documents, etc.), in addition to the regular text values.

 var request = http.MultipartRequest('POST', Uri.parse(url));
  request.files.add(
    await http.MultipartFile.fromPath(
      'picture',
      filename
    )
  );
//normal text 
request.fields['key'] = 'value';
  var res = await request.send();

You can read more here or here