Upload multiple images in swift using Alamofire

Question

I'm using the following code to upload a single image to a server:

private static func urlRequestWithComponents(urlString:String, parameters:Dictionary<String, String>, imageData:NSData?, imageName: String) -> (URLRequestConvertible , NSData) {

    // create url request to send
    let mutableURLRequest = NSMutableURLRequest(URL: NSURL(string: urlString)!)
    mutableURLRequest.HTTPMethod = Alamofire.Method.POST.rawValue
    let boundaryConstant = "myRandomBoundary12345";
    let contentType = "multipart/form-data;boundary="+boundaryConstant
    mutableURLRequest.setValue(contentType, forHTTPHeaderField: "Content-Type")


    // create upload data to send
    let uploadData = NSMutableData()
    if(imageData != nil && imageData?.length != 0) {
        // add image
        uploadData.appendData("\r\n--\(boundaryConstant)\r\n".dataUsingEncoding(NSUTF8StringEncoding)!)
        uploadData.appendData("Content-Disposition: form-data; name=\"\(imageName)\"; filename=\"\(StringHelper.sharedInstance.randomString(5)).png\"\r\n".dataUsingEncoding(NSUTF8StringEncoding)!)
        uploadData.appendData("Content-Type: image/png\r\n\r\n".dataUsingEncoding(NSUTF8StringEncoding)!)
        uploadData.appendData(imageData!)
    }
    // add parameters
    for (key, value) in parameters {
        uploadData.appendData("\r\n--\(boundaryConstant)\r\n".dataUsingEncoding(NSUTF8StringEncoding)!)
        uploadData.appendData("Content-Disposition: form-data; name=\"\(key)\"\r\n\r\n\(value)".dataUsingEncoding(NSUTF8StringEncoding)!)
    }
    uploadData.appendData("\r\n--\(boundaryConstant)--\r\n".dataUsingEncoding(NSUTF8StringEncoding)!)
    print("upload",parameters)
    // return URLRequestConvertible and NSData
    return (Alamofire.ParameterEncoding.URL.encode(mutableURLRequest, parameters: nil).0, uploadData)
}

How can I upload multiple images in single parameter by editing this code?

Fleur

how can to upload multiple images array in a single pararmeter – Fleur

You can make a struct that takes all your func params, then create a function that takes an array of those structs, then in the function you can iterate over the array, and then return an array of requests. If you want it all done at once because you need to do something when all of the uploads are completed, look into Operation queue or Dispatch Group – Radke

Please refer the link #28449337, #40527640 – Ralline

Answer 1

Swift 3 Just use "[]" with image upload param to make it array of images.

