{"id":14385250,"url":"https://github.com/twilson63/ngUpload","last_synced_at":"2025-08-23T18:32:07.316Z","repository":{"id":6168873,"uuid":"7398634","full_name":"twilson63/ngUpload","owner":"twilson63","description":"An AngularJS Service for uploading files using iframe","archived":false,"fork":false,"pushed_at":"2017-06-29T11:23:07.000Z","size":9985,"stargazers_count":418,"open_issues_count":11,"forks_count":137,"subscribers_count":27,"default_branch":"master","last_synced_at":"2024-08-11T23:43:16.036Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://twilson63.github.io/ngUpload","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twilson63.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-01-01T20:15:24.000Z","updated_at":"2024-08-11T23:43:16.036Z","dependencies_parsed_at":"2022-08-31T23:51:53.475Z","dependency_job_id":null,"html_url":"https://github.com/twilson63/ngUpload","commit_stats":null,"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twilson63%2FngUpload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twilson63%2FngUpload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twilson63%2FngUpload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twilson63%2FngUpload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twilson63","download_url":"https://codeload.github.com/twilson63/ngUpload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":217384945,"owners_count":16168828,"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":[],"created_at":"2024-08-28T18:02:03.781Z","updated_at":"2024-08-28T18:06:49.456Z","avatar_url":"https://github.com/twilson63.png","language":"JavaScript","readme":"# ngUpload\n\nAn AngularJS file upload directive. Demo [http://ngupload.herokuapp.com](http://ngupload.herokuapp.com)\n\n## 0.5.18 - for updates see CHANGELOG.md\n\n``` html\n   \u003cform ng-upload=\"uploadComplete(content)\" action=\"/upload-full-form\"\u003e\n       \u003cp\u003e\n           \u003clabel\u003eFullname:\u003c/label\u003e\n           \u003cinput type=\"text\" name=\"fullname\" ng-model=\"fullname\" /\u003e\n       \u003c/p\u003e\n       \u003cp\u003e\n           \u003clabel\u003eGender:\u003c/label\u003e\n           \u003cinput type=\"text\" name=\"gender\" ng-model=\"gender\" /\u003e\n       \u003c/p\u003e\n       \u003cp\u003e\n           \u003clabel\u003eFavorite Color:\u003c/label\u003e\n           \u003cinput type=\"text\" name=\"color\" ng-model=\"color\"/\u003e\n       \u003c/p\u003e\n       \u003cp\u003e\n           \u003clabel\u003eYour picture (file will not be saved on the server):\u003c/label\u003e\n           \u003cinput type=\"file\" name=\"file\" /\u003e\n       \u003c/p\u003e\n       \u003cp\u003e\n           \u003cinput type=\"submit\" class=\"btn\" value=\"Submit\" ng-disabled=\"$isUploading\"  /\u003e\n       \u003c/p\u003e\n   \u003c/form\u003e\n   \u003cdiv class=\"alert alert-info\"\u003eServer Response: {{response | json}}\u003c/div\u003e\n   \u003cdiv\u003e\n       Fullname: \u003cb\u003e{{response.fullname}}\u003c/b\u003e\u003cbr /\u003e\n       Gender: \u003cb\u003e{{response.gender}}\u003c/b\u003e\u003cbr /\u003e\n       Favourite Color: \u003cspan ng-style=\"response.style\"\u003e{{response.color}}\u003c/span\u003e\u003cbr /\u003e\n       Picture: {{response.pictureUrl}}\n   \u003c/div\u003e\n```\n... and the context ngController's source is:\n\n``` js\napp.controller('Example5Ctrl', function ($scope) {\n  $scope.uploadComplete = function (content) {\n    $scope.response = JSON.parse(content); // Presumed content is a json string!\n    $scope.response.style = {\n      color: $scope.response.color,\n      \"font-weight\": \"bold\"\n    };\n\n    // Clear form (reason for using the 'ng-model' directive on the input elements)\n    $scope.fullname = '';\n    $scope.gender = '';\n    $scope.color = '';\n    // Look for way to clear the input[type=file] element\n  };\n});\n```\n\n## Requirements\n\n* AngularJS (http://angularjs.org)\n\n## Install with NPM\n\n```\nnpm install ngUpload -S\n```\n\n## Install with Bower\n\n```\nbower install ngUpload\n```\n\n## Usage\n\nAdd to your html file\n\n```\n\u003cscript src=\"/js/ng-upload.js\"\u003e\u003c/script\u003e\n```\n\nCreate a basic form with a file input element\n\n``` html\n\u003cdiv ng-app=\"app\"\u003e\n  \u003cdiv ng-controller=\"mainCtrl\"\u003e\n   \u003cform action=\"/uploads\" ng-upload=\"complete(content)\"\u003e\n     \u003cinput type=\"file\" name=\"avatar\"\u003e\u003c/input\u003e\n     \u003cinput type=\"submit\" value=\"Upload\" ng-disabled=\"$isUploading\"\u003e\u003c/input\u003e\n   \u003c/form\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Some rule of thumb\n\n* Any html element that supports the click event can be used to submit the form marked with the __ng-upload__ directive, as long as such elements are marked with the __'upload-submit'__ directive.  If you use an input element with a type of submit then you do not have to mark it with upload-submit.\n* Make sure you import the __'ngUpload'__ module in your angularJS application.\n\nApplying this rules, the sample above can be re-written as\n\n``` html\n\u003cdiv ng-app=\"app\"\u003e\n  \u003cdiv ng-controller=\"mainCtrl\"\u003e\n   \u003cform action=\"/uploads\" ng-upload=\"complete(content)\"\u003e\n     \u003cinput type=\"file\" name=\"avatar\"\u003e\u003c/input\u003e\n     \u003cdiv style='cursor: pointer' upload-submit\u003eUpload with Div\u003c/div\u003e \u0026bull;\n   \u003c/form\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n```\n\nor\n\n``` html\n\u003cdiv ng-app=\"app\"\u003e\n  \u003cdiv ng-controller=\"mainCtrl\"\u003e\n   \u003cform action=\"/uploads\" ng-upload=\"complete(contents)\"\u003e\n     \u003cinput type=\"file\" name=\"avatar\"\u003e\u003c/input\u003e\n     \u003ca href='javascript:void(0)'\n       class=\"upload-submit\" \u003e\n         Upload with Anchor\u003c/a\u003e\n   \u003c/form\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n```\n\nwhere the form can be submit with a Div or Anchor html element.\n\nThe AngularJS controller for the above samples is given as:\n\n``` js\nangular.module('app', ['ngUpload'])\n  .controller('mainCtrl', function($scope) {\n    $scope.complete = function(content) {\n      console.log(content); // process content\n    }\n});\n```\n\n* Working in IE\n\nIn order, for ngUpload to respond correctly for IE, your server needs to return the response back as `text/html` not `application/json`\n\n\n## Directive Options\n\n### ngUpload\n\n* `upload-options-enable-rails-csrf`: Turns on support for [Rails' CSRF](http://guides.rubyonrails.org/security.html#cross-site-request-forgery-csrf)\n                               by adding a hidden form field with the csrf token.\n\n* `upload-options-before-submit`: function that gets triggered before the upload starts and if the function returns false it will cancel the submit.\n\n### uploadSubmit\n\n* `upload-options-convert-hidden`: Set the value of hidden inputs to their `ng-model` attribute when the form is submitted.  One situation in which this is useful is when\nusing select elements whose options are generated with ngOptions, for\nexample:\n```\nselect[name='category_id' ng-model='category' ng-options='c.id as c.name for c in categories']\n```\nand where categories is\n```\n[{id: 12, name: 'fred'}, {id: 65, name: 'wilma'}]\n```\nBecause Angular will generate options whose HTML element value is indexed on 0, the value submitted will be the value of the\noption and not the desired ng-model value which is category.id.  Adding\na hidden element whose ng-model matches the ng-model of the select\nelement, combined with\nupload-options-convert-hidden='true' will workaround this issue.\n\n## Example\n\nExample of forms that posts to NodeJS server are now included under the [/examples](https://github.com/twilson63/ngUpload/tree/master/examples) folder.\n\n## Test\n\nNeeds Chrome Installed.\n\n``` sh\nnpm install\nnpm install grunt-cli -g\n\nnpm test\n```\n\n## jshint\n\n``` sh\nnpm install\nnpm install grunt-cli -g\n\ngrunt jshint\n```\n\n## Minify\n\n``` sh\nnpm install\nnpm install grunt-cli -g\n\ngrunt uglify\n```\n\n\n## License\n\nMIT\n\n## How to contribute\n\npull requests welcome.\n\nplease use the following style guidelines\n\n(http://nodeguide.com/style.html)\n\n## Contributors\n\n* ADEBISI Foluso A. (https://github.com/adebisi-fa)\n* Hassan Alqaraguli (https://github.com/HassanAlqaraguli)\n* Jørgen Borgesen (https://github.com/jorgenfb)\n* cristianocd (https://github.com/cristianocd)\n* Evgeniy Zatsepin (https://github.com/dizzy7)\n* Chris Tesene (https://github.com/ctesene)\n* denyo (https://github.com/denyo)\n* mguymon (https://github.com/mguymon)\n* marek-stoj (https://github.com/marek-stoj)\n* Robert Coker (https://github.com/intelekshual)\n* Michael Guymon (https://github.com/mguymon)\n\n## Thanks\n\n* AngularJS Team\n* NodeJS Team\n* JavaScript Team\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwilson63%2FngUpload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwilson63%2FngUpload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwilson63%2FngUpload/lists"}