Upload images in Flutter (video tutorial)
Last updated: Sep-02-2024
On this page:
Overview
Learn how to upload assets from your Flutter app to Cloudinary and then seamlessly deliver those images from the Cloudinary platform.
Video tutorial
Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
Introduction
After installing and configuring the Cloudinary Flutter SDK, you can upload images from your Flutter application to Cloudinary. This process involves using the upload method of the Upload API, along with an upload preset that specifies the upload behavior. The images you upload will be displayed in the Media Library. |
|
Construct the POST request URL
We're going to add functionality to an already existing app that allows you to select an image and display it on the screen. The functionality we're going to add in this tutorial is uploading the image to Cloudinary. (Later, we'll also deliver the image in the Flutter app from Cloudinary.) The initial step to uploading the image to Cloudinary involves constructing the URL for the POST request. Simply use the provided URL and replace <cloudname> with your product environment's cloud name, which we'll cover in an upcoming step. |
|
Use the Postman collection
Check out our Postman collection for a working example of an unsigned upload via a POST request using the Upload API's upload method. Keep in mind that you'll need an unsigned upload preset for this, which we'll create in an upcoming step. | |
Replace the cloud name in the POST request URL with your own
To find your Cloud name, navigate to the Product Environment Credentials section in your Dashboard. Replace ddjmx10sp in the example Post request URL with your specific cloud name. |
|
Create an unsigned preset
Go to the Upload page of the Console Settings and scroll to the Upload presets section. Create a new upload preset by clicking Add upload preset at the bottom of the upload preset list. From the Signing Mode drop-down, select Unsigned. You can also optionally enter a folder where the images uploaded with this upload preset will be stored. After saving this upload preset, it will appear in the list of presets. Remember to note down the name of the upload preset you've just created, as you'll use it in your Flutter application as part of your request. | |
Construct the image upload request
Create the request for the upload method of the Upload API within your Flutter application. Make sure to replace <preset_name> with the name of the unsigned preset you created. |
|
Retrieve and display the Cloudinary image
Use the provided code to obtain the delivery URL from the upload response and display the Cloudinary image within your Flutter app. | |
Additional upload methods
In addition to the method demonstrated, there are alternative ways to upload images from your Flutter app to Cloudinary. One such method is the user-friendly Upload widget which provides an intuitive interface for users to upload images. If you prefer a back-end approach, you can opt for a server-side upload, which necessitates your api_key and api_secret . Always exercise caution and avoid exposing your credentials in a client-facing front-end application. |
|
Keep learning
Related topics
- Learn more about uploading images and videos using the Flutter SDK.
- Take a look at our Upload guide to learn about uploading to Cloudinary in general.
- Use the Upload API reference to find all the options and parameters available for the SDK.
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
If you like this, you might also like...
Configure the Flutter SDK
Install and configure the Cloudinary Flutter SDKCreate Upload Presets
Streamline media uploads using signed upload presetsUpload Widget
Embed an Upload Widget in your site
Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.
✖️