Upload Media Files Directly To Cloudinary Without Exposing ApiKey

cloudinary_public

This package allows you to upload media files directly to cloudinary, without exposing your apiKey or secretKey.

Getting started

Add the dependency cloudinary_public: ^0.20.0 to your project:

import 'package:cloudinary_public/cloudinary_public.dart';

final cloudinary = CloudinaryPublic('CLOUD_NAME', 'UPLOAD_PRESET', cache: false);

Check https://cloudinary.com/documentation/upload_images#unsigned_upload on how to create an upload preset.

Using Image Picker Plugin

var image = await ImagePicker.pickImage(source: ImageSource.camera);

try {
    CloudinaryResponse response = await cloudinary.uploadFile(
        CloudinaryFile.fromFile(image.path, resourceType: CloudinaryResourceType.Image),
    );
    
    print(response.secureUrl);
} on CloudinaryException catch (e) {
  print(e.message);
  print(e.request);
}

Using Multi Image Picker Plugin

final images = await MultiImagePicker.pickImages(maxImages: 4);

List<CloudinaryResponse> uploadedImages = await cloudinary.multiUpload(
images
    .map(
      (image) => CloudinaryFile.fromFutureByteData(
        image.getByteData(),
        identifier: image.identifier,
      ),
    )
    .toList(),
);

print(uploadedImages[0].secureUrl);

Image Transformation

// CloudinaryImage
final cloudinaryImage = CloudinaryImage('https://res.cloudinary.com/demo/image/upload/front_face.png');
// or using the image public id
final cloudinaryImage = cloudinary.getImage('front_face');

final String url = cloudinaryImage.transform().width(150).height(150).gravity('face').crop('thumb').generate();
// or using the shortcut
final String url = cloudinaryImage.thumbnail(width: 150, height: 150).generate();


// Chain example
final url = cloudinaryImage.transform()
    .width(150)
    .height(150)
    .gravity('face')
    .crop('thumb')
    .chain()
    .radius(20)
    .chain()
    .effect('sepia')
    .chain()
    .overlay(cloudinary.getImage('cloudinary_icon'))
    .gravity('south_east')
    .x(5)
    .y(5)
    .width(50)
    .opacity(60)
    .effect('brightness:200')
    .chain()
    .angle(10)
    .generate();
// generates
// https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_150,w_150/r_20/e_sepia/e_brightness:200,g_south_east,l_cloudinary_icon,o_60,w_50,x_5,y_5/a_10/front_face.png

Upload Progress

final res = await cloudinary.uploadFile(
  CloudinaryFile.fromFile(
    _pickedFile.path,
    folder: 'hello-folder',
    context: {
      'alt': 'Hello',
      'caption': 'An example image',
    },
  ),
  onProgress: (count, total) {
    setState(() {
      _uploadingPercentage = (count / total) * 100;
    });
  },
);

Upload In Chunks

Use chunked upload when file size is more then 100 Megabytes.

By default, the chunk size is set to 20 Megabytes but can be set to as low as 5 Megabytes by using the chunk_size parameter.

Source: https://cloudinary.com/documentation/upload_images#chunked_asset_upload

final res = await cloudinary.uploadFileInChunks(
  CloudinaryFile.fromFile(
    _pickedFile.path,
    folder: 'hello-folder',
    context: {
      'alt': 'Hello',
      'caption': 'An example upload in chunks',
    },
  ),
  chunkSize: 10000000
  onProgress: (count, total) {
    setState(() {
      _uploadingPercentage = (count / total) * 100;
    });
  },
);

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add cloudinary_public

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  cloudinary_public: ^0.21.0

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:cloudinary_public/cloudinary_public.dart';

example/lib/main.dart

import 'package:example/src/image_picker_example.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ImagePickerExample(),
      // home: MultiImagePickerExample(),
    );
  }
}

Download details:

Author: djade.net

Source: https://github.com/djade007/cloudinary_public

#flutter #android #web-development #web #cloud #database #api