manager-app/lib/Components/upload_image_container.dart

import 'dart:io';
import 'package:file_picker/file_picker.dart';
import 'package:manager_app/constants.dart';
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' show kIsWeb;

class UploadImageContainer extends StatefulWidget {
  final ValueChanged<List<File>?> onChanged;
  final ValueChanged<List<PlatformFile>?> onChangedWeb;
  const UploadImageContainer({
    Key? key,
    required this.onChanged,
    required this.onChangedWeb,
  }) : super(key: key);

  @override
  _UploadImageContainerState createState() => _UploadImageContainerState();
}

class _UploadImageContainerState extends State<UploadImageContainer> with SingleTickerProviderStateMixin {
  var filePath;
  File? fileToShow;
  String? fileToShowWeb;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      width: size.width *0.5,
      height: size.height *0.5,
      child: displayElement(),
      );
  }

  String getFileName(filePath) {
    return (filePath.toString().split('\\').last);
  }

  Future<void> filePicker() async {
    FilePickerResult? result;
    if (kIsWeb) {
      result = await FilePicker.platform.pickFiles(
        type: FileType.custom,
        dialogTitle: 'Sélectionner un fichier',
        allowMultiple: true,
        allowedExtensions: ['jpg', 'jpeg', 'png'],
      );

      if (result != null) {
        List<PlatformFile> files = result.files;

        setState(() {
          filePath = "Fichiers"; // Only show one picture
          fileToShowWeb = "Aucun aperçu possible"; // Only show one picture
          widget.onChangedWeb(files);
        });
      }
    } else {
      result = await FilePicker.platform.pickFiles(
        type: FileType.custom,
        dialogTitle: 'Sélectionner un fichier',
        allowMultiple: true,
        allowedExtensions: ['jpg', 'jpeg', 'png'],
      );

      if (result != null) {
        List<File> files = result.paths.map((path) => File(path!)).toList();
        var file = files[0];
        setState(() {
          filePath = file.path; // Only show one picture
          fileToShow = file; // Only show one picture
          widget.onChanged(files);
        });
      }
    }
    /*final file = OpenFilePicker()
      ..filterSpecification = {
        'Images (*.jpg; *.jpeg;*.png)': '*.jpg;*.jpeg;*.png',
        //'Video (*.mp4)': '*.mp4',
        //'All Files': '*.*'
      }
      ..defaultFilterIndex = 0
      ..title = 'Sélectionner un fichier';

    final result = file.getFile();

    if (result != null) {

      setState(() {
        filePath = result.path;
        fileToShow = result;
        widget.onChanged(result);
      });
    }*/
  }

  showFile() {
    if (getFileName(filePath).contains(".mp4")) {
      /*return FutureBuilder(
          future: loadFile(fileToShow),
          builder: (context, AsyncSnapshot<dynamic> snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              return Container(
                  height: 300,
                  child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text("La prévisualisation de la vidéo n'est pas disponible"),
                    ),
                    Icon(
                      Icons.ondemand_video_sharp,
                      size: 35,
                    ),
                  ],
                 ),
                //DartVLC(file: snapshot.data)
              );
            } else if (snapshot.connectionState == ConnectionState.none) {
              return Text("No data");
            } else {
              return Center(
                  child: Container(
                      height: 200,
                      child: LoadingCommon()
                  )
              );
            }
          }
      );*/
    } else {
      if (kIsWeb) {
        return null;
      } else {
        if(fileToShow != null) {
          return Image.file(
              fileToShow!,
              height: 200,
              fit:BoxFit.scaleDown
          );
        }
      }
    }
  }

  loadFile(File fileToShow) async {
    //return await Media.file(fileToShow);
    return null; // Useless no mp4 for now
  }

  displayElement() {
    if (fileToShow == null && fileToShowWeb == null) return Center(
      child: InkWell(
        onTap: () async {
          filePicker();
        },
        child: Container(
            decoration: BoxDecoration(
                color: kPrimaryColor,
                borderRadius: BorderRadius.circular(15)
            ),
            child: Padding(
              padding: const EdgeInsets.only(left: 25.0, right: 25.0, top: 15.0, bottom: 15.0),
              child: Text(
                "Ajouter un ou plusieurs fichiers",
                style: new TextStyle(color: kWhite),
              ),
            )
        ),
      ),
    );
    if (fileToShow != null || fileToShowWeb != null)
      return Container(
      margin: EdgeInsets.all(8.0),
      child: Card(
        color: kBackgroundColor,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
        child: InkWell(
          onTap: () async {
            filePicker();
          },
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.only(
                topLeft: Radius.circular(8.0),
                topRight: Radius.circular(8.0),
                ),
              child: showFile()
              ),
              ListTile(
                title: Text(getFileName(filePath)),
                subtitle: Text(filePath),
              ),
            ],
          ),
        ),
      ),
    );
  }
}