Comments (17)
I just found a potential solution (or instead an alternative) :
I convert files into Base 64 before uploading, and I use the cloudinary.uploader.upload()
method.
Here's my code :
import mime from 'mime';
const file = formData.get('image') as File;
const arrayBuffer = await file.arrayBuffer();
const buffer = new Uint8Array(arrayBuffer);
const base64File = Buffer.from(buffer).toString('base64');
const fileMimeType = mime.getType(file.name);
await cloudinary.uploader.upload(
`data:${fileMimeType};base64,${base64File}`,
{ tags: ['avatars'], folder: 'images' },
);
Don't forget to do additional checks before uploading (file size, type, etc.).
This code is working for me in production and when I build my project.
Feel free to give me your feedback!
Framework: Next.js 14.1.0
Hosting: Vercel
from cloudinary_npm.
@nirvikpurkait thanks, i was able to replicate, please leave the sandbox running if you don't mind as we have an internal bug for this and the codesandbox link is really handy.
we will keep you posted.
from cloudinary_npm.
Thanks for the fix. Now it is working fine with all jpg, png, svg for me.
from cloudinary_npm.
Hi @nirvikpurkait ,
Thanks for contacting Cloudinary.
The codesandbox you provided works fine without a problem. I looked at the logs of your account and I see that there could be a problem with the API Config in Production. Can you please check the settings accordingly of the API Key and API Secret?
Thanks,
Sree
from cloudinary_npm.
Hi @skalahasti-cloudinary , thanks for your response.
As you said earlier -
I looked at the logs of your account and I see that there could be a problem with the API Config in Production.
Maybe you looked at the logs, when I accidentally re-run the code, after I changed the .env
file, before sharing the codesandbox.
Anyway, I have checked the log also, built and run the app again. It still gives me the error.
I made a video about the error in production, and I wanted to attach the video here, but the video is too large to upload here, so I am providing a link for the video.
In case you can't find the video or don't have time to see through it, (as it is more than 2 min.) I am also going to provide some snapshot of it.
I reproduced the error with same .env
file using in development
and production
(without changing any value), after the video I changed the .env
file again (trying not to share the API SECRET
).
from cloudinary_npm.
@nirvikpurkait thx for the reply.
So what we're seeing in the failed uploads is that the API key param contains SVG file data as well instead of it being part of the file
parameter e.g.
5xxxxxxxxxxxxx8
--xxxxxxxxxxx
Content-Disposition: form-data; name="file"; filename="file"
Content-Type: application/octet-stream
<svg width="638" height="599" viewBox="0 xxxxxx 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="text">
<path id="The" d="M2xxxxxx36.0...
As you can see, you need to only send 5xxxxxxxxxxxxx8
.
Please check why in prod mode your app is including the SVG file data in the API key instead of the file
parameter.
from cloudinary_npm.
Hello, I'm facing the exact same issue. Everything works perfectly in development mode, but in production, I encounter the same error.
When I submit a form with files using a Server Action, I encounter an error when trying to upload.
Here's the relevant code:
const folderPrefix = getCloudinaryEnv();
const folder = 'test';
const arrayBuffer = await file.arrayBuffer();
const buffer = new Uint8Array(arrayBuffer);
return await new Promise((resolve, reject) => {
cloudinary.uploader
.upload_stream(
{ tags, folder: `${folderPrefix}/${folder}` },
(error, result) => {
if (error) {
reject(error);
return;
}
resolve(result);
},
)
.end(buffer);
});
The error :
error {
message: `Server return invalid JSON response. Status Code 500. SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON`,
name: 'Error',
http_code: 500
}
@nirvikpurkait Did you find a solution?
Framework: Next.js 14.1.0
Hosting: Vercel
from cloudinary_npm.
@thomaslenaour is it happening when uploading SVG files or any file types?
from cloudinary_npm.
@tommyg-cld In my case it was JPG files. I think this is the same problem for any types, I didn't test other files.
from cloudinary_npm.
@thomaslenaour are you able to share a your project via codesandbox or similar so that we can replicate?
from cloudinary_npm.
@thomaslenaour is it happening when uploading SVG files or any file types?
@tommyg-cld As of now it is happening with all jpg
, png
, svg
file type.
import mime from 'mime';
const file = formData.get('image') as File;
const arrayBuffer = await file.arrayBuffer();
const buffer = new Uint8Array(arrayBuffer);
const base64File = Buffer.from(buffer).toString('base64');
const fileMimeType = mime.getType(file.name);await cloudinary.uploader.upload(
`data:${fileMimeType};base64,${base64File}`
{ tags: ['avatars'], folder: 'images' },
);
@thomaslenaour Thanks for sharing the idea, what ever my need is, it can be fulfilled by that.
- But what if someone needs to upload a stream as written in documentation . In that case it is throwing an error.
from cloudinary_npm.
@nirvikpurkait are you able to share your codesandbox project where we can replicate this?
from cloudinary_npm.
@nirvikpurkait are you able to share your codesandbox project where we can replicate this?
Here you can put your api-key, secret, cloud name, and try it out.
I have also provided some screenshot in this comment
from cloudinary_npm.
I just found a potential solution (or instead an alternative) :
I convert files into Base 64 before uploading, and I use the
cloudinary.uploader.upload()
method.Here's my code :
import mime from 'mime'; const file = formData.get('image') as File; const arrayBuffer = await file.arrayBuffer(); const buffer = new Uint8Array(arrayBuffer); const base64File = Buffer.from(buffer).toString('base64'); const fileMimeType = mime.getType(file.name); await cloudinary.uploader.upload( `data:${fileMimeType};base64,${base64File}`, { tags: ['avatars'], folder: 'images' }, );Don't forget to do additional checks before uploading (file size, type, etc.).
This code is working for me in production and when I build my project.
Feel free to give me your feedback!
Framework: Next.js 14.1.0 Hosting: Vercel
I want to directly add base64 file to cloudinary any idea about it ?
from cloudinary_npm.
@Ja3mamtora can you provide more details on what you're trying to do? The post you are referring does exactly that, are you having issues using it? Note this was a temp workaround suggested by @thomaslenaour until we fix the issue on our end.
from cloudinary_npm.
Hello, I can confirm that the upload_stream()
function works great for me in production with the last release v.2.0.3
.
Thanks Cloudinary team for the fix!
from cloudinary_npm.
@thomaslenaour that is great to hear, thanks for the update. I will be closing this issue then.
from cloudinary_npm.
Related Issues (20)
- Time to Remove Node.js 6 support
- Remove the Node.js 6 support HOT 1
- Custom Analytics IDs Don't Produce Custom Code HOT 1
- Wrong response type from https://api.cloudinary.com/v1_1/<cloud>/auto/upload HOT 4
- Webpack on nextjs always throws depency warnings HOT 27
- Cloudinary API corrupts UTF-8 public IDs/file names HOT 2
- When will Cloudinary support node 18 or a later version? HOT 6
- Invalid signature HOT 2
- Error while uploading profile image Cannot read properties of undefined (reading 'path') HOT 1
- Property 'next_cursor' does not exist on type 'ResourceApiResponse' HOT 2
- Missing`upload_stream` documentation HOT 6
- Escaping overlay text seems impossible in the version 1.41.0 HOT 6
- Unexpected token < in JSON at position 0. Status code 500 in Nextjs 13 production build (App router) HOT 9
- Support passing in analytics product version to URL generation HOT 2
- Typescript error on search API HOT 2
- Invalid signature String to sign HOT 2
- Cloudinary.com Signup Process HOT 3
- Missing return types on v2.api.resources() HOT 4
- "Error: must supply api_key" in heroku log HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cloudinary_npm.