CODEWITHSUNDEEP
image-uploadingcloudinary
Md. Akhtar Uzzaman
Md. Akhtar Uzzaman

Reputation: 178

How to save an image to a specific folder with Cloudinary?

I want to save an image file in a specific folder on Cloudinary. The folder name is "userimg".

Here is my code to save without a folder.

My cloudinary and folder directory.

Upvotes: 2

Views: 1975

Answers (3)

Raman Sharma
Raman Sharma

Reputation: 281

In dot net we can do this by initalizing the [Folder] field of the [ImageUploadParams] object with [your-folder-name].

 public async Task<ImageUploadResult> UploadPhotoAsync(IFormFile photo)
{
    var uploadResult = new ImageUploadResult();
    if (photo != null && photo.Length > 0)
    {
        using (var stream = photo.OpenReadStream())
        {
            var uploadParams = new ImageUploadParams()
            {
                Folder = "your-folder-name", //here
                File = new FileDescription(photo.FileName, stream),
                Transformation = new Transformation().Height(500).Width(800)
            };
            uploadResult = await cloudinary.UploadAsync(uploadParams);
        }
    }
    return uploadResult;
}

Upvotes: 0

Md. Akhtar Uzzaman
Md. Akhtar Uzzaman

Reputation: 178

the code of save an image file in specific folder on cloudinary: 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div class="container">
    <div class="card">
        <img src="http://fillmurray.com/g/300/300" id="img-preview" />
        <label class="file-upload-container" for="file-upload">
            <input id="file-upload" type="file">
            Select an Image
        </label>
    </div>
</div>
<script>
    var cloudeinary_url = "your_cloudeinary_url";
    var upload_presets = "your_upload_presets";

    var ingpriview = document.getElementById("img-preview");
    var fileupload = document.getElementById("file-upload");

    fileupload.addEventListener('change',
        function (event) {
            var files = event.target.files[0];
            var formData = new FormData();
            formData.append('file', files);
            formData.append('upload_preset', upload_presets);
            formData.append('folder', 'itemimg'); // itemimg is folder name

            axios({
                url: cloudeinary_url,
                method: 'POST',
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: formData
            }).then(function (res) {
                document.getElementById("img-preview").src = res.data.secure_url;
                console.log(res);
            }).catch(function (err) {
                console.log(err);
            });
        });
</script>

Upvotes: 2

Roee Ben-Ari
Roee Ben-Ari

Reputation: 610

Cloudinary Upload API supports a folder parameter. See - https://cloudinary.com/documentation/image_upload_api_reference#upload

Please try adding:

formData.append('folder', 'userimg');

You can also include the folder in the public ID, e.g., 'myfolder/myimageid'.

Also, see:

https://support.cloudinary.com/hc/en-us/articles/202520902-Can-I-create-folders-in-my-Cloudinary-account-

Upvotes: 3

Related Questions