Uploading image to server Detail Explanation for Beginner

Question

I'm working on uploading an image to a server from last two days as there are tons of questions about uploading an image through AFNetworking and NSURLSession and other methods of uploading all I'm asking is I didn't found a single answer explaining the whole concept about how the things work and what is going on under the hood I searched youtube also all the stuff are available in Swift and trust me no Explanation at all and from my result I found this answer is something that looks familiar to me

---

---

    //Init the NSURLSession with a configuration
NSURLSessionConfiguration *defaultConfigObject = [NSURLSessionConfiguration defaultSessionConfiguration];
NSURLSession *defaultSession = [NSURLSession sessionWithConfiguration: defaultConfigObject delegate: nil delegateQueue: [NSOperationQueue mainQueue]];

//Create an URLRequest
NSURL *url = [NSURL URLWithString:@"yourURL"];
NSMutableURLRequest *urlRequest = [NSMutableURLRequest requestWithURL:url];

//Create POST Params and add it to HTTPBody
NSString *params = @"api_key=APIKEY&[email protected]&password=password";
[urlRequest setHTTPMethod:@"POST"];
[urlRequest setHTTPBody:[params dataUsingEncoding:NSUTF8StringEncoding]];

//Create task
NSURLSessionDataTask *dataTask = [defaultSession dataTaskWithRequest:urlRequest completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
    //Handle your response here
}];

[dataTask resume];

---

---

and also the most popular answer about this topic is by User XJones is:-

Here's code from my app to post an image to our web server:

// Dictionary that holds post parameters. You can set your post parameters that your server accepts or programmed to accept.
NSMutableDictionary* _params = [[NSMutableDictionary alloc] init];
[_params setObject:[NSString stringWithString:@"1.0"] forKey:[NSString stringWithString:@"ver"]];
[_params setObject:[NSString stringWithString:@"en"] forKey:[NSString stringWithString:@"lan"]];
[_params setObject:[NSString stringWithFormat:@"%d", userId] forKey:[NSString stringWithString:@"userId"]];
[_params setObject:[NSString stringWithFormat:@"%@",title] forKey:[NSString stringWithString:@"title"]];

// the boundary string : a random string, that will not repeat in post data, to separate post data fields.
NSString *BoundaryConstant = [NSString stringWithString:@"----------V2ymHFg03ehbqgZCaKO6jy"];

// string constant for the post parameter 'file'. My server uses this name: `file`. Your's may differ 
NSString* FileParamConstant = [NSString stringWithString:@"file"];

// the server url to which the image (or the media) is uploaded. Use your server url here
NSURL* requestURL = [NSURL URLWithString:@""]; 

// create request
NSMutableURLRequest *request = [[NSMutableURLRequest alloc] init];                                    
[request setCachePolicy:NSURLRequestReloadIgnoringLocalCacheData];
[request setHTTPShouldHandleCookies:NO];
[request setTimeoutInterval:30];
[request setHTTPMethod:@"POST"];

// set Content-Type in HTTP header
NSString *contentType = [NSString stringWithFormat:@"multipart/form-data; boundary=%@", BoundaryConstant];
[request setValue:contentType forHTTPHeaderField: @"Content-Type"];

// post body
NSMutableData *body = [NSMutableData data];

// add params (all params are strings)
for (NSString *param in _params) {
    [body appendData:[[NSString stringWithFormat:@"--%@\r\n", BoundaryConstant] dataUsingEncoding:NSUTF8StringEncoding]];
    [body appendData:[[NSString stringWithFormat:@"Content-Disposition: form-data; name=\"%@\"\r\n\r\n", param] dataUsingEncoding:NSUTF8StringEncoding]];
    [body appendData:[[NSString stringWithFormat:@"%@\r\n", [_params objectForKey:param]] dataUsingEncoding:NSUTF8StringEncoding]];
}

// add image data
NSData *imageData = UIImageJPEGRepresentation(imageToPost, 1.0);
if (imageData) {
    [body appendData:[[NSString stringWithFormat:@"--%@\r\n", BoundaryConstant] dataUsingEncoding:NSUTF8StringEncoding]];
    [body appendData:[[NSString stringWithFormat:@"Content-Disposition: form-data; name=\"%@\"; filename=\"image.jpg\"\r\n", FileParamConstant] dataUsingEncoding:NSUTF8StringEncoding]];
    [body appendData:[[NSString stringWithString:@"Content-Type: image/jpeg\r\n\r\n"] dataUsingEncoding:NSUTF8StringEncoding]];
    [body appendData:imageData];
    [body appendData:[[NSString stringWithFormat:@"\r\n"] dataUsingEncoding:NSUTF8StringEncoding]];
}

[body appendData:[[NSString stringWithFormat:@"--%@--\r\n", BoundaryConstant] dataUsingEncoding:NSUTF8StringEncoding]];

// setting the body of the post to the reqeust
[request setHTTPBody:body];

