There are many use cases in which your partners send you photos, video footage, art, or any other type of media and/or artifacts that you then have to upload to Cloudinary. This process can lead to extra, time-consuming manual work and result in a lack of accountability.
This post is designed to show you how to create a minisite without adding users, writing a single line of code, or sending a ticket to IT – freeing you up to do other higher-value work.
(For Developers: Go ahead and use the Cloudinary Upload Widget or upload files through AJAX techniques. No need to read any further).
You will need to have a Cloudinary account. Don’t have one? You can create a free Cloudinary account here.
This blog will show you how to create a branded minisite to directly upload assets to Cloudinary. You can control the text, colors, fonts, background, upload sources, and the Media Library folder destination.
Follow the steps below (or watch the accompanying video snippets further down) to create your first minisite in just minutes.
The no-code solution was developed using code and is available here for education and customization.
This is a live upload minisite demo that was created by uploading this JSON to Cloudinary.
An unsigned upload is a way to upload assets directly from a browser or mobile application with no authentication, and without going through intermediate servers. This eases the infrastructure requirements and user licensing. Be aware though, that this comes with the potential for abuse. To mitigate this risk, you can use Cloudinary add-ons for Malware detection and/or Content moderation.
- A Cloudinary upload preset is a set of definitions applied when an asset(s) is uploaded. Use the console to define the options that apply to your uploads.
- For this example, we are going to modify 3 fields. There is much more functionality and value that can be explored in the documentation:
- Upload preset name – The name is used to discern between your upload presets. It will not be shown in the minisite, but it is possible to see it when inspecting the HTML of the minisite.
- Signing Mode – Change to unsigned. This allows unauthenticated users to upload assets.
- Folder – Specify the Media Library folder you would like to have the uploaded assets. You don’t need to create this folder ahead, Cloudinary will create it for you upon the first upload.
- Download the template or copy it from below:
{
"minisite_config": {
"_comment1": "Edit this JSON file and locate it under a folder uploads_minisite with a descriptive name. The folder should be created at the top level.",
"_comment2": "Assuming the public_id of the JSON is https://res.cloudinary.com/greatbiz/raw/upload/uploads_minisite/agencies/best-one.json",
"_comment3": "then the upload minisite would be available at https://upload-minisite.cloudinary.us/greatbiz/agencies/best-one",
"_troubleshooting1": "Put the JSON URL in a web browser and make sure you that it is fetched",
"_troubleshooting2": "Make sure you are using images (backgroundImage, opengraphImage) from your own environment only",
"backgroundImage": "https://cloudinary-marketing-res.cloudinary.com/f_auto,q_auto,w_2000/website_2021/cloudinary_web_brand_assets_hero_background.png",
"opengraphImage": "https://cloudinary-marketing-res.cloudinary.com/c_thumb,f_auto,g_auto,h_630,q_auto,w_1200/website_2021/cloudinary_web_brand_assets_hero_background.png",
"title": "Hello upload!",
"titleStyle": "color: #5A616A",
"subtitle": "Share your assets here",
"subtitleStyle": "color: #5A616A; font-family: Sofia, 'Times New Roman', Times, serif;",
"googleFont": "Sofia"
},
"upload_widget_config": {
"_comment1": "To fully configure the upload widget, please see the reference in https://cloudinary.com/documentation/upload_widget_reference",
"_comment2": "A good overview of the upload widget capabilities is in https://cloudinary.com/documentation/upload_widget",
"_comment3": "Create an unsigned upload_preset to use below. Doc: https://cloudinary.com/documentation/upload_presets#managing_upload_presets_using_the_settings_ui",
"uploadPreset": "agent-y",
"sources": ["local", "url", "camera", "google_drive", "dropbox", "shutterstock", "getty", "istock", "unsplash"],
"showAdvancedOptions": true,
"cropping": true,
"showSkipCropButton": true,
"multiple": false,
"maxFiles": 20,
"defaultSource": "local",
"styles": {
"palette": {
"window": "#FFFFFF",
"windowBorder": "#90A0B3",
"tabIcon": "#0078FF",
"menuIcons": "#5A616A",
"textDark": "#000000",
"textLight": "#FFFFFF",
"link": "#0078FF",
"action": "#FF620C",
"inactiveTabIcon": "#0E2F5A",
"error": "#F44235",
"inProgress": "#0078FF",
"complete": "#20B832",
"sourceBg": "#E4EBF1"
},
"fonts": {
"default": {
"active": true
}
}
}
}
}Code language: JSON / JSON with Comments (json)- Open the template with your favorite text editor. At a minimum, edit these fields:
- Title
- Subtitle
- uploadPreset – the one you used in the previous step
- There are plenty of additional options to adjust like colors, fonts, and upload sources in the template.
- Save the template using a meaningful public name, for example, “photographers.json”. Any name is valid, as long as the extension is kept “.json”.
- Create a folder called “uploads_minisite” on the top-level folder of your environment. Upload the JSON file to this folder.
- Adjust the public_id of the JSON file to match the folder structure, e.g. “uploads_minisite/photographers.json”.
Make sure that you can access the JSON from a web browser as
https://res.cloudinary.com/<your envid>/raw/upload/uploads_minisite/photographers.json
Immediately see the results at https://upload-minisite.cloudinary.us/<your environment id>/photographers.
Once a minisite is complete, uploading files supplied by your various partners to Cloudinary becomes a smooth, efficient process and enables you to unleash their full potential in a fun and creative way.
