Flutter의 파일 업로드(File Upload) 방법

Flutter 애플리케이션에서 파일 업로드 기능은 사용자가 로컬 파일을 서버로 업로드할 수 있게 해주는 중요한 기능입니다. 이를 통해 사용자는 사진, 비디오, 문서 등을 서버에 업로드할 수 있습니다. 이번 글에서는 Flutter에서 파일 업로드를 구현하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. 파일 선택 패키지 설치

Flutter 애플리케이션에서 파일을 선택하고 업로드하기 위해 image_picker 및 http 패키지를 설치합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

 

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^0.8.4+4
  http: ^0.13.3

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. Android 설정

Android 프로젝트에서 파일 선택을 사용하려면 AndroidManifest.xml 파일을 수정해야 합니다. android/app/src/main/AndroidManifest.xml 파일에 다음 권한을 추가합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.your_project_name">
    <application>
        ...
    </application>
    <uses-permission android:name="android.permission.CAMERA"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
</manifest>

 

3. iOS 설정

iOS 프로젝트에서 파일 선택을 사용하려면 Info.plist 파일을 수정해야 합니다. ios/Runner/Info.plist 파일에 다음 설정을 추가합니다.

<key>NSCameraUsageDescription</key>
<string>We need your permission to use the camera</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need your permission to access the photo library</string>

 

4. 파일 선택 및 업로드 구현

이제 Flutter 애플리케이션에서 파일을 선택하고 서버로 업로드하는 기능을 구현해보겠습니다. image_picker 패키지를 사용하여 파일을 선택하고, http 패키지를 사용하여 파일을 서버로 업로드합니다.

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:http/http.dart' as http;
import 'dart:io';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FileUploadExample(),
    );
  }
}

class FileUploadExample extends StatefulWidget {
  @override
  _FileUploadExampleState createState() => _FileUploadExampleState();
}

class _FileUploadExampleState extends State<FileUploadExample> {
  File? _image;
  final picker = ImagePicker();
  bool _isUploading = false;

  Future<void> _pickImage() async {
    final pickedFile = await picker.pickImage(source: ImageSource.gallery);
    if (pickedFile != null) {
      setState(() {
        _image = File(pickedFile.path);
      });
    }
  }

  Future<void> _uploadFile() async {
    if (_image == null) return;

    setState(() {
      _isUploading = true;
    });

    var request = http.MultipartRequest(
      'POST',
      Uri.parse('https://your-server.com/upload'),
    );
    request.files.add(await http.MultipartFile.fromPath('file', _image!.path));

    var response = await request.send();

    if (response.statusCode == 200) {
      print('File uploaded successfully');
    } else {
      print('File upload failed');
    }

    setState(() {
      _isUploading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('File Upload Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _image == null ? Text('No image selected.') : Image.file(_image!),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Pick Image'),
            ),
            SizedBox(height: 20),
            _isUploading
                ? CircularProgressIndicator()
                : ElevatedButton(
                    onPressed: _uploadFile,
                    child: Text('Upload Image'),
                  ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 사용자가 갤러리에서 이미지를 선택하고, 선택한 이미지를 서버로 업로드하는 예제입니다. ImagePicker 클래스를 사용하여 이미지를 선택하고, http.MultipartRequest 클래스를 사용하여 파일을 업로드합니다.

 

반응형

 

 

5. 파일 업로드 상태 표시

파일 업로드 중에 사용자가 업로드 상태를 확인할 수 있도록 업로드 상태를 표시하는 방법을 추가할 수 있습니다. 이를 위해 CircularProgressIndicator를 사용하여 업로드 중임을 표시하고, 업로드가 완료되면 결과를 화면에 표시합니다.

 

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('File Upload Example')),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _image == null ? Text('No image selected.') : Image.file(_image!),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _pickImage,
            child: Text('Pick Image'),
          ),
          SizedBox(height: 20),
          _isUploading
              ? CircularProgressIndicator()
              : ElevatedButton(
                  onPressed: _uploadFile,
                  child: Text('Upload Image'),
                ),
        ],
      ),
    ),
  );
}

 

위 코드는 업로드 중일 때 CircularProgressIndicator를 표시하고, 업로드가 완료되면 업로드 버튼을 다시 표시합니다.

6. 파일 업로드 결과 처리

파일 업로드가 성공적으로 완료되면 서버로부터 응답을 받아 결과를 처리할 수 있습니다. 예를 들어, 업로드된 파일의 URL을 받아 화면에 표시할 수 있습니다.

Future<void> _uploadFile() async {
  if (_image == null) return;

  setState(() {
    _isUploading = true;
  });

  var request = http.MultipartRequest(
    'POST',
    Uri.parse('https://your-server.com/upload'),
  );
  request.files.add(await http.MultipartFile.fromPath('file', _image!.path));

  var response = await request.send();

  if (response.statusCode == 200) {
    var responseData = await http.Response.fromStream(response);
    var fileUrl = responseData.body;
    print('File uploaded successfully: $fileUrl');
  } else {
    print('File upload failed');
  }

  setState(() {
    _isUploading = false;
  });
}

 

위 코드는 업로드된 파일의 URL을 서버로부터 받아 출력하는 예제입니다.

결론

Flutter 애플리케이션에서 파일 업로드 기능을 구현하면 사용자가 로컬 파일을 서버로 업로드할 수 있습니다. image_picker 패키지를 사용하여 파일을 선택하고, http 패키지를 사용하여 파일을 업로드하는 방법을 통해 파일 업로드 기능을 구현할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 파일 업로드를 효율적으로 사용해보세요. 파일 업로드 기능을 통해 애플리케이션의 기능을 확장하고, 사용자 경험을 향상시킬 수 있습니다.