Any plan to support upload widget?

[ewittle]

Would also be interested in upload functionality, especially signed uploads. I'm hoping to include Cloudinary upload in my React application, but I would like signed uploads. I would think I could implement a RESTful API to provide the signature, and have the rest of the logic be embedded in React.

[loris]

+1

[taragano]

Please note that most of the widget's functionalities are available using pure Javascript. Initializing the widget is pretty much a single line of Javascript code. Implementing signed uploads can be done via a standard Ajax call, which requests the signature from your server. As the signature is based on your account's api_secret, which must be kept excluded from your client-side code, the signature generation must be done on your server-side rather than on the client-side.

[hmontes]

+1. Crop things, previews and Facebook uploads are very much easier with the Upload Widget.

[taragano]

I'm not sure I fully understand the Facebook Uploads one, if you mean uploading by a URL, then this is fully supported by our upload widget even with its pure Javascript initiation. Cropping, previews and the other more advanced widget capabilities, are currently supported by also including jQuery.

[wittlesouth]

So I ended up implementing the upload via a fetch API with the api_secret being set on the server side. My server side is Python / Flask / Flask-Restful. I found the documentation on how to do this exceedingly weak, and ended up avoiding most of the cloudinary python libraries. I use two specific functions from those libraries; here is my import statement:

from cloudinary.utils import build_upload_params, sign_request

I construct parameters based on both server-side inputs (authenticated username) and client-side inputs (upload options from the form I expose in the UI).

My +1 was intended to indicate that I see the need for a minimalist example of what needs to be done on the server side to generate the signature that defines which components in the upload request that Cloudinary will include in signature validation on the server side, and I'd prefer to see a Python library from Cloudinary that does nothing but signature generation based on the upload parameters, because for anyone who has most of their application logic in the browser, all they need is the signature generation on the server side.

If I missed simple, clear documentation on how to do this, feel free to ignore my feedback. I'm past the need for this right now anyway.

[ro-savage]

I'd also love to have a way for the user to crop/resize on client side.

Maybe an optional dep of react-image-crop or react-avatar-editor until a non-jquery component can be created by cloudinary?

[TiagoGouvea]

Some old code, but could be useful is domenicosolazzo/react-cloudinary-uploader. I'm trying to update it to run with ES6, but, no success. When I finally call "openUploadWidget" it just don't open. :(

[strausr]

@TiagoGouvea Can you please provide us with more information such as how you're implementing the openUploadWidget and if you're seeing any errors? Please feel free to open a support ticket with more details at support@cloudinary.com

[bkniffler]

Implementing uploading into a SPA react app is really a pain with cloudinary. I wished your component ecosystem was as good and polished as the service itself :(

[somerohit]

@bkniffler any change since you posted that? asking because i also have an SPA reactjs app and am considering cloudinary and their upload widget. TIA.

[bkniffler]

Don't know @somerohit, I've moved away from using cloudinary react components. But looking at the commit history (https://github.com/cloudinary/cloudinary-react/graphs/commit-activity) tells me that this lib hasn't been getting the love it needs.

[strausr]

@somerohit Please note that the upload widget is purely client side and can be simply integrated using a single js request. http://jsfiddle.net/RayStra/gevc4ktm/

[TiagoGouvea]

I wrote a React component to upload and we are using it for months. It's not incredible solution, but it just works like expected. It can be used static (without react component) or with component:

<ReactCloudinaryUploader
        cloudName='appmasters-io'
        uploadPreset='willim-dev'
        onUploadSuccess={(image)=>{
            console.log("image",image);
        }}
    />

Take a look to repo, and do a PR if you want to help.

[GaddMaster]

Any documentation that explains fully how to create a signature for the client side widget?

[shirlymanor]

@GaddMaster you can follow the directions here: https://cloudinary.com/documentation/upload_widget#signed_uploads

[roeeba]

Closing this issue due to the time elapsed. Please feel free to either re-open the issue, contact our support at http://support.cloudinary.com or create a new ticket if you have any additional issues.

[JordanTreDaniel]

When the original author of this post asked about support, I'm pretty sure he meant a component. That's what a lot of people are getting at. Just because it can be done with JS and/or jquery, it doesn't mean you're supporting React. I am currently trying to implement the upload widget in my app, and I find myself going against the whole architecture of my app. The js implementation of the upload widget DOES NOT support React in my opinion.

[bkniffler]

Yeah, if you want to have an example for a great upload component, just take a closer look to https://github.com/transloadit/uppy

Its modular and sleek and supports all kinds of environments without relying on globals and external scripts to work.

[eyalktCloudinary]

@JordanTreDaniel @bkniffler Thank you for your feedback, I've created an internal ticket for considering your suggestions.