Upload Images to cloudinary directly from browser

Question

Upload Images to cloudinary directly from browser

1.1k Views Asked by Bharat Kotwani At 15 May 2025 at 20:42

I'm new to cloudinary and I want to upload multiple images directly to cloudinary from browser

My code is:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="css/jquery.fileupload-noscript.css" rel="stylesheet" />
    <link href="css/jquery.fileupload-ui-noscript.css" rel="stylesheet" />
    <link href="css/jquery.fileupload-ui.css" rel="stylesheet" />
    <link href="css/jquery.fileupload.css" rel="stylesheet" />
    <title></title>
    <script src='http://code.jquery.com/jquery-1.11.1.min.js' type='text/javascript'></script>
    <script src='js/jquery.ui.widget.js' type='text/javascript'></script>
    <script src='js/jquery.iframe-transport.js' type='text/javascript'></script>
    <script src='js/jquery.fileupload.js' type='text/javascript'></script>
    <script src="js/jquery.cloudinary.js"></script>
    <script>
        $.cloudinary.config({ cloud_name: 'imagedb-com', api_key: '634138425488393' })
        $(document).ready(function () {

            var timestamps = timestamp();
            alert(timestamps);
            var data = '{"timestamp":' + timestamps + ',"callback":"http://localhost:1174/js/newjs/cloudinary_cors.html" ,"signature":"JuQVk6zYQi_kF_sT_AxHBg3upjY" ,"api_key":"634138425488393"}';


            $('.cloudinary-fileupload').fileupload({
                disableImageResize: false,
                acceptFileTypes: /(\.|\/)(gif|jpe?g|png|bmp|ico)$/i,
                maxFileSize: 20000000, // 20MB
                formData: data
            });
            $('.cloudinary-fileupload').append($.cloudinary.unsigned_upload_tag("zcudy0uz",{ cloud_name: 'imagedb-com' }));
        });

        function timestamp() {
            var last, diff;
            last = event.timeStamp;
            return last;
        }

    </script>
</head>
<body>
    <input name="file" multiple type="file"   class="cloudinary-fileupload" id="cloud" data-cloudinary-field="image_id" />
    <input type="button" value="submit" id="btn-upload"/>
</body>
</html>

This gives me an error Bad Request. {"error":{"message":"Missing required parameter - file"}} Please Help me in doing this.

Original Q&A

There are 2 best solutions below

**Itay Taragano** · Answer 1

Can you please share which upload type you require? It seems that this code has a mix of both signed and unsigned uploads. For example, you use the unsigned_upload_tag method while also passing the timestamp, api_key and signature which are required only for signed uploads.

**Deminetix** · Answer 2

Let's all take a moment to point out how horrible Cloudinary's documentation is. It's easily the worst i've ever seen. Nightmare fuel.

Now that i've got that off my chest... I really needed to be able to do signed uploads from the browser and I spent way too long banging my head against walls for what should be extremely simple. Here it is...

Server (Node.js)

You'll need an endpoint that returns a signature-timestamp pair to the frontend:

import cloudinary from 'cloudinary'

export async function createImageUpload() {
  const timestamp = new Date().getTime()
  const signature = await cloudinary.utils.api_sign_request(
    {
      timestamp,
    },
    process.env.CLOUDINARY_SECRET
  )
  return { timestamp, signature }
}

Client (Browser)

The client makes a request to the server for a signature-timestamp pair and then uses that to upload a file. The file used in the example should come from an <input type='file'/> change event etc.

const CLOUD_NAME = process.env.CLOUDINARY_CLOUD_NAME
const API_KEY = process.env.CLOUDINARY_API_KEY

async function uploadImage(file) {
  const { signature, timestamp } = await api.post('/image-upload')
  const form = new FormData()
  form.append('file', file)
  const res = await fetch(
    `https://api.cloudinary.com/v1_1/${CLOUD_NAME}/image/upload?api_key=${API_KEY}&timestamp=${timestamp}&signature=${signature}`,
    {
      method: 'POST',
      body: form,
    }
  )
  const data = await res.json()
  return data.secure_url
}

That's it. That's all it takes. If only Cloudinary had this in their docs.

Upload Images to cloudinary directly from browser

There are 2 best solutions below

Server (Node.js)

Client (Browser)

Related Questions in JQUERY

Related Questions in JQUERY-PLUGINS

Related Questions in CLOUDINARY

Trending Questions

Popular # Hahtags

Popular Questions