base64EncodedString returns undesired backslashes

Question

I am encoding a JPEG image to Base64 for sending to my app's backend using Alamofire.

When I inspect the sent string using Charles Proxy I find out that the encoded string escapes all slashes (/) with a backslash (becoming \/). For example, the string data:image/jpeg;base64, at the beginning becomes:

data:image\/jpeg;base64,

As all slashes in the Base64 encoded string, which renders the encoded string unusable.

Here is the code I use for encoding the image. The variable imageBase64 receives the string with the escaped slashes.

    if let image = image {
        let croppedImage = image.af_imageAspectScaled(toFill: CGSize(width: 500, height: 500))
        if let imageData = UIImageJPEGRepresentation(croppedImage, 0.8) {
            let imageBase64 = "data:image/jpeg;base64,\(imageData.base64EncodedString())"
            base64dict["base64"] = imageBase64 as AnyObject
            bodyParams["AVATAR"] = base64dict as AnyObject
        } else {
            base64dict["base64"] = "null" as AnyObject
            bodyParams["AVATAR"] = base64dict as AnyObject
        }
    }

When I send the imageData string to the backend using Alamofire, the json sent in the request body becomes like this:

{
    "AVATAR": {
        "base64": "data:image\/jpeg;base64,\/9j\/4AAQSkZJRgABAQAAkACQAAD\/4QC..."
    }
}

where all slashes were escaped.

The code I use for making the request is the following:

Alamofire.request(finalURL,
    method: method,
    parameters: bodyParams,
    encoding: JSONEncoding.default,
    headers: ["Content-Type": "application/json"])
.responseJSON { response in
    // process response
    }

Hello, I had to edit the question. Actually the backslashes are added on the string that is sent by Alamofire to the server. — Felipe Ferri, May 06 '18 at 17:09
How can it possibly be the base64 encoding that's adding the backslash in `image\/jpeg` when your code doesn't do any base64 encoding of that part of the string? — Matt Gibson, May 06 '18 at 17:11
code have no issue i think you get backslashes at server side , just check with backend devekoper — Abdelahad Darwish, May 06 '18 at 17:11
Are you using JSON encoding on the data at some later point, before it's sent to the server? [JSON encoding can perfectly validly escape forward slashes](https://stackoverflow.com/questions/1580647/json-why-are-forward-slashes-escaped). — Matt Gibson, May 06 '18 at 17:13
Hello Matt, yes, I'm using JSON encoding for sending the image using Alamofire. I updated the question to reflect this. — Felipe Ferri, May 06 '18 at 17:16
What problem are the escaped forward slashes causing? When the JSON is decoded by the server, it should be able to unescape them just fine. — Matt Gibson, May 06 '18 at 17:18
Thanks for pointing that answer. Is creating a custom json encoder the only way of avoiding the slash escaping? — Felipe Ferri, May 06 '18 at 17:18
The server unfortunately is not accepting escaped slashes :-/ — Felipe Ferri, May 06 '18 at 17:20
I think the server is treating the base64 string as raw data, so it uses the string exactly as received. If I make a request using postman without escaping the slashes the server accepts the request just fine. — Felipe Ferri, May 06 '18 at 17:21

score 0 · Accepted Answer · answered May 06 '18 at 17:41

I ended using the custom JSONEncoder posted by csim at this answer: Alamofire 5 Escaping Forward Slashes.

I had to create a new class, using the code provided by csim, and then the Alamofire request became:

Alamofire.request(finalURL,
    method: method,
    parameters: bodyParams,
    encoding: JSONEncodingWithoutEscapingSlashes.default,
    headers: ["Content-Type": "application/json"])
.responseJSON { response in
    // process response
    }

base64EncodedString returns undesired backslashes

1 Answers1