uploading an image using multipart/form-data

Question

I am new in programming, I have intermediate skill in Swift and PHP. I am trying to build an iOS app using PHP as backend server.

I have very basic experience in web development. to upload an image by using html and PHP, as far as I remember i just used enctype= multipart/form-data as the atribute in the 'form' of HTML.

but when making the same user interface in iOS app, it seems very complicated. when making a function to upload an image to my server, i try to follow a tutorial in here https://www.youtube.com/watch?v=8GH0yMPvQFU.

He said that, it will be easier to understand the code in swift if I have basic understanding in web development. i feel bad that i can only copy and paste that code, and I don't really grasp the concept so i really want to understand. here is the code to upload an image in swift, especially these line of codes.

  func myImageUploadRequest()
        {

            let myUrl = NSURL(string: "http://www.swiftdeveloperblog.com/http-post-example-script/");
            //let myUrl = NSURL(string: "http://www.boredwear.com/utils/postImage.php");

            let request = NSMutableURLRequest(URL:myUrl!);
            request.HTTPMethod = "POST";

            let param = [
                "firstName"  : "Sergey",
                "lastName"    : "Kargopolov",
                "userId"    : "9"
            ]

            let boundary = generateBoundaryString()

            request.setValue("multipart/form-data; boundary=\(boundary)", forHTTPHeaderField: "Content-Type")


            let imageData = UIImageJPEGRepresentation(myImageView.image!, 1)

            if(imageData==nil)  { return; }

            request.HTTPBody = createBodyWithParameters(param, filePathKey: "file", imageDataKey: imageData!, boundary: boundary)


            myActivityIndicator.startAnimating();

            let task = NSURLSession.sharedSession().dataTaskWithRequest(request) {
                data, response, error in

                if error != nil {
                    print("error=\(error)")
                    return
                }

                // You can print out response object
                print("******* response = \(response)")

                // Print out reponse body
                let responseString = NSString(data: data!, encoding: NSUTF8StringEncoding)
                print("****** response data = \(responseString!)")

                do {
                    let json = try NSJSONSerialization.JSONObjectWithData(data!, options: []) as? NSDictionary

                    print(json)

                    dispatch_async(dispatch_get_main_queue(),{
                        self.myActivityIndicator.stopAnimating()
                        self.myImageView.image = nil;
                    });

                }catch
                {
                    print(error)
                }

            }

            task.resume()
        }


        func createBodyWithParameters(parameters: [String: String]?, filePathKey: String?, imageDataKey: NSData, boundary: String) -> NSData {
            let body = NSMutableData();

            if parameters != nil {
                for (key, value) in parameters! {
                    body.appendString("--\(boundary)\r\n")
                    body.appendString("Content-Disposition: form-data; name=\"\(key)\"\r\n\r\n")
                    body.appendString("\(value)\r\n")
                }
            }

                    let filename = "user-profile.jpg"
                    let mimetype = "image/jpg"

                    body.appendString("--\(boundary)\r\n")
                    body.appendString("Content-Disposition: form-data; name=\"\(filePathKey!)\"; filename=\"\(filename)\"\r\n")
                    body.appendString("Content-Type: \(mimetype)\r\n\r\n")
                    body.appendData(imageDataKey)
                    body.appendString("\r\n")



            body.appendString("--\(boundary)--\r\n")

            return body
        }

it seems like constructing request body with parameter and modify the header but.... I don't know, it seems different with the basic I have.

I have tried to read about HTTP protocol, and multipart/form-data. but i still don't get it. like I said before, I usually just used enctype= multipart/form-data as the atribute in the 'form' of HTML.

but those codes contains Content-Disposition: form-data, boundary, MIME type

if i want to fully understand those line of codes, what kind of topic that i have to learn first ? I have tried to find in google, but I don't get the step by step topic about it.

Thanks in advance :)

Welcome to the Treehouse Community

Looking to learn something new?

agung laksana

agung laksana

uploading an image using multipart/form-data