using it with Meteor. - Githubissues

frankapimenta commented 8 years ago

uploader.js:525 Uncaught TypeError: post_request.setTimeout

bziskind commented 8 years ago

any luck with this? Having the same issue.

taragano commented 8 years ago

My apologies for the delay.

If this is still relevant, please share:

What's the full error message.
Was the upload from the client or server side?
What's the code that calls the upload.
What options passed to upload.

Please also share:

The Meteor version
And the package.json (dependencies of the project)

bziskind commented 8 years ago

Thanks for following up!

What's the full error message

browser stacktrace: validated-method.js:75 Uncaught TypeError: post_request.setTimeout is not a function

post @ modules.js?hash=9a8ddcc…:16741 call_api @ modules.js?hash=9a8ddcc…:16688 exports.upload @ modules.js?hash=9a8ddcc…:16280 run @ methods.js:30 _execute @ validated-method.js:93 .. ..

The error is occurring inuploader.js line 525 post_request.setTimeout((ref = options.timeout) != null ? ref : 60000, function() { timeout = true; return post_request.abort(); });

Was the upload from the client or server side?

server (although I previously tried from client with same result)

What's the code that calls the upload.

import cloudinary from "cloudinary"; export const uploadImage = new ValidatedMethod({ name: 'upload.image', validate: null, run() { cloudinary.uploader.upload(, function (result) { console.log(result) }); }, });

What options passed to upload.

none?

The Meteor version

1.3.2.4

package.json (dependencies of the project)

{ "name": "hello", "private": true, "scripts": { "start": "meteor run" }, "dependencies": { "blueimp-file-upload": "^9.12.5", "cloudinary": "^1.3.1", "cloudinary-jquery-file-upload": "^2.0.9", "meteor-node-stubs": "^0.2.3" } }

bziskind commented 8 years ago

Any progress with this? Thanks.

taragano commented 7 years ago

I'm very sorry for my response delay.

Have you made sure the configuration process is as written in the instructions?

The flow is supposed to look something similar to -

var cloudinary = require('cloudinary');
cloudinary.config({ 
cloud_name: 'sample', 
api_key: '874837483274837', 
api_secret: 'a676b67565c6767a6767d6767f676fe1' 
});
cloudinary.uploader.upload(<image>, function(result) { 
  console.log(result) 
});

Have you manage to run the sample project? Please try to run it in order to eliminate other options. You can found the sample project in node.js: https://github.com/cloudinary/cloudinary_npm/tree/master/samples

For more information: http://cloudinary.com/documentation/node_integration#getting_started_guide

yjfoo commented 7 years ago

I'm having the same issues on Meteor 1.4.2.3

Am trying to do unsigned upload from browser to Cloudinary

From browser console Uncaught TypeError: post_request.setTimeout is not a function at post (modules.js?hash=8e4f7e0…:27231) at call_api (modules.js?hash=8e4f7e0…:27178) at Object.exports.upload (modules.js?hash=8e4f7e0…:26715) at Object.exports.unsigned_upload (modules.js?hash=8e4f7e0…:26705) at Object.unsigned_upload (modules.js?hash=8e4f7e0…:26359) at Dropzone2.handleImageUpload (Dropzone2.jsx:23) at Dropzone2.onImageDrop (Dropzone2.jsx:19) at Dropzone.onDrop (modules.js?hash=8e4f7e0…:24823) at Object.executeOnChange (modules.js?hash=8e4f7e0…:16768) at ReactDOMComponent._handleChange (modules.js?hash=8e4f7e0…:16584) post @ modules.js?hash=8e4f7e0…:27231 call_api @ modules.js?hash=8e4f7e0…:27178 exports.upload @ modules.js?hash=8e4f7e0…:26715 exports.unsigned_upload @ modules.js?hash=8e4f7e0…:26705 (anonymous) @ modules.js?hash=8e4f7e0…:26359 handleImageUpload @ Dropzone2.jsx:24 onImageDrop @ Dropzone2.jsx:19 onDrop @ modules.js?hash=8e4f7e0…:24823 executeOnChange @ modules.js?hash=8e4f7e0…:16768 _handleChange @ modules.js?hash=8e4f7e0…:16584 ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback @ modules.js?hash=8e4f7e0…:9820 executeDispatch @ modules.js?hash=8e4f7e0…:9600 executeDispatchesInOrder @ modules.js?hash=8e4f7e0…:9623 executeDispatchesAndRelease @ modules.js?hash=8e4f7e0…:9007 executeDispatchesAndReleaseTopLevel @ modules.js?hash=8e4f7e0…:9018 forEachAccumulated @ modules.js?hash=8e4f7e0…:9927 processEventQueue @ modules.js?hash=8e4f7e0…:9221 runEventQueueInBatch @ modules.js?hash=8e4f7e0…:16217 handleTopLevel @ modules.js?hash=8e4f7e0…:16228 handleTopLevelImpl @ modules.js?hash=8e4f7e0…:21303 perform @ modules.js?hash=8e4f7e0…:12337 batchedUpdates @ modules.js?hash=8e4f7e0…:21216 batchedUpdates @ modules.js?hash=8e4f7e0…:11005 dispatchEvent post @ modules.js?hash=8e4f7e0…:27231 call_api @ modules.js?hash=8e4f7e0…:27178 exports.upload @ modules.js?hash=8e4f7e0…:26715 exports.unsigned_upload @ modules.js?hash=8e4f7e0…:26705 (anonymous) @ modules.js?hash=8e4f7e0…:26359 handleImageUpload @ Dropzone2.jsx:24 onImageDrop @ Dropzone2.jsx:19 onDrop @ modules.js?hash=8e4f7e0…:24823 executeOnChange @ modules.js?hash=8e4f7e0…:16768 _handleChange @ modules.js?hash=8e4f7e0…:16584 ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback @ modules.js?hash=8e4f7e0…:9820 executeDispatch @ modules.js?hash=8e4f7e0…:9600 executeDispatchesInOrder @ modules.js?hash=8e4f7e0…:9623 executeDispatchesAndRelease @ modules.js?hash=8e4f7e0…:9007 executeDispatchesAndReleaseTopLevel @ modules.js?hash=8e4f7e0…:9018 forEachAccumulated @ modules.js?hash=8e4f7e0…:9927 processEventQueue @ modules.js?hash=8e4f7e0…:9221 runEventQueueInBatch @ modules.js?hash=8e4f7e0…:16217 handleTopLevel @ modules.js?hash=8e4f7e0…:16228 handleTopLevelImpl @ modules.js?hash=8e4f7e0…:21303 perform @ modules.js?hash=8e4f7e0…:12337 batchedUpdates @ modules.js?hash=8e4f7e0…:21216 batchedUpdates @ modules.js?hash=8e4f7e0…:11005 dispatchEvent @ modules.js?hash=8e4f7e0…:21378

