Cloudirect - cloudinary direct caller for uploading files .
What is this thing ?
A cloudinary direct call API utility which can help you upload images , videos and audio file . More options will be added in the future along with support and examples for multiple frameworks .
The package was created to simplify the process of uploading file to cloudinary. You can upload image, video / .mp4 and audio / .mp3 files via this .
This package can even work with multiple platforms . You can use Express js in the backend and use cloudinary-direct to upload packages , requires Multer middleware . You can use React-Dropzone in the frontend .
Install
Installing this package is very easy , it has very few dependency .
Install with yarn .
yarn add cloudinary-direct
Install with npm .
npm i cloudinary-direct --save
How to use ?
It has four properties for authentication .
cloudName
Which you can find in your cloudinary console / dashboard
api_key
Which you can find in your cloudinary console / dashboard . For uploading file .
api_secret
Which you can also find in your cloudinary console / dashboard . For uploading file .
upload_preset
Which you can find in your cloudinary settings .
Example for auth
const Cloud = ;Cloud
Functions
Here are the functions that will provide you the power to upload files of different types.
// file[0] was retrieved from React DropZone , req.files fro express.js// For image uploadingCloud; // For audio / .mp3 file uploadingCloud // For video / .mp4 file uploadingCloud
You can choose which file to upload . This package will upload your file but it can't handle http/multipart . So you need to use React-Dropzone for react . The examples are shown in them . There is also a HOC -> High Order Component , you can use that as well .
Image Uploading :
Express js and multer:
Here is an example with express js and multer . Multer is the mostly used for uploading files and handling all the http/multipart . Here is an example express and multer with cloudinary direct :
const express = ;const multer = ;const Cloud = ; const app = ; const storage = multer; // Init Uploadconst upload = ; app
React js with react dropzone
Here is an example with React . Cloudniary direct can be used both in frontend frameworks and backend frameworks . I am using react dropzone for handling upload .
Note that upload_preset is needed for frontend usage .
import React from 'react';import Cloud from 'cloudniary-direct';import DropZone from 'react-dropzone'; Component { ; thishandler = thishandler; } { Cloud Cloud } { return <div> <DropZone = /> </div> }
More support will come in the future . I will try to implement features like async await for more faster and better response .