Uploadcare - How to set the value of the Image URL?

Question

I have a number of pictures displayed on a user's webpage and I want to give the user the ability to select and crop any images. I am using uploadcare widget to allow the user to perform that. In simple words, all I want to achieve is, a user selects an image and the URL of that image get updated to the value of the input and so the widget opens up and allows the user to crop the image and upload it. I will then use the UUID of the edited image and replace the image with the older image.

I am using this as guidance:Image Cropping for Web Apps with Uploadcare.

I have the widget's code in main HTML page with the value set to empty string but I am not able to update the value when the user selects an image. I have also tried to dynamically create a form with JavaScript code but that also doesn't work.

This if the form which contains the code for the widget

<form id="form_crop_image_id" action="" >
<input
      id="crop_image"
      name="crop_edit_image"
      value=""
      type="hidden"
      role="uploadcare-uploader"
      data-images-only
      data-crop
/>
<button class="btn" id ="edit_picture_btn" type="button" </button>
</form>

This is how I am trying to update the value of the element in the form

form_object_id = document.forms['form_crop_image_id'];
form_object_id.elements['crop_edit_image'].value = image_url;//var holds the selected image url
console.log(form_object_id.elements['crop_edit_image'].value);

My expected behaviour would be that a user selects an image and the URL is set to the value so that the user can edit that particular image. The actual behaviour is that the value remains set and cannot be modified. Any helps will be appreciated.

Have a look at this answer: https://stackoverflow.com/a/42860401/5483079 — www.admiraalit.nl, Jun 18 '19 at 12:56

Alex Chernenko · Accepted Answer · 2019-06-19T16:19:57.367

3

Only Uploadcare CDN URLs are allowed to be set as the value of the widget's input field if you want to preload a file. If the images on your page are not hosted at Uploadcare, you need to upload them to Uploadcare first to be able to edit them in the widget. You can do this programmatically with the uploadcare.fileFrom method. Before this, you need to get a widget instance to be able to update the widget's value with the file instance created from a URL.

// get an instance of the widget
var widget = uploadcare.Widget('[role=uploadcare-uploader]');
// create a file instance from the URL of the image selected
var file = uploadcare.fileFrom('url', image_url);
// preload the file to the widget
widget.value(file);
// open widget's dialog
widget.openDialog('preview');

Then, after cropping/editing, you can get the modified URL this way

widget.onChange(function (file) {
  file.done(function (fileInfo) {
    // log the updated URL to console or do anything you need with it
    console.log(fileInfo.cdnUrl);
  });
});

edited Jun 19 '19 at 16:19

answered Jun 18 '19 at 15:38

Alex Chernenko

196
4

Thanks. I have managed to integrate this to my project. However, I tried to add the 'data-crop="" ' option to the widget parameters but it doesn't give me the option to crop the image. Moreover, I am getting an undefined function on file.done method. I have imported all the required dependencies. Please help what am i doing wrong??? – AzyCrw4282 Jun 19 '19 at 11:22
Can you share your code snippet via CodePen or JSFiddle so I can check it live? – Alex Chernenko Jun 19 '19 at 12:52
Thanks. You're using an outdated version of the widget which has different JS API. Use v3.x instead. Also, there was an error in my code snippet – I should have used the `onChange` method instead of `onUploadComplete`. I've edited my answer to fix it. I've also edited your code snippet to make it work https://jsfiddle.net/8pfn2ykd/ – Alex Chernenko Jun 19 '19 at 16:22

score 0 · Answer 2 · answered Jun 18 '19 at 11:57

0

Don't use the elements property. The result is as follows:

form_object_id = document.forms['form_crop_image_id'];
form_object_id['crop_edit_image'].value = image_url;  //var holds the selected image url
console.log(form_object_id['crop_edit_image'].value);

answered Jun 18 '19 at 11:57

www.admiraalit.nl

5,768
1
17
32

Thanks but i am afraid that has no difference, It still behaves the same as before. I would love to know, if you have experience using uploadcare, is it posssible to alter the value of the input and if so what are the ways of doing it? Thanks. – AzyCrw4282 Jun 18 '19 at 12:11
It should work. Have a look at this: https://jsfiddle.net/dftsx69r/ Do you use a JavaScript debugger? – www.admiraalit.nl Jun 18 '19 at 12:38
Note that your button tag is not correct. The ``>`` is missing. – www.admiraalit.nl Jun 18 '19 at 12:41
Hi. Yes, with just a field it works(of-course). However, my question is in regards to where the 'value should be applied to a widget' to set the url. I do appologize for the confusion as i tried to minimize the contenet. Please see the link here to see my question in my context https://www.gun.io/blog/image-cropping-for-your-web-app-in-20-minutes – AzyCrw4282 Jun 18 '19 at 14:26
I'm sorry, I don't have experience with uploadcare. But do you agree that your JavaScript is incorrect and that, with my answer, you are able to modify the value of the input and that your console.log statement will print the new value? – www.admiraalit.nl Jun 18 '19 at 14:36
Yes I agree with that. – AzyCrw4282 Jun 18 '19 at 14:52
Okay, I'm glad I could help you taking the first step toward a solution. Maybe you could fix the JavaScript in your question? Maybe add a clarification of the remaining problem you have? I hope others will help you further. – www.admiraalit.nl Jun 18 '19 at 14:56

Uploadcare - How to set the value of the Image URL?

2 Answers2