// set the content-length
NSString *postLength = [NSString stringWithFormat:@"%d", [body length]];
[request setValue:postLength forHTTPHeaderField:@"Content-Length"];

// set URL
[request setURL:requestURL];

---

---

But my point is I'm learning on my own and it is very difficult to understand for the beginner without explanation so All I'm asking is an explanation, an Detail explanation about the whole process if someone have a hard time to spend on this question because believe it or not I found this the hardest topic till now because the main reason is there are no tutorials about the whole process and also no explanation at all for beginners if someone can a step now and explain the concept it'll be easier to the students who will learn tomorrow. So anybody who can explain this in detail and how the uploading process works and some steps for the reference will be greatly appreciated.

Note : Consider I Have an API and a Key "image" .

Answer 1

here we gonna look at image uploading along with some **parameters because most of time we upload image along with some parameters such as userId.

• Before going deep into our topic let me provide the code for doing the stuff source,All the details we gonna see below are from some other stack overflow threads and some from other sites,i'll provide all the links for your reference.

  -(void)callApiWithParameters:(NSDictionary *)inputParameter images:(NSArray *)image  imageParamters:(NSArray *)FileParamConstant{
  
  //1
     NSMutableURLRequest *request = [[NSMutableURLRequest alloc] init];
  
     [request setHTTPShouldHandleCookies:NO];
     [request setTimeoutInterval:30];
     [request setHTTPMethod:@"POST"];
  
  //2
     NSString *boundary = @"------CLABoundaryGOKUL";
  
  //3
     NSString *contentType = [NSString stringWithFormat:@"multipart/form-data; boundary=%@", boundary];
     [request setValue:contentType forHTTPHeaderField: @"Content-Type"];
  
  //4
     NSMutableData *body = [NSMutableData data];
  
     for (NSString *key in inputParameter) {
  
     [body appendData:[[NSString stringWithFormat:@"--%@\r\n", boundary] dataUsingEncoding:NSUTF8StringEncoding]];
     [body appendData:[[NSString stringWithFormat:@"Content-Disposition: form-data; name=\"%@\"\r\n\r\n", key] dataUsingEncoding:NSUTF8StringEncoding]];
     [body appendData:[[NSString stringWithFormat:@"%@\r\n", [inputParameter objectForKey:key]] dataUsingEncoding:NSUTF8StringEncoding]];
    }
  
     for (int i = 0; i < image.count; i++) {
  
        NSData *imageDatasss = UIImagePNGRepresentation(image[i]);
  
        if (imageDatasss)
        {
            [body appendData:[[NSString stringWithFormat:@"--%@\r\n", boundary] dataUsingEncoding:NSUTF8StringEncoding]];
            [body appendData:[[NSString stringWithFormat:@"Content-Disposition: form-data; name=\"%@\"; filename=\"image.jpg\"\r\n", FileParamConstant[i]] dataUsingEncoding:NSUTF8StringEncoding]];
            [body appendData:[@"Content-Type:image/jpeg\r\n\r\n" dataUsingEncoding:NSUTF8StringEncoding]];
            [body appendData:imageDatasss];
            [body appendData:[[NSString stringWithFormat:@"\r\n"] dataUsingEncoding:NSUTF8StringEncoding]];
       }
    }
  
    [body appendData:[[NSString stringWithFormat:@"--%@--\r\n", boundary] dataUsingEncoding:NSUTF8StringEncoding]];
  
  //5
    [request setHTTPBody:body];
  
  //6
    [request setURL:[NSURL URLWithString:@"http://changeThisWithYourbaseURL?"]];//Eg:@"http://dev1.com/PTA_dev/webservice/webservice.php?"
  
  //7
    [NSURLConnection sendAsynchronousRequest:request
                                 queue:[NSOperationQueue mainQueue]
                     completionHandler:^(NSURLResponse *response, NSData *data, NSError *error) {
  
                         NSHTTPURLResponse* httpResponse = (NSHTTPURLResponse*)response;
  
                         //8
                         if ([httpResponse statusCode] == 200) {
                             NSDictionary * APIResult =[NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingAllowFragments error:nil];
                             NSLog(@"Response of %@: %@",[inputParameter valueForKey:@"service"],APIResult);
  
                         }else{
                             //9
                             NSLog(@"%@",error.localizedDescription);
                         }
                     }];
  
  
   }
  

  NOTE: Since it is a broad topic i have provided documentation link for detail info.

  1. We are using ** NSMutableURLRequest** instead of ** NSURLRequest** because we gonna append some data to it.if you need some deep clarification about mutable url request go through this documentation.
     • setHTTPShouldHandleCookies here we have to decide whether we are going to use cookies or not.To know more about visit
     • setTimeoutInterval this helps to set a time limit to url request.Add time interval in seconds after the given time,request will be terminated.
     • setHTTPMethod there are many methods.But we use GET and POST methods in many cases.Difference between POST and GET is here and here
  2. Boundary helps in separating the parameters from each other,so that the server can identify them.The boundary may be anything as your wish feel free to edit it.
  3. Here we use multipart/form-data; boundary= as content type.To know why we are going to this content type look into this thread.

  4. NSMutableData * body we gonna append all the parameters and values to this data and later setHTTPBody to the UrlRequest.

     • If this is how we call the 'callApiWithParameters' method

        - (IBAction)Done:(id)sender{
               NSDictionary * inputParameters = [NSDictionary dictionaryWithObjectsAndKeys:
                             @"1",@"user_id" ,
                             "XXX",@"name" ,
                             nil];
                NSArray * image = [NSArray arrayWithObjects:[UIImage imageNamed:@"Test"],[UIImage imageNamed:@"Test1"],nil];
                NSArray * imageParameters = [NSArray arrayWithObjects:@"img_one",@"img_two",nil];
                [self callApiWithParameters:inputParameters images:image imageParamters:imageParameters];
         }
       

     • then the data (i.e body) will look like this