Alamofire.upload(multipartFormData: { multipartFormData in
            // import image to request
            for imageData in imagesData {
                multipartFormData.append(imageData, withName: "\(imageParamName)[]", fileName: "\(Date().timeIntervalSince1970).jpeg", mimeType: "image/jpeg")
            }
            for (key, value) in parameters {
                multipartFormData.append(value.data(using: String.Encoding.utf8)!, withName: key)
            }
        }, to: urlString,

            encodingCompletion: { encodingResult in
                switch encodingResult {
                case .success(let upload, _, _):
                    upload.responseJSON { response in

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

        })

Cassidycassie

Short and simple way to upload multiple images , Thanks – Fleur

The above code is to upload multiple images collection, according to the code you have images Data (Foundation.Data) in imagesData array. the problem was that it's overriding the previous image data value when creating mutipartFormData using iteration. But by appending [ ] square brackets to the end of the param name it's able to load data in the array. That's it. Same thing you can see in postman application to upload array of images. Thanks. Please upvote if its ok. – Cassidycassie

Can you please tell what withName: "(imageParamName)[]" in the above code?? – Stickleback

withName is the param accepting key name of media data, as its the value sent in ‘imageParamName’ variable, the use of square brackets ‘[ ]’ is to identify they this param contain array values. – Cassidycassie

ok..do we need to declare imageParamName before using it as it is giving me error on that name? – Stickleback

yes you need this string type variable/constant, that contain key value of your images param. – Cassidycassie

@RizwanAhmed Yes – Cassidycassie

@Anees please let me know your requirements and some code. – Cassidycassie

Does it work when app is in background? – Mccarron

Answer 2

This one helps me:

private func urlRequestWithComponentsForUploadMultipleImages(urlString:String, parameters:Dictionary<String, String>, imagesData:[Data], imageName: String) -> (URLRequestConvertible , Data) {

    // create url request to send
    var mutableURLRequest = URLRequest(url: NSURL(string: urlString)! as URL)

    mutableURLRequest.httpMethod = Alamofire.HTTPMethod.post.rawValue
    let boundaryConstant = "myRandomBoundary12345";
    let contentType = "multipart/form-data;boundary="+boundaryConstant
    mutableURLRequest.setValue(contentType, forHTTPHeaderField: "Content-Type")


    // create upload data to send
    var uploadData = Data()
    // add image
    for data in imagesData {
        uploadData.append("\r\n--\(boundaryConstant)\r\n".data(using: String.Encoding.utf8)!)
        uploadData.append("Content-Disposition: form-data; name=\"\(imageName)\"; filename=\"\(Date().timeIntervalSince1970).jpeg\"\r\n".data(using: String.Encoding.utf8)!)
        uploadData.append("Content-Type: image/jpeg\r\n\r\n".data(using: String.Encoding.utf8)!)
        uploadData.append(data)
    }
    // add parameters
    for (key, value) in parameters {
        uploadData.append("\r\n--\(boundaryConstant)\r\n".data(using: String.Encoding.utf8)!)
        uploadData.append("Content-Disposition: form-data; name=\"\(key)\"\r\n\r\n\(value)".data(using: String.Encoding.utf8)!)
    }
    uploadData.append("\r\n--\(boundaryConstant)--\r\n".data(using: String.Encoding.utf8)!)
    print("upload",parameters)
    return (mutableURLRequest , uploadData)
}

Fleur

Answer 3

here is my solution and it will work 100% no bugs..

        Alamofire.upload(multipartFormData: { (multipartFormData : MultipartFormData) in

            let count = imageToUpload.count

            for i in 0..<count{
                multipartFormData.append(imageToUpload[i], withName: "morephoto[\(i)]", fileName: "photo\(i).jpeg" , mimeType: "image/jpeg")

            }
            for (key, value) in parameterrs {

                    multipartFormData.append((value as AnyObject).data(using: String.Encoding.utf8.rawValue)!, withName: key)
            }
            print(multipartFormData)
        }, to: url!) { (result) in

                switch result {
                case .success(let upload, _ , _):

                    upload.uploadProgress(closure: { (progress) in

                        print("uploding: \(progress.fractionCompleted)")
                    })

                    upload.responseJSON { response in

                    print(response.result.value!)
                    let resp = response.result.value! as! NSDictionary
                    if resp["status"] as! String == "success"{
                        print(response.result.value!)
                        let alert = UIAlertController(title: "Alert", message: "Image Upload Successful", preferredStyle: UIAlertControllerStyle.alert)
                        alert.addAction(UIAlertAction(title: "Okay", style: UIAlertActionStyle.default, handler: nil))
                        self.present(alert, animated: true, completion: nil)


                    }
                    else{

                    }


                }

            case .failure(let encodingError):
                print("failed")
                print(encodingError)

            }
        }

in this the imagetoupload array is the array of image data which i have made before.

Coloquintida

Answer 4

It looks like this question was already answered on SO, probably in multiple places. Here is one link I found:

How to upload multiple images in multipart using Alamofire?

I'll paste their solution for convenience but they said it works for Swift 3.x:

//MARK: - upload multiple photos

func uploadImagesAndData(params:[String : AnyObject]?,image1: UIImage,image2: UIImage,image3: UIImage,image4: UIImage,headers : [String : String]?, completionHandler:@escaping CompletionHandler) -> Void {

    let imageData1 = UIImageJPEGRepresentation(image1, 0.5)!
    let imageData2 = UIImageJPEGRepresentation(image2, 0.5)!

    let imageData3 = UIImageJPEGRepresentation(image3, 0.5)!

    let imageData4 = UIImageJPEGRepresentation(image4, 0.5)!


    Alamofire.upload(multipartFormData: { multipartFormData in

            for (key, value) in params! {
                if let data = value.data(using: String.Encoding.utf8.rawValue) {
                    multipartFormData.append(data, withName: key)
                }
            }

            multipartFormData.append(imageData1, withName: "file", fileName: "image.jpg", mimeType: "image/jpeg")
            multipartFormData.append(imageData2, withName: "file", fileName: "image.jpg", mimeType: "image/jpeg")
            multipartFormData.append(imageData3, withName: "file", fileName: "image.jpg", mimeType: "image/jpeg")
            multipartFormData.append(imageData4, withName: "file", fileName: "image.jpg", mimeType: "image/jpeg")

    },
        to: K_BASEURL + K_API_LOGINDATA, encodingCompletion: { encodingResult in
            switch encodingResult {
            case .success(let upload, _, _):
                upload
                    .validate()
                    .responseJSON { response in
                        switch response.result {
                        case .success(let value):
                            print("responseObject: \(value)")
                        case .failure(let responseError):
                            print("responseError: \(responseError)")
                        }
                }
            case .failure(let encodingError):
                print("encodingError: \(encodingError)")
            }
    })

The solution appears to be based off the recommended approach detailed in the Alamofire documentation here: https://github.com/Alamofire/Alamofire#uploading-multipartformdata

Alamofire.upload(
multipartFormData: { multipartFormData in
    multipartFormData.append(unicornImageURL, withName: "unicorn")
    multipartFormData.append(rainbowImageURL, withName: "rainbow")
},
to: "https://httpbin.org/post",
encodingCompletion: { encodingResult in
    switch encodingResult {
    case .success(let upload, _, _):
        upload.responseJSON { response in
            debugPrint(response)
        }
    case .failure(let encodingError):
        print(encodingError)
    }
})

Sap