Skip to content

Angular Schema Form extension allow developers to add a cloudinary file upload component using form definition

License

Notifications You must be signed in to change notification settings

SaifJerbi/asf-cloudinary-file-upload

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Angular Schema Form Cloudinary File Upload add-on by Saif Jerbi

This file upload add-on uses the official Cloudinary client library for AngularJS to provide a file upload interface.

bower version npm version npm downloads

Installation

To use it, just include:

    <!-- angular file upload -->
    <script src="../bower_components/ng-file-upload/ng-file-upload-shim.js"></script>
    <!-- cloudinary angular plugin -->
    <script src="../bower_components/cloudinary_ng/js/angular.cloudinary.js"></script>
    <!-- angular file upload -->
    <script src="../bower_components/ng-file-upload/ng-file-upload.js"></script>
    <!-- asf-cloudinary file upload js file-->
    <script src="../dist/asf-cloudinary-file-upload.min.js"></script>
    <!-- asf-cloudinary file upload stylesheet-->
    <link rel="stylesheet" href="../dist/asf-cloudinary-file-upload.min.css">

Be sure to load this projects files after you load angular schema form

Usage

The asf-cloudinary-file-upload add-on adds a new form type, cloudinaryfileupload

Form Type Becomes
cloudinaryfileupload A cloudinary file upload component

Options

The cloudinaryfileupload field takes two options.

Form Type Becomes
cloudName Cloudinary configuration
uploadPreset Cloudinary configuration

You can refer to Cloudinary Admin Configuration for more details.

Example

angular.module('test', ["schemaForm","cloudinaryFileUpload"]).controller('FormController', function($scope) {

        $scope.schema = {
          "type": "object",
          "properties": {
            "name": {
              "type": "string",
              "title": "Cloudinar File Upload",
              "description": "Testing cloudinary file upload ASF addon",
            }
          }
        }

        $scope.form = [
            {"label":"Thumbnail",
            "type":"cloudinaryfileupload",
            "key":"thumbnailPath",
            "cloudName":"YOUR_CLOUDINARY_NAME",
            "uploadPreset":"YOUR_UPLOAD_PRESET"}]
        $scope.model = {};
      });

Get the uploaded file

The developer can have more than one field that is managed as cloudinary file upload, the uploaded file will be available in:

$scope.model[FIELD_KEY]

The following informations will be available:

bytes: [SIZE]
created_at: [UPLOAD DATE]
existing:true
format: [FILE_FORMAT]
height:[FILE_HEIGHT]
public_id: [PUBLIC_FILE_ID]
resource_type:[RESOURCE_TYPE]
secure_url:[HTTPS_FULL_URL]
signature:[FILE_SIGNATURE]
success:true
tags:Array[] [TAGS]
type:"upload"
url:[HTTP_FULL_URL]
version:[FILE_VERSION]
width:[FILE_WIDTH]