upload image blob to Cloudinary

Question

Im using react and react-router on the frontend, node+express as my backend and cloudinary to store my image files.

The issue Im having is that the cloudinary api method cant seems to open/parse the data blob where the image is stored

 { images: { preview: 'blob:http://localhost:8080/19526dcc-b67d-4697-b112-e5480de61d03' } }

    cloudinary.v2.uploader.upload(body.images.preview, function(result) { 
       console.log(result) 
    })

The ERROR response:

{ Error: ENOENT: no such file or directory, open 'blob:http://localhost:8080/e7f30c71-7e06-4c36-801f-49666e9df053'
  at Error (native)
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: 'blob:http://localhost:8080/e7f30c71-7e06-4c36-801f-49666e9df053'
}

Not sure if this is a issue due to react-router or should I convert the data to a different format?

Routes look like:

app.use('/api/', posts);
app.use('/api/', users);
app.use(express.static(staticPath));
app.use('/', express.static(staticPath));
app.use('/posts/*', express.static(staticPath));
app.use('/new/*', express.static(staticPath));
app.use('/validateEmail/*', express.static(staticPath));

Answer 1

Cloudinary's upload method accepts the following types for the file parameter:

• A local file path (supported in Cloudinary SDKs only)
• The actual data (byte array buffer). For example, in some Cloudinary SDKs, this could be an IO input stream of the data (e.g., File.open(file, "rb")).
• The Data URI (Base64 encoded), max ~60MB (62,910,000 chars)
• The remote FTP, HTTP or HTTPS URL address of an existing, publicly-accessible file
• An S3 URL of a whitelisted bucket

If you're able to access the blob data (not just the blob URL), it can be converted to a data URI which will be accepted by the file parameter to Cloudinary's upload method. For help with converting a blob to a data URI, see this StackOverflow answer.