Multer-Cloudinary-MERN-image-video-pdf-upload

Overview

MERN Image,Video and PDF Upload using multer and Cloudinary

Many times while building full stack application,we need to upload images,
videos and pdf files to database so that it can be accessed as per the choice of user. 
In most cases people prefer to store it in a folder and transfer that image path to 
database. But this causes a problem after the website is hosted on a platform like heroku.
The Heroku filesystem is ephemeral - that means that any changes to the filesystem whilst 
the dyno is running only last until that dyno is shut down or restarted. Each dyno boots
with a clean copy of the filesystem from the most recent deploy. So the saved image in
the uploads folder goes off and so the path cannot be accessed. For this reason moving 
to a cloud platform is essential. It will also work fine after hosting on any platform.

So for this reason, I have created a repo which shows how you can upload images,videos,pdfs 
to cloudinary. Cloudinary has a free trial with no credit cards required. Moreover it had 
enough storage in the free trial sufficient for your personal projects and hackathons
(Max size of a single video should be lesser than 100mb). After uploading the video 
through frontend it may take few seconds(5-10) to make effect. Till that time you can
show a good pre-loader in your site!

P.S = Initially you can upload only videos and images but you just need to submit a request
(https://support.cloudinary.com/hc/en-us/requests/new) that you need to host pdf also for 
free,they will give you that privilege too within 5 minutes.
Isn't that cool! 
upload.mp4

P.S : I have just shown the functionality demo here so didnot took care of frontend UI

Run this app

  • Clone this repo and run npm install
  • goto client directory and run npm install as well
  • Create .env file at root level and add following variables and assign their values MONGO_URI CLOUDINARY_CLOUD_NAME CLOUDINARY_API_KEY CLOUDINARY_API_SECRET
  • To start the client run npm start
  • To run the server run nodemon index

Dont forget to ⭐ the repo if you like it!

You might also like...

Tonton video tutorial di YouTube saya untuk cara penginstalan & apabila kurang mengerti bisa hubungi saya di WhatsApp 🐣Klik link di bawah untuk tutorial penginstalan di heroku

Tonton video tutorial di YouTube saya untuk cara penginstalan & apabila kurang mengerti bisa hubungi saya di WhatsApp 🐣Klik link di bawah untuk tutorial penginstalan di heroku

BOTZ10 LAST Termux β€’ Heroku β€’ Session Setting β€’ Thanks TERMUX Git clone this repo git clone https://github.com/zeeoneofc/BOTZ10a.git cd BOTZ10a

Dec 23, 2021

πŸŽ₯ ⬇️ πŸ“¦ - Public Video URLs.

πŸŽ₯ ⬇️ πŸ“¦ - Public Video URLs.

WatchVideoByLink WatchVideoByLink is a web-app that allows you to watch, download and organize public video URLs. Why WatchVideoByLink? | Installation

Dec 12, 2022

Modern browsers already had a vivid player for video

Modern browsers already had a vivid player for video

Modern browsers already had a vivid player for video. However, web developers and designers still want to custom their own style player for different situations. Sounds like web component will do a lot favor for this purpose. With msc-ez-video / support, customize control panel will become a piece of cake. msc-ez-video / adopts CSS custom properties, developers could style them as they want.

Dec 29, 2021

An open source web3 decentralized video sharing πŸŽ₯ platform running on blockchain β›“

An open source web3 decentralized video sharing πŸŽ₯ platform running on blockchain β›“

DapTube ⚑️ A decentralized open source video sharing πŸŽ₯ platform on web3 β›“ ✨ Share videos & movies without restrictions πŸ’° Monetise your content πŸ” We

Feb 19, 2022

360Site - A website for sharing 360 video experiences.

360Site A website for sharing 360 video experiences. Links Development links happybirthdaynick-f9c86.web.app happybirthdaynick-f9c86.firebaseapp.com P

Jan 2, 2022

Discord-Bot - You can use the discord bot codes that are updated in every video of the codes I use in the discord bot making series that I have published on my youtube channel.

Discord-Bot You can use the discord bot codes that are updated in every video of the codes I use in the discord bot making series that I have publishe

Jan 3, 2023

Custom full screen video player

Custom full screen video player

Video Player Native video player in html View Demo Β· Report Bug Β· Request Feature About The Project This is a custom video player for the web built on

Feb 3, 2022

jPlayer : HTML5 Audio & Video for jQuery

jPlayer : HTML5 Audio & Video for jQuery Gitter Support for Zepto 1.0+ compiled with the data module. What is jPlayer? jPlayer is a jQuery/Zepto plugi

Dec 27, 2022

Accessible HTML5 Video Player

Accessible HTML5 Video Player What is it? A lightweight HTML5 video player which includes support for captions and screen reader accessibility. For de

Jan 5, 2023
Owner
Jaydip Dey
SDE intern @Optum (UnitedHealth Group)
Jaydip Dey
Video.js - open source HTML5 & Flash video player

Video.js - HTML5 Video Player Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and Media Source Ext

Video.js 34.8k Jan 5, 2023
A Chrome extension to help you inspect Mp4 video content and find irregularities in video streams.

MP4Inspector A Chrome extension to help you inspect Mp4 video content and find irregularities in video streams. Installation In chrome navigate to chr

Bitmovin 48 Nov 28, 2022
Image, Presentation and Video editor. Canva clone

React editor [WIP] React editor for graphics, presentations and videos. It should be an alternative to canva.com. Try demo here react-editor-core.verc

null 1.4k Dec 28, 2022
A decentralized Music Ownership System developed on Truffle Suite and React Bootstrap to allow Music artists to upload their content to the blockchain, that can be streamed by users

A decentralized Music Ownership System developed on Truffle Suite and React Bootstrap to allow Music artists to upload their content to the blockchain, that can be streamed by users.

M. Adil Fayyaz 10 Sep 5, 2022
Enables

HTML5 video made easy All it takes is a single line of code to make HTML5 video and audio tags work in all major browsers. How to enable video and aud

Dave Hall 1.3k Dec 17, 2022
The HTML5 video player for the web

Flowplayer website | demos | docs For the impatient Download Flowplayer Unzip Drop the folder under your server Minimal setup <!DOCTYPE html> <head>

Flowplayer 1.9k Dec 30, 2022
HTML5

One file. Any browser. Same UI. Author: John Dyer http://j.hn/ Website: http://mediaelementjs.com/ License: MIT Meaning: Use everywhere, keep copyrigh

MediaElement.js 8k Dec 27, 2022
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Introducing FitVids.js A lightweight, easy-to-use jQuery plugin for fluid width video embeds. FitVids automates the Intrinsic Ratio Method by Thierry

Dave Rupert 4.8k Dec 24, 2022
HTML5

One file. Any browser. Same UI. Author: John Dyer http://j.hn/ Website: http://mediaelementjs.com/ License: MIT Meaning: Use everywhere, keep copyrigh

MediaElement.js 8k Jan 8, 2023
A web video player built for the HTML5 world using React library.

video-react Video.React is a web video player built from the ground up for an HTML5 world using React library. Installation Install video-react and pe

null 2.4k Jan 6, 2023