{"id":15282599,"url":"https://github.com/dotnetdreamer/nativescript-http-formdata","last_synced_at":"2025-04-12T23:05:51.174Z","repository":{"id":32623432,"uuid":"130660485","full_name":"dotnetdreamer/nativescript-http-formdata","owner":"dotnetdreamer","description":"A NativeScript plugin to post/upload file as multipart/form-data to server","archived":false,"fork":false,"pushed_at":"2022-05-30T17:08:08.000Z","size":3670,"stargazers_count":23,"open_issues_count":5,"forks_count":17,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-12T23:05:35.273Z","etag":null,"topics":["javascript","nativescript","nativescript-angular","nativescript-plugin","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dotnetdreamer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-23T07:55:04.000Z","updated_at":"2024-05-30T16:01:54.000Z","dependencies_parsed_at":"2022-07-28T22:38:48.852Z","dependency_job_id":null,"html_url":"https://github.com/dotnetdreamer/nativescript-http-formdata","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotnetdreamer%2Fnativescript-http-formdata","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotnetdreamer%2Fnativescript-http-formdata/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotnetdreamer%2Fnativescript-http-formdata/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotnetdreamer%2Fnativescript-http-formdata/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dotnetdreamer","download_url":"https://codeload.github.com/dotnetdreamer/nativescript-http-formdata/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248643008,"owners_count":21138354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","nativescript","nativescript-angular","nativescript-plugin","typescript"],"created_at":"2024-09-30T14:31:30.869Z","updated_at":"2025-04-12T23:05:51.135Z","avatar_url":"https://github.com/dotnetdreamer.png","language":"TypeScript","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=GCL2WCBZKKWBC"],"categories":[],"sub_categories":[],"readme":"A NativeScript plugin to post/upload file as multipart/form-data to server for iOS and Android. NS 6.1.0+ is required. Please use older version if you have older version of NS platform installed. \n\n#### Versions\n[3.1.1] \nFix build issues. Thanks to [NathanWalker](https://github.com/dotnetdreamer/nativescript-http-formdata/pull/41)\n\n[3.0.0] \nUpgraded to NS 8.0.0. Thanks to [Fr3nky88](https://github.com/dotnetdreamer/nativescript-http-formdata/pull/38)\n\n[2.1.0]\nUpgraded to NS 6.3.0. Fixed Kotlin issue. More [here](https://github.com/dotnetdreamer/nativescript-http-formdata/issues/21)\n\n[2.0.0]\nUpgraded to NS 6.2.0. Fixed Kotlin issue. More [here](https://github.com/NativeScript/android-runtime/issues/1178)\n\n[1.6.0] Added common response in iOS and Android instead returned by native APIs. \nThanks to [virtualbjorn](https://github.com/virtualbjorn)\n\n[1.5.0] Now supports custom headers\n\n#### Add the plugin\n```\ntns plugin add nativescript-http-formdata\n```\n# Dependencies\nAndroid | iOS\n-----|-----\n[okhttp3](https://mvnrepository.com/artifact/com.squareup.okhttp3/okhttp/3.10.0) | [OMGHTTPURLRQ](https://cocoapods.org/pods/OMGHTTPURLRQ)\n#### TypeScript\n```\nimport { TNSHttpFormData, TNSHttpFormDataParam, TNSHttpFormDataResponse } from 'nativescript-http-formdata';\n```\nuse the ImagePicker plugin or any other.\nhttps://github.com/NativeScript/nativescript-imagepicker\n\n```\n    private test() {\n        let context = imagepicker.create({\n            mode: \"single\" // use \"multiple\" for multiple selection\n        });\n        context.authorize()\n        .then(function() {\n            return context.present();\n        })\n        .then((selection) =\u003e {\n          let item = selection[0];\n          //UIImage for iOS and android.graphics.Bitmap for Android\n          item.getImageAsync(async (image, error) =\u003e {\n            let fd = new TNSHttpFormData();\n    \n            //create params. You can upload an array of params i.e multiple data. For every parameter you need to give unique name\n            //so you can get it on server. Check below how to grab it in ASP.Net MVC\n            let params = [];\n            let imageData: any;\n            \n            if(!image) {\n                throw 'Could not get image';\n            }\n\n            if(image.ios) {\n                imageData = UIImagePNGRepresentation(image);\n            } else {\n                //can be one of these overloads https://square.github.io/okhttp/3.x/okhttp/okhttp3/RequestBody.html\n                let bitmapImage: android.graphics.Bitmap = image;\n                let stream = new java.io.ByteArrayOutputStream();\n                bitmapImage.compress(android.graphics.Bitmap.CompressFormat.PNG, 100, stream);\n                let byteArray = stream.toByteArray();\n                bitmapImage.recycle();\n\n                imageData = byteArray;\n            }\n            let param: TNSHttpFormDataParam = {\n                data: imageData,\n                contentType: 'image/png',\n                fileName: 'test.png',\n                parameterName: 'file1'\n            };\n            params.push(param);\n            let param2: TNSHttpFormDataParam = {\n              data: \"John Doe\",\n              parameterName: \"firstName\"\n            };\n            params.push(param2);\n\n            console.log('submitting', params);\n    \n            try { \n                const response: TNSHttpFormDataResponse = await fd.post('http://10.10.10.149:10025/home/fileupload', params, {\n                    headers: {\n                        test1: \"test1 value\",\n                        \"x-version-no\": \"2.0\"\n                    }\n                });\n                console.log(response);\n            } catch (e) {\n                console.log('---------------home.component.ts---------------');\n                console.log(e);\n            }\n          });\n        }).catch(function (e) {\n            console.log('-------------------error----------------')\n            console.log(e);\n        });\n    }\n  ```\nNow on server to grab the file(s) in ASP.Net MVC, you can follow https://stackoverflow.com/a/16256106/859968 or following\n```\n[HttpPost]\n//file1 and file2 are parameters name as given in NativeScript object. They must match\npublic ActionResult FileUpload(HttpPostedFileBase file1, HttpPostedFileBase file2, string firstName)\n{\n    //grab your headers\n    var headers = Request.Headers;\n    if (file1 != null)\n    {\n        string pic = System.IO.Path.GetFileName(file1.FileName);\n        string path = System.IO.Path.Combine(Server.MapPath(\"~/App_Data\"), pic);\n        // file is uploaded\n        file1.SaveAs(path);\n    }\n    if (file2 != null)\n    {\n        string pic = System.IO.Path.GetFileName(file2.FileName);\n        string path = System.IO.Path.Combine(Server.MapPath(\"~/App_Data\"), pic);\n        // file is uploaded\n        file2.SaveAs(path);\n    }\n\n    // after successfully uploading redirect the user\n    return RedirectToAction(\"Index\", \"Home\");\n}\n```\n## TNSHttpFormDataResponse Properties\n- **headers** - response header\n- **statusCode** - http status code (number)\n- **statusMessage** - http status code message (string)\n- **body** - response body (JSON Parsed if is a json, raw string else) \n\n# \u003ca name=\"donation\"\u003e\u003c/a\u003eDonation\nA donation will not make me rich, but your appreciation makes me happy 😁\n\n[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=GCL2WCBZKKWBC)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdotnetdreamer%2Fnativescript-http-formdata","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdotnetdreamer%2Fnativescript-http-formdata","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdotnetdreamer%2Fnativescript-http-formdata/lists"}