Content-Type=multipart/form-data; boundary=------CLABoundaryGOKUL

--------CLABoundaryGOKUL
Content-Disposition: form-data; name=user_id

1
--------CLABoundaryGOKUL
Content-Disposition: form-data; name=name

XXX
--------CLABoundaryGOKUL
Content-Disposition: form-data; name=img_one; filename=image.jpg

Content-Type:image/jpeg

//First image data appended here

--------CLABoundaryGOKUL
Content-Disposition: form-data; name=img_two; filename=image.jpg

Content-Type:image/jpeg

//Second image data appended here.

• The above give data will clearly explain what going on,all the parameters and keys have been append in the data Here you can find more details about sending multipart/form.

  5. Now simply add the above data to request by [request setHTTPBody:body];
  6. setURL in this method add your base url of your app.
  7. Now all we need to do is make a connection to the server and send the request.Here we use NSURLConnection to send request.Description about NSURLConnection Loads the data for a URL request and executes a handler block on an operation queue when the request completes or fails.

  8. statusCode which helps to find out whether we got successful response from server. If 200 means OK, 500 means Internal Server Error, etc.. more details here .

  9. Handle the error in else case.

FYI I have explained what i can,refer the links for better understanding.

EDIT:

Just change the name in imageParamater array,To satisfy your requirement changed img_one & img_two with image.

 - (IBAction)Done:(id)sender{
     //Change input parameters as per your requirement.
     NSDictionary * inputParameters = [NSDictionary dictionaryWithObjectsAndKeys:
                                  @"1",@"user_id" ,
                                  "XXX",@"name" ,
                                  nil];
    NSArray * image = [NSArray arrayWithObjects:[UIImage imageNamed:@"Test"],nil]; //Change Test with your image name
    NSArray * imageParameters = [NSArray arrayWithObjects:@"image",nil];//Added image as a key.
    [self callApiWithParameters:inputParameters images:image imageParamters:imageParameters];
              }

and Change Point 6 with your example base URL,

//6

 [request setURL:[NSURL URLWithString:@"http://google.com/files/upload.php?"]];

Answer 2

I think it's Helpful for you...

- (void)sendImageToServer
{
    UIImage *yourImage= [UIImage imageNamed:@"image.png"];
    NSData *imageData = UIImagePNGRepresentation(yourImage);
    NSString *base64 = [imageData base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
    NSString *strImage = [NSString stringWithFormat:@"data:image/png;base64,%@",base64];

    NSMutableDictionary *dic = [[NSMutableDictionary alloc] initWithObjectsAndKeys:strImage,@"image", nil];
    NSError * err;
    NSData *jsonData = [NSJSONSerialization dataWithJSONObject:dic options:0 error:&err];
    NSString *UserProfileInRequest = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
    NSData *data=[UserProfileInRequest dataUsingEncoding:NSASCIIStringEncoding allowLossyConversion:YES];
    NSString *len = [NSString stringWithFormat:@"%ld", (unsigned long)[data length]];

    // Init the URLRequest

    NSMutableURLRequest *req = [[NSMutableURLRequest alloc] init];
    [req setURL:[NSURL URLWithString:@"http://YOUR_URL"]];
    [req setHTTPMethod:@"POST"];
    [req setValue:len forHTTPHeaderField:@"Content-Type"];
    [req setValue:@"application/json" forHTTPHeaderField:@"Content-Type"];
    [req setValue:@"application/json" forHTTPHeaderField:@"Accept"];
    [req setValue:@"application/x-www-form-urlencoded" forHTTPHeaderField:@"Content-Type"];
    [req setHTTPBody:data];

    NSURLSession *session = [NSURLSession sharedSession];
    [[session dataTaskWithRequest:req completionHandler:^(NSData *dt, NSURLResponse *response, NSError *err){
        //Response Data
        NSMutableDictionary *dic = [NSJSONSerialization JSONObjectWithData:dt options:kNilOptions error:&err];
        NSLog(@"%@", [dic description]);

    }]resume];
}