{"id":18369649,"url":"https://github.com/forms-angular/fng-jq-upload","last_synced_at":"2025-07-14T16:06:33.880Z","repository":{"id":39763255,"uuid":"21004400","full_name":"forms-angular/fng-jq-upload","owner":"forms-angular","description":"jQuery file upload plugin for forms-angular, storing data in Mongo.  Heavily influenced by Dominic Bottger's fork of BlueImp jquery-file-upload.","archived":false,"fork":false,"pushed_at":"2025-04-23T19:21:35.000Z","size":1328,"stargazers_count":1,"open_issues_count":4,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-09T13:06:03.693Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/forms-angular.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2014-06-19T14:59:10.000Z","updated_at":"2025-04-23T19:21:38.000Z","dependencies_parsed_at":"2024-03-13T02:29:19.950Z","dependency_job_id":"6caf605e-449a-4846-afbe-8c6b85410ddc","html_url":"https://github.com/forms-angular/fng-jq-upload","commit_stats":{"total_commits":427,"total_committers":5,"mean_commits":85.4,"dds":"0.032786885245901676","last_synced_commit":"d8f29de0201d3a1db9f8ec2db3a6042b58e91dfd"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/forms-angular/fng-jq-upload","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forms-angular%2Ffng-jq-upload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forms-angular%2Ffng-jq-upload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forms-angular%2Ffng-jq-upload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forms-angular%2Ffng-jq-upload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/forms-angular","download_url":"https://codeload.github.com/forms-angular/fng-jq-upload/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forms-angular%2Ffng-jq-upload/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265177824,"owners_count":23723123,"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-11-05T23:30:19.285Z","updated_at":"2025-07-14T16:06:33.838Z","avatar_url":"https://github.com/forms-angular.png","language":"JavaScript","readme":"# fng-jq-upload\n\njQuery file upload plugin for forms-angular, storing data in Mongo.  A wrapper for BlueImp jquery-file-upload, heavily influenced Dominic Bottger's fork of that project.\n\n## Usage\n\n    npm install fng-jq-upload\n    \nTo get all the dependencies at the top level of your node_modules run\n\n    npm dedupe    \n\n### On the server side:\n\nInstall [ImageMagick](http://www.imagemagick.org/script/index.php) for creating image thumbnails.\n\nIn the call to create the forms-angular object (normally in the main server express start-up module) add a plugins property to the options  as follows:\n     \n    var fngJqUpload = require('fng-jq-upload');\n    var DataFormHandler = new (formsAngular)(app, {\n      plugins: {\n        JQMongoFileUploader: { plugin: fngJqUpload.Controller, options: { } },\n      }\n    });\n\nConfiguration options:\n\n- **inhibitAuthentication** : boolean.  Inhibit calling any authentication middleware that forms-angular has been told to use.  Prevents having to intercept http calls in BlueImp (PRs to enable this would be more than welcome).\n\n### On the client side:\n\nAdd the following lines to your index.html (or equivalent) file\n\n    \u003c!-- blueimp Gallery styles --\u003e\n    \u003clink rel=\"stylesheet\" href=\"blueimp-gallery/css/blueimp-gallery.css\"\u003e\n    \u003c!-- CSS to style the file input field as button and adjust the Bootstrap progress bars --\u003e\n    \u003clink rel=\"stylesheet\" href=\"fng-jqfile-upload/css/jquery.fileupload.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"fng-jqfile-upload/css/jquery.fileupload-ui.css\"\u003e\n    \n    \u003cscript type=\"text/javascript\" src=\"blueimp-load-image/js/load-image.min.js\"\u003e\u003c/script\u003e\n    \u003c!-- The Canvas to Blob plugin is included for image resizing functionality --\u003e\n    \u003cscript type=\"text/javascript\" src=\"blueimp-canvas-to-blob/js/canvas-to-blob.min.js\"\u003e\u003c/script\u003e\n    \u003c!-- blueimp Gallery script --\u003e\n    \u003cscript type=\"text/javascript\" src=\"blueimp-gallery/js/jquery.blueimp-gallery.min.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\" src=\"fng-jq-upload/fng-jq-upload.js\"\u003e\u003c/script\u003e\n    \nEnsure that your application module (or whatever module is going to use the uploader) specifies uploadModule as a dependency.\n\n    angular.module('myApplication', ['uploadModule']);    \n            \nFile fields need to be set up as follows:\n\n    var uploadSchema = new mongoose.Schema({\n      filename: String,\n      size: Number\n    });\n\n    var mySchema = new mongoose.Schema({\n      domrField: String,\n      files: {\n        type: [uploadSchema],\n        form: {\n          directive: 'fng-jq-upload-form', \n          fngJqUploadForm: {\n            sizeLimit: 5000000,\n            autoUpload:true\n          }\n        }\n      }\n    });\n\nYou can extend the schema and add the additFields property to the fngJqUploadForm object to generate an inline form to capture the extra fields.  For example:\n\n    additFields: JSON.stringify([{name:'param'}]),\n    \nthe additFields property is of type [form schema](https://www.forms-angular.org/#/schemas#formschema).    \n\nThe chunks and file details get stored in the collection.files and collection.chunks collections where 'collection' is the collection in which the data for mySchema is stored.  Additional fields, if any, get stored in the main collection.\n\nThis is done using the following api endpoints:\n\n  * **POST /file/upload/:model** stores the uploaded file to a model.  In the case of *gif*, *png* or *jpg* files\n  creates a thumbnail.  Other file types get a reference to a generic file icon as a thumbnail.\n  * **GET /file/:model/:id** retrieves a stored file\n  * **GET /file/:model/thumbnail/:id** retrieves a thumbnail for a stored graphical file\n  * **DELETE /file/:model/:id** deletes a stored file\n  ","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforms-angular%2Ffng-jq-upload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fforms-angular%2Ffng-jq-upload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforms-angular%2Ffng-jq-upload/lists"}