upload image to server using Alamofire

Question

this is my code that I want to upload image to server using Alamofire, it not error but it can't push image to server. what should I do?

let url = URL(string: urlString)!
var urlRequest = URLRequest(url: url)
urlRequest.httpMethod = "POST"

let parameters = ["name": rname]

do {
    urlRequest.httpBody = try JSONSerialization.data(withJSONObject: parameters, options: [])
} catch {
    print(error)
}

urlRequest.setValue("application/json", forHTTPHeaderField: "Content-Type")
    let image = UIImage.init(named: "myImage")
    let imgData = UIImageJPEGRepresentation(image!, 0.2)!


Alamofire.upload(multipartFormData: { MultipartFormData in

        MultipartFormData.append(imgData, withName: "fileset", fileName: "name", mimeType: "image/jpg")


    },with: urlRequest,encodingCompletion: { encodingResult in

        switch encodingResult {

        case .success(let upload, _, _):

            upload.responseJSON { response in

                if let info = response.result.value as? Dictionary<String, AnyObject> {

                    if let links = info["links"] as? Dictionary<String, AnyObject> {

                        if let imgLink = links["image_link"] as? String {
                            print("LINK: \(imgLink)")
                        }
                    }
                }

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

score 81 · Accepted Answer · edited Apr 06 '18 at 10:57

81

Try below code

 let image = UIImage.init(named: "myImage")
 let imgData = UIImageJPEGRepresentation(image!, 0.2)!

 let parameters = ["name": rname] //Optional for extra parameter

Alamofire.upload(multipartFormData: { multipartFormData in
        multipartFormData.append(imgData, withName: "fileset",fileName: "file.jpg", mimeType: "image/jpg")
        for (key, value) in parameters {
                multipartFormData.append(value.data(using: String.Encoding.utf8)!, withName: key)
            } //Optional for extra parameters
    },
to:"mysite/upload.php")
{ (result) in
    switch result {
    case .success(let upload, _, _):

        upload.uploadProgress(closure: { (progress) in
            print("Upload Progress: \(progress.fractionCompleted)")
        })

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

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

edited Apr 06 '18 at 10:57

Muhammad Asyraf

1,748
15
20

answered Nov 10 '16 at 06:13

Ekta Padaliya

5,743
3
39
51

2

What is `rname` here? in `let parameters = ["name": rname]` – Abhishek Mitra May 23 '17 at 09:59
Not sure where rname came from. However, it appears this answer is very similar to a tutorial [here](https://www.raywenderlich.com/147086/alamofire-tutorial-getting-started-2) – Jeff Muir Jun 01 '17 at 06:13
1

@JeffMuir the tutorial does not cover this – iosMentalist Jul 10 '17 at 09:01
1

@iosMentalist that is true. I just wanted to share an example of how it is used. There is a detailed description of multipart form data at https://stackoverflow.com/questions/4526273/what-does-enctype-multipart-form-data-mean/28380690#28380690 . The conclusion from this information is that "name" and rname are optional. It is only intended to share more data about the file in separate parameters. They can be whatever you want. It depends on what the server wants. The key "name" is probably not the best name for a key. It is okay just to send the file. The project I have does just that. – Jeff Muir Jul 10 '17 at 23:00
1

@JeffMuir yes you are right. "rname" is nothing just Parameter that I have to send in server. – Ekta Padaliya Jul 11 '17 at 05:16
1

Just make sure all your values in parameters are string else it will result in a crash. – Ahsan Ebrahim Khatri Jul 30 '17 at 10:36
Thanks...! it was more helpful for us. – Kiran Jadhav Dec 19 '17 at 10:39
What if I want to upload image array to server? – Saurabh Mar 27 '18 at 07:03
@Saurabh i will make a new answer just for that – Muhammad Asyraf May 04 '18 at 10:12
@Saurabh please check answer of Muhammad. – Ekta Padaliya May 04 '18 at 12:19
Thanks for the answer @MuhammadAsyraf – Saurabh Jun 13 '18 at 10:28
@AhsanEbrahim I want to send a numeric value , What do i do? – Mohammad Razipour Oct 28 '18 at 21:52
@RaziPour1993 keep the parameters of type Any : Any and you will be able to send whatever datatype you want to send on the server. – Ahsan Ebrahim Khatri Oct 29 '18 at 07:40
@EktaPadaliya Good job...! Profile pic JPDawer ni exam sleep ma lagavelu hoy avu lage che :) :D haha! – Jigar Tarsariya Apr 03 '19 at 05:02
@JigarTarsariya Lol..!! Hows you ? – Ekta Padaliya Apr 03 '19 at 10:43
@JigarTarsariya Same here. :D – Ekta Padaliya Apr 03 '19 at 10:47
1

**multipartFormData.append(imgData, withName: "fileset",fileName: "file.jpg", mimeType: "image/jpg")** – J A S K I E R May 13 '20 at 16:33
case .success(request: let upload, : _, : _): this show me an error. the errror as follows "Pattern cannot match values of type 'URLRequest'".. how do i fix it. – Noorul Dec 04 '20 at 14:36
Mr.Noorul Please use this pod 'Alamofire', '~> 4.7' – M Hamayun zeb Jan 28 '21 at 09:46
can anyone tell me what's withName, fileName and mineType here, I have never done that – ajay negi Feb 11 '21 at 13:01

score 9 · Answer 2 · edited Jul 30 '17 at 11:16

let params: Parameters = ["name": "abcd" "gender": "Male"]
Alamofire.upload(multipartFormData:
    {
        (multipartFormData) in
        multipartFormData.append(UIImageJPEGRepresentation(self.yourimageView.image!, 0.1)!, withName: "image", fileName: "file.jpeg", mimeType: "image/jpeg")
        for (key, value) in params
        {
            multipartFormData.append((value as AnyObject).data(using: String.Encoding.utf8.rawValue)!, withName: key)
        }
}, to:yourUrl,headers:nil)
{ (result) in
    switch result {
    case .success(let upload,_,_ ):
        upload.uploadProgress(closure: { (progress) in
            //Print progress
        })
        upload.responseJSON
            { response in
                //print response.result
                if response.result.value != nil
                {
                    let dict :NSDictionary = response.result.value! as! NSDictionary
                    let status = dict.value(forKey: "status")as! String
                    if status=="1"
                    {  
                      print("DATA UPLOAD SUCCESSFULLY")
                    }
                }
        }                
    case .failure(let encodingError):
        break
    }   
}

Just make sure all your values in parameters are string else it will result in a crash. — Ahsan Ebrahim Khatri, Jul 30 '17 at 10:36
so if i have the paramter name of the webservice is logo where should i replace it in withName: "image" . or fileName: "file.jpeg" — Amr Angry, Nov 13 '17 at 19:41
I am getting this error while doing this though my parameters are not empty ...... error = "StartIndex cannot be less than zero. \nParameter name: startIndex"; — Nupur Sharma, Nov 22 '17 at 09:46

score 9 · Answer 3 · edited Aug 20 '20 at 13:27

Updated code to Swift 5.

In swift 5 there is a change in this line

let imageData = UIImageJPEGRepresentation(image!, 0.2)!

To like this

let imageData = image.jpegData(compressionQuality: 0.50)

Whole code to upload image

let param: [String:Any] = ["your_parameters"]
var image = UIImage()
image = UIImage(named: "edit.png")!
let imageData = image.jpegData(compressionQuality: 0.50)
print(image, imageData!)

AF.upload(multipartFormData: { (multipartFormData) in
        multipartFormData.append(imageData!, withName: "file", fileName: "swift_file.png", mimeType: "image/png")
        for (key, value) in param {
            multipartFormData.append("\(value)".data(using: String.Encoding.utf8)!, withName: key)
        }
    }, to: "your_url")
    { (result) in
        switch result {
        case .success(let upload, _, _):
            
            upload.uploadProgress(closure: { (progress) in
                //Print progress
                print("uploading \(progress)")
                
            })
            
            upload.responseJSON { response in
                //print response.result
                
            }
        case .failure( _): break
            //print encodingError.description
        }
    }
}

My Xcode cannot compile this code it this line: " to: "your_url")", it says "Cannot convert value of type '(_) -> ()' to expected argument type 'RequestInterceptor?'" — Ahmadreza, Jul 27 '19 at 08:14

score 7 · Answer 4 · answered May 22 '19 at 18:29

The only one working for me at this date:

let headers: HTTPHeaders = [
            /* "Authorization": "your_access_token",  in case you need authorization header */
            "Content-type": "multipart/form-data"
        ]


            AF.upload(
                multipartFormData: { multipartFormData in
                    multipartFormData.append(imageOrVideo!.jpegData(compressionQuality: 0.5)!, withName: "upload_data" , fileName: "file.jpeg", mimeType: "image/jpeg")
            },
                to: "http://35.227.31.145/new.php", method: .post , headers: headers)
                .response { resp in
                    print(resp)


            }

onmyway133 · Answer 5 · 2017-08-14T09:44:31.690

Need to specify name, fileName, mimeType, these are important to many servers

func upload(image: UIImage, completion: (URL?) -> Void) {
    guard let data = UIImageJPEGRepresentation(image, 0.9) else {
      return
    }

    Alamofire.upload(multipartFormData: { (form) in
      form.append(data, withName: "file", fileName: "file.jpg", mimeType: "image/jpg")
    }, to: "https://yourawesomebackend.com", encodingCompletion: { result in
      switch result {
      case .success(let upload, _, _):
        upload.responseString { response in
          print(response.value)
        }
      case .failure(let encodingError):
        print(encodingError)
      }
    })
  }

Initially I was just passing name and NOT fileName. Passing fileName worked for me! — iAkshay, Nov 18 '18 at 10:00

score 4 · Answer 6 · answered Jul 09 '18 at 10:03

Ok Bro I use this code with Swift 4 and Alamofire

import Foundation
import Alamofire

class UploadImageController: NSObject {

// MARK: - shared

static let shared  = UploadImageController()

// MARK: - init

let decoder = JSONDecoder()

// MARK: - uploadImageOnly

func uploadImageWith(endUrl: String, photo: UIImage?, parameters: [String : Any]?, headers: HTTPHeaders?, completion: @escaping (_ success: Bool, _ uploadImageResponse: UploadImageResponse?) -> Void ) {

    Alamofire.upload(multipartFormData: { (multipartFormData) in

        if let data = UIImageJPEGRepresentation(photo!, 0.5) {

            multipartFormData.append(data, withName: "invoice", fileName: "invoice.jpeg", mimeType: "invoice/jpeg")
        }

    }, usingThreshold: SessionManager.multipartFormDataEncodingMemoryThreshold, to: endUrl, method: .post, headers: headers) { (result) in

        switch result {

        case .failure(let error):
            print("UploadImageController.requestWith.Alamofire.usingThreshold:", error)
            completion(false, nil)

        case .success(request: let upload, streamingFromDisk: _, streamFileURL: _):

            upload.uploadProgress(closure: { (progress) in
                print("Upload Progress: \(progress.fractionCompleted)")
            })

            upload.responseJSON(completionHandler: { (response) in

                switch response.result {

                case .failure(let error):

                    print("UploadImageController.requestWith.Alamofire.upload.responseJSON:", error)

                    completion(false, nil)

                case .success( _):

                    print("UploadImageController.requestWith.Alamofire.upload.responseJSON Succes")
                    guard let data = response.data else { return }

                    do {

                        let uploadImageResponse = try self.decoder.decode(UploadImageResponse.self, from: data)

                        completion(true, uploadImageResponse)

                    } catch let jsonError {

                        print("Error serializing json.ProfileController.getProfile:", jsonError)
                        completion(false, nil)
                    }
                }
            })
        }
    }
}

// MARK: - uploadImageWithParameters

func uploadImageWithParametersAnd(endUrl: String, photo: UIImage?, parameters: [String : Any]?, headers: HTTPHeaders?, completion: @escaping (_ success: Bool, _ addInvoiceResponse: AddInvoiceResponse?) -> Void ) {

    Alamofire.upload(multipartFormData: { (multipartFormData) in

        if let data = UIImageJPEGRepresentation(photo!, 0.5) {

            multipartFormData.append(data, withName: "invoicePicture", fileName: "invoicePicture.jpeg", mimeType: "invoice/jpeg")
        }

        for (key, value) in parameters! {
            multipartFormData.append("\(value)".data(using: String.Encoding.utf8)!, withName: "\(key)")
        }


    }, usingThreshold: SessionManager.multipartFormDataEncodingMemoryThreshold, to: endUrl, method: .post, headers: headers) { (result) in

        switch result {

        case .failure(let error):
            print("UploadImageController.requestWith.Alamofire.usingThreshold:", error)
            completion(false, nil)

        case .success(request: let upload, streamingFromDisk: _, streamFileURL: _):

            upload.uploadProgress(closure: { (progress) in
                print("Upload Progress: \(progress.fractionCompleted)")
            })

            upload.responseJSON(completionHandler: { (response) in

                switch response.result {

                case .failure(let error):

                    print("UploadImageController.requestWith.Alamofire.upload.responseJSON:", error)

                    completion(false, nil)

                case .success( _):

                    print("UploadImageController.requestWith.Alamofire.upload.responseJSON Succes")
                    guard let data = response.data else { return }

                    do {

                        let addInvoiceResponse = try self.decoder.decode(AddInvoiceResponse.self, from: data)

                        completion(true, addInvoiceResponse)

                    } catch let jsonError {

                        print("Error serializing json.ProfileController.getProfile:", jsonError)
                        completion(false, nil)
                    }
                }
            })
        }
    }
 }
}

For example this AddInvoiceResponse

import Foundation

struct AddInvoiceResponse: Decodable {
    let id, message: String?
}

and here UploadImageResponse

import Foundation

struct UploadImageResponse: Codable {
    let id, message: String?
}

case .success(request: let upload, streamingFromDisk: _, streamFileURL: _): this show me an error. the errror as follows "Pattern cannot match values of type 'URLRequest'".. how do i fix it. — Noorul, Dec 04 '20 at 14:35

score 3 · Answer 7 · answered May 04 '18 at 10:24

Try below code For MultipleImage Upload. asked by @Saurabh.

However it is better to make upload 1 by 1 instead of uploading all at once.
because if it failed, it will only failed on 1 image. but upload all at once.if 1 file failed user need to restart the uploading process from the beginning.

nevertheless here is what you going have to do if you want to upload multiple data at once.

 let image1 = UIImage.init(named: "myImage1")
 let image2 = UIImage.init(named: "myImage2")
 let image3 = UIImage.init(named: "myImage3")
 let image4 = UIImage.init(named: "myImage4")
 let imgData1 = UIImageJPEGRepresentation(image!, 0.2)!
 let imgData2 = UIImageJPEGRepresentation(image!, 0.2)!
 let imgData3 = UIImageJPEGRepresentation(image!, 0.2)!
 let imgData4 = UIImageJPEGRepresentation(image!, 0.2)!


 let parameters = ["name": rname] //Optional for extra parameter

Alamofire.upload(multipartFormData: { multipartFormData in
        //loop this "multipartFormData" and make the key as array data
        multipartFormData.append(imgData1, withName: "fileset[0]",fileName: "file.jpg", mimeType: "image/jpg")
        multipartFormData.append(imgData2, withName: "fileset[1]",fileName: "file.jpg", mimeType: "image/jpg")
        multipartFormData.append(imgData3, withName: "fileset[2]",fileName: "file.jpg", mimeType: "image/jpg")
        multipartFormData.append(imgData4, withName: "fileset[3]",fileName: "file.jpg", mimeType: "image/jpg")
        for (key, value) in parameters {
                multipartFormData.append(value.data(using: String.Encoding.utf8)!, withName: key)
            } //Optional for extra parameters
    },
to:"mysite/upload.php")
{ (result) in
    switch result {
    case .success(let upload, _, _):

        upload.uploadProgress(closure: { (progress) in
            print("Upload Progress: \(progress.fractionCompleted)")
        })

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

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

Noted: multipartFormData are using append meaning it is an Array of request. you can loop and append more if needed.

score 3 · Answer 8 · answered Oct 08 '18 at 11:38

    let url = BaseViewController.API_URL + "uploads"
    let image = info[UIImagePickerControllerEditedImage] as? UIImage
    let imgData = UIImageJPEGRepresentation(image!, 0.2)!

    let parameters = [
                            "user_id" : UserDefaults.standard.value(forKey: "userId")!
    ]

    Alamofire.upload(multipartFormData: { multipartFormData in
        multipartFormData.append(imgData, withName: "uload_data",fileName: "file.jpg", mimeType: "image/jpg")
        for (key, value) in parameters {
            multipartFormData.append((value as AnyObject).data(using: String.Encoding.utf8.rawValue)!, withName: key)
        } //Optional for extra parameters
    },
                     to:url)
    { (result) in
        switch result {
        case .success(let upload, _, _):

            upload.uploadProgress(closure: { (progress) in
                print("Upload Progress: \(progress.fractionCompleted)")
            })

            upload.responseJSON { response in

                self.objHudHide()
                print(response.result.value)

                let jsonDict : NSDictionary = response.result.value as! NSDictionary

                print(jsonDict)
                if  jsonDict["status"] as! String == "Success"
                {


                    let detailDict : Dictionary = jsonDict["detail"] as! Dictionary<String,Any>

                    if let getTotalPrice = detailDict["total_price"]
                    {
                        self.lblTotalPrice.text = "$ \(getTotalPrice) + Free Shipping"
                    }

                    if  let getTotalSize = detailDict["total_upload_size"]
                    {
                        self.lblTotalSize.text = "Total Size : \(getTotalSize)"

                    }
                }
               else
                {

                let alertViewController = UIAlertController(title: NSLocalizedString("Alert!", comment: ""), message:"Something Went wrong please try again." , preferredStyle: .alert)
                let okAction = UIAlertAction(title: NSLocalizedString("Ok", comment: ""), style: .default) { (action) -> Void in

                }
                alertViewController.addAction(okAction)
                self.present(alertViewController, animated: true, completion: nil)


        }
            }

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

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. — Alex Riabov, Oct 08 '18 at 11:55
this question not only help for multipart uploading but also how to handle json Data and also how to pass extra parameter with image in swift4 — Davender Verma, Oct 09 '18 at 04:41

score 2 · Answer 9 · answered Mar 01 '20 at 19:58

Considering Alamofire 5.0+:

Uploading Data

let data = Data("data".utf8)

AF.upload(data, to: "https://httpbin.org/post").responseJSON { response in
    debugPrint(response)
}

Uploading a File

let fileURL = Bundle.main.url(forResource: "video", withExtension: "mov")

AF.upload(fileURL, to: "https://httpbin.org/post").responseJSON { response in
    debugPrint(response)
}

Uploading Multipart Form Data

AF.upload(multipartFormData: { multipartFormData in
    multipartFormData.append(Data("one".utf8), withName: "one")
    multipartFormData.append(Data("two".utf8), withName: "two")
}, to: "https://httpbin.org/post")
    .responseJSON { response in
        debugPrint(response)
    }

An image through Multipart Form:

// in case of parameters dictionary let's just roll the keys and values later
let parameters = ["name": rname] //var parameters: [String: Any] = [:]

AF.upload(multipartFormData: { multipartFormData in

        for (key,value) in parameters {
            multipartFormData.append((value as! String).data(using: .utf8)!, withName: key)
        }

        guard let image = photo else { return }
        let jpegData = image.jpegData(compressionQuality: 1.0)
        multipartFormData.append(Data((jpegData)!), withName: "photo")

}, to: "https://httpbin.org/post")

    .responseJSON { response in
        debugPrint(response)
}

score 2 · Answer 10 · answered Apr 22 '20 at 12:49

I was having some troubles uploading an image file with Alamofire 5. My solution looks like this:

    let parameters: [String: String] = ["user_id": "1"]

    AF.upload(multipartFormData: { multipartFormData in

            for (key, value) in parameters {
                multipartFormData.append(value.data(using: .utf8)!, withName: key)
            }

            if let jpegData = UIImageJPEGRepresentation(image, 1.0) {
                multipartFormData.append(jpegData, withName: "image", fileName: "image", mimeType: "image/jpeg")
            }
    }, to: "http://example.com/upload-image")
        .authenticate(username: "username", password: "password") // had basic auth
        .response { response in
            if response.response?.statusCode == 200 {
                print("OK. Done")
            } 
    }

score 2 · Answer 11 · edited Nov 07 '21 at 11:14

after doing some quick cleanup on versions above, this one would be the snippet that I always reuse, where the Endpoints.uploadProfileImage() is just the url.

func uploadPhoto(media: UIImage, params: [String:String], fileName: String){
    let headers: HTTPHeaders = [
        "Content-type": "multipart/form-data"
    ]
    AF.upload(
        multipartFormData: { multipartFormData in
            multipartFormData.append(media.jpegData(
                compressionQuality: 0.5)!,
                withName: "upload_data",
                fileName: "\(fileName).jpeg", mimeType: "image/jpeg"
            )
            for param in params {
                let value = param.value.data(using: String.Encoding.utf8)!
                multipartFormData.append(value, withName: param.key)
            }
        },
        to: Endpoints.uploadProfileImage(),
        method: .post ,
        headers: headers
    )
    .response { response in
        print(response)
    }
}

score 0 · Answer 12 · answered May 12 '18 at 04:54

 user_photo is key for dic 
 swift_file.jpg is value for value  
 Write the same  withName is  key
 Write the same fileName is value 
 call the UploadImage(Image)


func UploadImage(img:UIImage) {
        let urlfinal = “ananda.profile.php";
        let parameters = ["user_id":"531", "user_photo”: "swift_file.jpg"] 
        Alamofire.upload(multipartFormData: { (multipartFormData) in
            multipartFormData.append(UIImageJPEGRepresentation(img, 1)!, withName: "user_photo", fileName: "swift_file.jpeg", mimeType: "image/jpg")
            for (key, value) in parameters {
                multipartFormData.append(value.data(using: String.Encoding.utf8)!, withName: key)
            }
            print(multipartFormData)
        }, to:urlfinal)
        { (result) in
            switch result {
            case .success(let upload, , ):
                upload.uploadProgress(closure: { (progress) in
                })

                upload.responseJSON { response in
                    print(response)
                }
            case .failure( _): break

            }
        }
   }

upload image to server using Alamofire

12 Answers12

Linked