My code: import React from 'react'; import Dropzone from 'react-dropzone'; import * as cloudinary from 'cloudinary'; const CLOUDINARY_UPLOAD_PRESET = 'XYZ'; export default class Dropzone2 extends React.Component { constructor(props) { super(props); this.onImageDrop = this.onImageDrop.bind(this); } onImageDrop(files) { this.setState({ uploadedFile: files[0] }); this.handleImageUpload(files[0]); } handleImageUpload(file) { console.log(file); cloudinary.v2.uploader.unsigned_upload(file, CLOUDINARY_UPLOAD_PRESET, { cloud_name: "XYZ" }, function(error, result) {console.log(error, result) });
} render() { return (

Drop an image or click to select a file to upload.

)}

}

taragano commented 7 years ago

@yjfoo, Can you please try and see whether the following can help you tackle this? https://css-tricks.com/image-upload-manipulation-react/

yjfoo commented 7 years ago

@taragano I followed the instruction and got this error modules.js?hash=aa5fb06…:76142 Uncaught TypeError: this._formData.once is not a function at Request._getFormData (modules.js?hash=aa5fb06…:76142) at RequestBase.field (modules.js?hash=aa5fb06…:77996) at Dropzone2.handleImageUpload (Dropzone3.jsx:26) at Dropzone2.onImageDrop (Dropzone3.jsx:21) at Dropzone.onDrop (modules.js?hash=aa5fb06…:24823) at Object.executeOnChange (modules.js?hash=aa5fb06…:16768) at ReactDOMComponent._handleChange (modules.js?hash=aa5fb06…:16584) at Object.ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback (modules.js?hash=aa5fb06…:9820) at executeDispatch (modules.js?hash=aa5fb06…:9600) at Object.executeDispatchesInOrder (modules.js?hash=aa5fb06…:9623)

taragano commented 7 years ago

It seems like you're trying to use our Node SDK (npm) package in order to do uploads, Node JS is a server side technology while you're actually working on the Client Side (React.js). That won't work since the server side javascript and client side javascript support a different sets of APIs natively. Also, we currently don't support any upload mechanism in our cloudinary-core or cloudinary-react libraries out of the box. You can have a look at the following example in CodePen which shows how to write an uploader in core javascript (fill in your "cloudName" and "unsignedUploadPreset" params, and make sure that the upload preset does not have a special 'folder' otherwise you won't see the uploaded image feedback after the upload is finished): http://codepen.io/eitanp461/pen/BpaYmR

Please let us know if this helps?

joaoeffting commented 7 years ago

Same error here. Using it with meteor and React.

The upload is working ok but when I try to destroy the image I got this "post_request.setTimeout is not a function"

:(

strausr commented 7 years ago

@joaoeffting Since your use case is not that clear can you please share additional details on what is causing the error?

Note that you can also open a support ticket at support@cloudinary.com and we'll be able to dig deeper into the case.

joaoeffting commented 7 years ago

@strausr tks .. I think it's my mistake because I'm using it on the Client. I need to figure out how to do this in the Meteor Server... I didn't try yet, but if that works then I'll post my solution here ^^

I think it works because the Vulcanjs uses Cloudinary ... so I think I just need to make some adjustments :D

(In my case the upload works because I'm using that component that open a modal.)

strausr commented 7 years ago

@joaoeffting thanks for the update:) I'm closing this thread for now but feel free to further approach us with any questions you might have.

joaoeffting commented 7 years ago

For those who may be facing this problem, here's my solution:

I put my method inside Meteor.isServer. Just it :p

if (Meteor.isServer) { 'cloudinary.destroy'(public_id) { const cloudinaryApp = require('cloudinary'); cloudinaryApp.config({ cloud_name: 'CLOUD_NAME', api_key: 'API_KEY', api_secret: 'API_SECRET' }); return cloudinaryApp.v2.uploader.destroy(public_id); } }

then you just call in the client

Meteor.call('cloudinary.destroy', your_image_public_id);

You just need to put the method on the server. Just it :p

cloudinary / cloudinary_npm

using it with Meteor. #101