How to upload images in server using flutter with Laravel API? I tried using getx, its returning null. also I have image_picker and image_cropper package in my pubspec.yaml

CodePudding user response：

Select Image from Gallery using File Picker

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
class ImageScreen extends StatefulWidget {
  ImageScreen();
  @override
  State<ImageScreen> createState() => _ImageScreenState();
}

class _ImageScreenState extends State<ImageScreen> {
  File file;

  Future<File> uploadImage() async {
    FilePickerResult result = await FilePicker.platform.pickFiles();

    if (result != null) {
      setState(() {
        file = File(result.files.single.path);
      });
      print(result.files.single.path);

    } else {
      // User canceled the picker
    }
    return file;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          uploadImage();
        },
        child: Container(
          color: Colors.green,
          padding: EdgeInsets.all(5),
          child: Text('Upload Image', style: TextStyle(fontSize: 16, color: Colors.white),)
        ),
      ),
    );
  }
}

Uploading Image to the server using http.multipartFile

  static Future<dynamic> uploadImage({File file}) async {
    try {
      http.MultipartRequest request = new http.MultipartRequest("POST", _uri);
      http.MultipartFile multipartFile = await http.MultipartFile.fromPath('file_name', file.path);
      request.files.add(multipartFile);
      var streamedResponse = await request.send();
      var response = await http.Response.fromStream(streamedResponse);
      if (response.statusCode == 200 ) {
        return jsonDecode(response.body);
      }
    }
    catch (e) {
      return null;
    }
  }

CodePudding user response：

final images = <File>[].obs;

Use this method for picking up images

Future pickImage(ImageSource source) async {
    ImagePicker imagePicker = ImagePicker();
    XFile pickedFile = await imagePicker.pickImage(source: source, imageQuality: 80);
    File imageFile = File(pickedFile.path);
    print(imageFile);
    if (imageFile != null) {
        images.add(imageFile);
    } else {
      Get.showSnackbar(GetSnackBar(message: "Please select an image file"));
    }
  }

Use this for uploading images to the server with your specific url.As I have used dio for uploading.You can use http as well.

    Future<String> uploadImage(File file) async {
        String fileName = file.path.split('/').last;
// you can edit it for your own convenience
        var _queryParameters = {
          'api_token': 'your token if required',
        };

        Uri _uri = 'Your base url'
    
        var formData = FormData.fromMap({
          "file": await MultipartFile.fromFile(file.path, filename: fileName),
        });
        var response = await dio.post(_uri, data: formData);
        print(response.data);
        if (response.data['data'] != false) {
          return response.data['data'];
        } else {
          throw new Exception(response.data['message']);
        }
      }