How to upload image using multipart request with Moya Swift?

Anh Pham picture Anh Pham · Mar 30, 2018 · Viewed 9.7k times · Source

I'm using Moya 10.0.1 and I'm having a problem when I'm trying to upload an image to the server.

I did follow the Multipart Upload example and this is my setup code:

typealias UpdateUserAvatarParameters = (userId: Int, image: UIImage)

enum APITarget {
    case updateUserAvatar(parameters: UpdateUserAvatarParameters)
}

extension APITarget: TargetType {

    public var baseURL: URL { return URL(string: "http://domain/api")! }

    public var path: String {
        switch self {
        case .updateUserAvatar: return "/postuserimage"
        }
    }

    public var method: Moya.Method {
        switch self {
        default: return .post
        }
    }

    public var task: Task {
        switch self {
        case .updateUserAvatar(let parameters):
            let imageData = UIImagePNGRepresentation(parameters.image) ?? Data()
            let userIdData = parameters.userId.string.data(using: String.Encoding.utf8) ?? Data()

            let imageMultipartFormData = MultipartFormData(provider: .data(imageData), name: "img", fileName: "user_avatar.jpeg", mimeType: "image/jpeg")
            let userIdMultipartFormData = MultipartFormData(provider: .data(userIdData), name: "cusId")

            return .uploadMultipart([imageMultipartFormData, userIdMultipartFormData])
        }
    }

    public var sampleData: Data {
        return Data()
    }

    public var headers: [String : String]? {
        switch self {
        case .updateUserAvatar: return ["Content-type" : "multipart/form-data"]
        default: return ["Content-type" : "application/json"]
        }
    }
}

However, when I make a request, I got an MoyaError:

let parameters = UpdateUserAvatarParameters(userId: 1, image: pickedImage)

provider.request(.updateUserAvatar(parameters: parameters), completion: { result in
    switch result {
    case .success(let response):
        do {
            try _ = response.filterSuccessfulStatusCodes()
            print("200 - 299: \(response.data)")
        } catch {
            print(error)  // This code will run because the statusCode is 500
        }

    case .failure(let error):
        print("Failure: \(error)")
    }
})

enter image description here

I have no idea about what I did wrong, I also don't know what is statusCode 500? Does anyone know why?

Addition, when I make a request with Alamofire with the same setup (url, parameters...), everything works normally:

Alamofire.upload(multipartFormData: { multipartFormData in
    let imageData = UIImagePNGRepresentation(pickedImage) ?? Data()
    let userIdData = userId.string.data(using: String.Encoding.utf8) ?? Data()

    multipartFormData.append(imageData, withName: "img", fileName: "user_avatar.jpeg", mimeType: "image/jpeg")
    multipartFormData.append(userIdData, withName: "cusId")
}, to: "http://domain/api/postuserimage", encodingCompletion: { result in
    switch result {
    case .success(let upload, _, _):
        upload.uploadProgress(closure: { progress in
            print("Upload Progress: \(progress.fractionCompleted)")
        })

        upload.responseJSON(completionHandler: { response in
            print(response.result.value)
        })

    case .failure(let encodingError):
        print(encodingError)
    }
})

Answer

Pratik Sodha picture Pratik Sodha · Apr 29, 2018
    var task: Task {
    switch self {
    case .updateProfilePic(let memberID, let image):
        let imageData = UIImageJPEGRepresentation(image, 1.0)
        let memberIdData = memberID.data(using: String.Encoding.utf8) ?? Data()
        var formData: [Moya.MultipartFormData] = [Moya.MultipartFormData(provider: .data(imageData!), name: "user_img", fileName: "user.jpeg", mimeType: "image/jpeg")]
        formData.append(Moya.MultipartFormData(provider: .data(memberIdData), name: "member_id"))
        return .uploadMultipart(formData)
    }

In Moya multipart request we have to pass parameter as multipartdata form along with it's key name.