iosnode.jsamazon-s3graphicsmagickng-file-upload

iOS Image upload to S3 by using Node.js with Multiparty and GraphicsMagick


We have a website which is using ng-file-upload to send request to backend to upload images. It converts image into different sizes and upload to Amazon S3 server. It is working fine on web. Our front-end and back-end contains JS code.

From iOS App, we can upload files to AWS SDK for iOS, but it's taking too much time as well request timed out all time.

As per requirement, by using conventional method for file uploading from iOS App to server (Node), then converting to different sizes (ng-file-upload - multiparty & GraphicsMagick) & then upload to Amazon server (S3).

So, we're using traditional method to upload image to backend server.

Code for Image Upload

NSMutableURLRequest *urlRequest = [NSMutableURLRequest
                                           requestWithURL:url
                                           cachePolicy:NSURLRequestUseProtocolCachePolicy
                                           timeoutInterval:DEFAULT_TIMEOUT];

[urlRequest setHTTPMethod:@"POST"];

NSString *boundary = @"---------------------------14737809831464368775746641449";
NSString *contentType = [NSString stringWithFormat:@"multipart/form-data; boundary=%@",boundary];
[urlRequest addValue:contentType forHTTPHeaderField: @"Content-Type"];

NSMutableData *body = [NSMutableData data];

//Image
if(imageData)
{
     [body appendData:[[NSString stringWithFormat:@"\r\n--%@\r\n", boundary] dataUsingEncoding:NSUTF8StringEncoding]];
     [body appendData:[[NSString stringWithFormat:@"Content-Disposition: form-data; name=\"%@\"; filename=\"%@\"\r\n", imgName, imgName] dataUsingEncoding:NSUTF8StringEncoding]];

     [body appendData:[@"Content-Type: application/octet-stream\r\n\r\n" dataUsingEncoding:NSUTF8StringEncoding]];
     [body appendData:imageData];
     [body appendData:[[NSString stringWithFormat:@"\r\n"] dataUsingEncoding:NSUTF8StringEncoding]];
}

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

[urlRequest setHTTPBody:body];

We're using multiparty in node.js backend. Even we're unable to get any files object to populate for further steps. It throws an error in backend.

File details in Request headers are empty in backend while uploading from application. So, we get an error like 'path' undefined.

So, we're not getting any file or image to backend, so cannot process further for conversation as well upload. We stuck at this place.


Solution

  • I think you must have to follow two steps -

    1- Please verify once at server (Node) script filename must be same as sending from iOS.

    2- from ios we are using like that to upload image on server.

    [body appendData:[[NSString stringWithFormat:@"Content-Disposition: form-data; name=\"userfile\" ; filename=\"%@\"\r\n", imgName] dataUsingEncoding:NSUTF8StringEncoding]];
    

    name=\"userfile\" must be match with server script.