How to upload an image with json?

Question

I am trying to upload an image with json data. I just followed the post and implemented the mechanism. But I get the error

{ status code: 400, headers {
    "Cache-Control" = "no-cache, no-store, max-age=0, must-revalidate";
    Connection = close;
    "Content-Language" = en;
    "Content-Length" = 1033;
    "Content-Type" = "text/html;charset=utf-8";
    Date = "Wed, 27 Jan 2016 10:44:34 GMT";
    Expires = 0;
    Pragma = "no-cache";
    Server = "Apache-Coyote/1.1";
    "X-Content-Type-Options" = nosniff;
    "X-XSS-Protection" = "1; mode=block";
} }`

Below is the complete HTTP Request

Content-Type: multipart/form-data;boundary=Boundary_123456789
Authorization: Basic bihdwbcIUkbcdwjnoNOn
User-Agent: Jersey/2.21.1 (HttpUrlConnection 1.8.0_45)
MIME-Version: 1.0
Host: localhost:8080
Accept: text/html, image/gif, image/jpeg, *; q=.2, */*; q=.2
Connection: keep-alive
Content-Length: 3526

--Boundary_123456789
Content-Type: application/json
Content-Disposition: form-data; name="userDTO"

{"id":"id","name":"name","age":23}
--Boundary_123456789
Content-Type: image/png
Content-Disposition: form-data; filename="sample-image2.png"; modification-date="Fri, 22 Jan 2016 04:56:48 GMT"; size=3308; name="file"

‰PNG

<Binary data>

--Boundary_123456789—

Below is my implementation

func addUser(completion: (message: String?, error: String?) -> Void) -> NSURLSessionDataTask {
        // create the request            
        let request = createRequest()

        let task = NSURLSession.sharedSession().dataTaskWithRequest(request) { data, response, error in
            print(response) // 400 Error is printed here
        }
        task.resume()

        return task
    }
func createRequest () -> NSURLRequest {
    let param = [
        "id": "id",
        "name": "name",
        "age": 23]  // build your dictionary however appropriate

    let boundary = generateBoundaryString()

    let url = NSURL(string: SERVERURL)!
    let request = NSMutableURLRequest(URL: url)
    request.HTTPMethod = "POST"
    request.addValue("Basic \(base64LoginString())", forHTTPHeaderField: "Authorization")
    request.setValue("multipart/form-data; boundary=\(boundary)", forHTTPHeaderField: "Content-Type")

    let path1 = NSBundle.mainBundle().pathForResource("userImage", ofType: "png") as String!
    request.HTTPBody = createBodyWithParameters(param, paths: [path1], boundary: boundary)

    return request
}

func createBodyWithParameters(json: [String:AnyObject], paths: [String]?, boundary: String) -> NSData {
    let body = NSMutableData()
    let key = "userDTO"

    body.appendString("--\(boundary)\r\n")
    body.appendString("Content-Type: application/json")
    body.appendString("Content-Disposition: form-data; name=\"\(key)\"\r\n\r\n")
    var requestBody = NSData()

    do {
        requestBody = try NSJSONSerialization.dataWithJSONObject(json, options: NSJSONWritingOptions(rawValue:0))
    } catch (let e) {
        print(e)
    }
    body.appendData(requestBody)
    //body.appendString("\(json)\r\n")

    if paths != nil {
        for path in paths! {
            let url = NSURL(fileURLWithPath: path)
            let data = NSData(contentsOfURL: url)!
            let mimetype = mimeTypeForPath(path)
            let fileName = "sample-image23.png"
            let date = "Fri, 22 Jan 2016 04:56:48 GMT"
            let name = "file"

            body.appendString("--\(boundary)\r\n")
            body.appendString("Content-Type: \(mimetype)\r\n\r\n")
            body.appendString("Content-Disposition: form-data; filename=\"\(fileName)\"; modification-date=\"\(date)\"; size=3308; name=\"\(name)\"\r\n")
            body.appendData(data)
            body.appendString("\r\n")
        }
    }

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

func generateBoundaryString() -> String {
    return "Boundary-\(NSUUID().UUIDString)"
}

func mimeTypeForPath(path: String) -> String {
    let url = NSURL(fileURLWithPath: path)
    let pathExtension = url.pathExtension

    if let uti = UTTypeCreatePreferredIdentifierForTag(kUTTagClassFilenameExtension, pathExtension! as NSString, nil)?.takeRetainedValue() {
        if let mimetype = UTTypeCopyPreferredTagWithClass(uti, kUTTagClassMIMEType)?.takeRetainedValue() {
            return mimetype as String
        }
    }
    return "application/octet-stream";
}

Also the extension

extension NSMutableData {

    func appendString(string: String) {
        let data = string.dataUsingEncoding(NSUTF8StringEncoding, allowLossyConversion: true)
        appendData(data!)
    }
}

I guess I am making some mistake in the json format. Someone can help? Thanks!

Answer 1

It seems, uploading the image is not your issue - it succeeded as far as I can see. You should realize, that uploading the image has nothing to do with JSON. Rather, getting a response in your expected format (JSON) is probably what you are seeking for. So, if you require to get a response whose body is JSON, you should explicitly state this with setting the appropriate Accept header. For example:

Accept: application/json

and in code:

request.setValue("application/json", forHTTPHeaderField: "Accept")

When you get a response, you should also first check the response' status code and then the Content-Type header (respectively, the response' MIMEType property) which should match what you expect: application/json.

If the content type is not what you expect, you could alternatively try additional "response serializers" - each suitable to parse other content-types, e.g. text/plain etc., as you like.

Edit:

The server responded with a hint, that the second part of the multipart request is malformed. Taking a look at how it is composed:

        body.appendString("--\(boundary)\r\n")
        body.appendString("Content-Type: \(mimetype)\r\n\r\n")
        body.appendString("Content-Disposition: form-data; filename='sample-image23.png'; modification-date='Fri, 22 Jan 2016 04:56:48 GMT'; size=3308; name='file'\r\n")
        body.appendData(data)
        body.appendString("\r\n")

Now, looking closely, we can see that the second header Content-Type will be delimited with two CRLF - but there's another header following. Headers should be separated with just one CRLF.

Then, the last header must be delimited with two CRLF.

Suggested fix:

        body.appendString("--\(boundary)\r\n")
        body.appendString("Content-Disposition: form-data; filename='sample-image23.png'; modification-date='Fri, 22 Jan 2016 04:56:48 GMT'; size=3308; name='file'\r\n")
        body.appendString("Content-Type: \(mimetype)\r\n\r\n")
        body.appendData(data)
        body.appendString("\r\n")

(Edit: removed incorrect description)

Edit 2:

There's also a missing CRLF in these lines, above this one:

let key = "userDTO"

body.appendString("--\(boundary)\r\n")
body.appendString("Content-Type: application/json")
body.appendString("Content-Disposition: form-data; name=\"\(key)\"\r\n\r\n")

You see the issue? Content-Type has no trailing CRLF!

See also: NSURLRequest Upload Multiple Files