https://github.com/forms-angular/fng-jq-upload

jQuery file upload plugin for forms-angular, storing data in Mongo. Heavily influenced by Dominic Bottger's fork of BlueImp jquery-file-upload.
https://github.com/forms-angular/fng-jq-upload

Last synced: about 2 months ago
JSON representation

jQuery file upload plugin for forms-angular, storing data in Mongo. Heavily influenced by Dominic Bottger's fork of BlueImp jquery-file-upload.

• Host: GitHub
• URL: https://github.com/forms-angular/fng-jq-upload
• Owner: forms-angular
• License: mit
• Created: 2014-06-19T14:59:10.000Z (over 10 years ago)
• Default Branch: main
• Last Pushed: 2024-03-28T23:46:48.000Z (9 months ago)
• Last Synced: 2024-04-14T04:46:03.065Z (9 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.21 MB
• Stars: 1
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md
  • License: license.md

Awesome Lists containing this project

README

        
# fng-jq-upload

jQuery 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.

## Usage

    npm install fng-jq-upload

    

To get all the dependencies at the top level of your node_modules run

    npm dedupe    

### On the server side:

Install [ImageMagick](http://www.imagemagick.org/script/index.php) for creating image thumbnails.

In 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:

     

    var fngJqUpload = require('fng-jq-upload');

    var DataFormHandler = new (formsAngular)(app, {

      plugins: {

        JQMongoFileUploader: { plugin: fngJqUpload.Controller, options: { } },

      }

    });

Configuration options:

- **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).

### On the client side:

Add the following lines to your index.html (or equivalent) file

    

    

    

    

    

    

    

    

    

    

    

    

    

Ensure that your application module (or whatever module is going to use the uploader) specifies uploadModule as a dependency.

    angular.module('myApplication', ['uploadModule']);    

            

File fields need to be set up as follows:

    var uploadSchema = new mongoose.Schema({

      filename: String,

      size: Number

    });

    var mySchema = new mongoose.Schema({

      domrField: String,

      files: {

        type: [uploadSchema],

        form: {

          directive: 'fng-jq-upload-form', 

          fngJqUploadForm: {

            sizeLimit: 5000000,

            autoUpload:true

          }

        }

      }

    });

You 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:

    additFields: JSON.stringify([{name:'param'}]),

    

the additFields property is of type [form schema](https://www.forms-angular.org/#/schemas#formschema).    

The 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.

This is done using the following api endpoints:

  * **POST /file/upload/:model** stores the uploaded file to a model.  In the case of *gif*, *png* or *jpg* files

  creates a thumbnail.  Other file types get a reference to a generic file icon as a thumbnail.

  * **GET /file/:model/:id** retrieves a stored file

  * **GET /file/:model/thumbnail/:id** retrieves a thumbnail for a stored graphical file

  * **DELETE /file/:model/:id** deletes a stored file