Closes #58

example/android/build.gradle

@@ -6,7 +6,7 @@ buildscript {
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.5.0'
+        classpath 'com.android.tools.build:gradle:3.6.3'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
     }
 }

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-all.zip

example/android/settings_aar.gradle

@@ -0,0 +1 @@
+include ':app'

lib/models/attachment.dart

@@ -0,0 +1,8 @@
+class PapercupsAttachment {
+  String? id;
+  String? fileName;
+  String? fileUrl;
+  String? contentType;
+
+  PapercupsAttachment({this.id, this.fileName, this.fileUrl, this.contentType});
+}

lib/models/message.dart

@@ -1,4 +1,6 @@
 // Imports
+import 'package:papercups_flutter/models/models.dart';
+
 import 'user.dart';
 import 'customer.dart';
 export 'user.dart';
@@ -34,6 +36,12 @@ class PapercupsMessage {
   /// The userID of the person sending. Is nullable is the person sending is a customer.
   int? userId;
 
+  /// The file ids of files to be sent, could be null if message does not contain files
+  List<String>? fileIds;
+
+  /// the metadata of files attached
+  List<PapercupsAttachment>? attachments;
+
   PapercupsMessage({
     this.accountId,
     this.body,
@@ -46,5 +54,7 @@ class PapercupsMessage {
     this.user,
     this.userId,
     this.customer,
+    this.fileIds,
+    this.attachments,
   });
 }

lib/models/models.dart

@@ -5,3 +5,4 @@ export 'customer.dart';
 export 'message.dart';
 export 'message.dart';
 export 'user.dart';
+export 'attachment.dart';

lib/utils/uploadFile.dart

@@ -0,0 +1,34 @@
+import 'dart:convert';
+import 'dart:typed_data';
+
+import 'package:http/http.dart';
+import '../models/models.dart';
+
+Future<List<PapercupsAttachment>> uploadFile(
+  Props p,
+  String filePath,
+) async {
+  List<PapercupsAttachment>? pa = [];
+  try {
+    var uri = Uri.parse("https://" + p.baseUrl + "/api/upload");
+    var client = MultipartRequest("POST", uri)
+      ..fields['account_id'] = p.accountId
+      ..files.add(await MultipartFile.fromPath('file', filePath));
+    var res = await client.send();
+    var charCodes = await res.stream.last;
+    var body = String.fromCharCodes(charCodes as Uint8List);
+    var data = jsonDecode(body)["data"];
+    pa.add(
+      PapercupsAttachment(
+        id: data["id"],
+        fileName: data["filename"],
+        fileUrl: data["file_url"],
+        contentType: data["content_type"],
+      ),
+    );
+  } catch (e) {
+    throw (e);
+  }
+  // client.close();
+  return pa;
+}

lib/widgets/chat.dart

@@ -141,6 +141,9 @@ class _ChatMessageState extends State<ChatMessage> {
     if (msg.userId != null) userSent = false;
 
     var text = msg.body!;
+    if (msg.fileIds != null && msg.fileIds!.isNotEmpty) {
+      text = msg.attachments!.first.fileName!;
+    }
     var nextMsg = widget.msgs![min(widget.index + 1, widget.msgs!.length - 1)];
     var isLast = widget.index == widget.msgs!.length - 1;
     var isFirst = widget.index == 0;

lib/widgets/sendMessage.dart

@@ -1,5 +1,11 @@
 //Imports
+import 'dart:io';
+
+import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter/foundation.dart' show kIsWeb;
+import 'package:papercups_flutter/utils/uploadFile.dart';
 import '../models/models.dart';
 import '../utils/utils.dart';
 import '../models/conversation.dart';
@@ -77,6 +83,100 @@ class _SendMessageState extends State<SendMessage> {
     );
   }
 
+  Widget _getFilePicker() {
+    if (kIsWeb) {
+      return IconButton(
+        icon: Icon(Icons.attach_file),
+        onPressed: () async {
+          try {
+            var picked = await FilePicker.platform.pickFiles();
+
+            if (picked != null && picked.files.first.path != null) {
+              uploadFile(widget.props, picked.files.first.path ?? '');
+            }
+          } on Exception catch (e) {
+            print('sendMessage: error in file picker web: $e');
+          }
+        },
+      );
+    } else if (Platform.isAndroid || Platform.isIOS) {
+      return PopupMenuButton<FileType>(
+        icon: Icon(Icons.attach_file),
+        onSelected: (type) async {
+          try {
+            final _paths = (await FilePicker.platform.pickFiles(
+              type: type,
+            ))
+                ?.files;
+            if (_paths != null && _paths.first.path != null) {
+              List<PapercupsAttachment> attachments =
+                  await uploadFile(widget.props, _paths.first.path ?? "");
+
+              List<String> fileIds =
+                  attachments.map((e) => e.id ?? "").toList();
+
+              if (attachments.isNotEmpty) {
+                _sendMessage(
+                  _msgFocusNode,
+                  _msgController,
+                  widget.customer,
+                  widget.props,
+                  widget.setCustomer,
+                  widget.conversation,
+                  widget.setConversation,
+                  widget.setConversationChannel,
+                  widget.conversationChannel,
+                  widget.socket,
+                  widget.setState,
+                  widget.messages,
+                  widget.sending,
+                  attachments,
+                  fileIds,
+                  true,
+                );
+              }
+            }
+          } on PlatformException catch (e) {
+            print('sendMessage: Error in file picker: $e');
+          } catch (ex) {
+            print(ex);
+          }
+        },
+        itemBuilder: (BuildContext context) => <PopupMenuEntry<FileType>>[
+          PopupMenuItem<FileType>(
+            value: FileType.any,
+            child: ListTile(
+              leading: CircleAvatar(
+                backgroundColor: widget.props.primaryColor,
+                foregroundColor: widget.textColor,
+                child: Icon(Icons.insert_drive_file_outlined),
+              ),
+              title: Text('File'),
+              contentPadding: EdgeInsets.all(0),
+            ),
+          ),
+          PopupMenuItem<FileType>(
+            value: FileType.image,
+            child: ListTile(
+              leading: CircleAvatar(
+                backgroundColor: widget.props.primaryColor,
+                foregroundColor: widget.textColor,
+                child: Icon(Icons.image_outlined),
+              ),
+              title: Text('Image'),
+              contentPadding: EdgeInsets.all(0),
+            ),
+          ),
+        ],
+      );
+    } else {
+      return IconButton(
+        icon: Icon(Icons.attachment_outlined),
+        onPressed: () {},
+      );
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return Container(
@@ -116,6 +216,7 @@ class _SendMessageState extends State<SendMessage> {
                 focusNode: _msgFocusNode,
               ),
             ),
+            _getFilePicker(),
             Container(
               height: 36,
               width: 36,
@@ -156,11 +257,14 @@ void _sendMessage(
   PhoenixSocket? socket,
   Function? setState,
   List<PapercupsMessage>? messages,
-  bool? sending,
-) {
+  bool? sending, [
+  List<PapercupsAttachment>? attachments,
+  List<String>? fileIds,
+  bool mediaMessage = false,
+]) {
   final text = tc.text;
   fn.requestFocus();
-  if (text.trim().isEmpty) return null;
+  if (text.trim().isEmpty && fileIds == null) return null;
   tc.clear();
   var timeNow = DateTime.now().toUtc();
 
@@ -172,6 +276,8 @@ void _sendMessage(
           createdAt: timeNow.toLocal(),
           sentAt: timeNow.toLocal(),
           customer: PapercupsCustomer(),
+          fileIds: fileIds,
+          attachments: attachments,
         ),
       );
     },
@@ -200,6 +306,7 @@ void _sendMessage(
                 "body": text,
                 "customer_id": customerDetails.id,
                 "sent_at": timeNow.toIso8601String(),
+                if (mediaMessage) "file_ids": fileIds,
               },
             );
             setState(() {});
@@ -214,6 +321,7 @@ void _sendMessage(
         "body": text,
         "customer_id": cu!.id,
         "sent_at": timeNow.toIso8601String(),
+        if (mediaMessage) "file_ids": fileIds,
       },
     );
   }

pubspec.yaml

@@ -15,6 +15,7 @@ dependencies:
   flutter_markdown: ">=0.5.2 <0.7.0"
   timeago: ">=2.0.30 <4.0.0"
   intl: ">=0.16.1 <0.18.0"
+  file_picker: ^3.0.1
 
 dev_dependencies:
   flutter_test: