vue3 and image upload

Options
jammin
jammin Member Posts: 4 ✭
in Developer APIs

I'm very new to the cloudinary vue sdk but I can't see any way to upload images without using the widget?

I want to create a form for users that allows them to fill in text fields and select multiple images.

When my form is submitted I will validate contents in vue, then send the media to cloudinary and capture media details from the response.

If all is well I will add these details to the rest of the form to send to the backend for storage.

At the moment I've submitted the media with the form and the backend is doing the uploading which is obviously a pointless overhead,

Has anyone done something similar to this with the vue library?

Tagged:

Answers

  • DannyFromCloudinary
    DannyFromCloudinary Member, Cloudinary Staff Posts: 98
    Options

    Hi @jammin! Danny from Cloudinary Support here.

    You should be able to perform a POST request to https://api.cloudinary.com/v1_1/${cloudName}/upload, passing the name of an unsigned upload preset, along with the file you wish to upload.

    I'm afraid I don't have a specific Vue example to share with you, however you should be able to use our CodeSandbox example which uses Javascript to perform the upload, and adapt it accordingly: https://codesandbox.io/p/sandbox/cld-form-unsigned-upload-0fvy8?embed=1

    Just be sure to update the url specified in upload.js so it references to your own cloud name and upload preset.

    I hope this helps! Please let us know how it goes, and if you need further support, I would recommend raising a support ticket so we can go through particulars with you.

    All the best!

    -Danny

  • jammin
    jammin Member Posts: 4 ✭
    Options

    Hi Danny,

    Actually could we keep it open please? I'd like to know when it's sorted and also I promised I would add more examples which I haven't done yet but I will!

    Thanks

Categories