Cloudinary upload widget with Jquery "Failed to set the 'value' property on 'HTMLInputElement'"

Question

I am trying to include the jquery widget of cloudinary on a website so that it allows the client to be able to crop the image before upload. (basically a profile photo). I have added the following code to the page:

$('#upload_widget_opener').cloudinary_upload_widget(
{ cloud_name: 'moin-qidwai-me', upload_preset: 'zn7qhrdi' ,'form':'#profile-setting',
'field_name':'userPhoto', 'thumbnails':'#user_photo', cropping: 'server', 'folder':
'user_photos' },
function(error, result) { console.log(error, result) });

I was testing something and hence I commented this code out and when I uncommented it apparently it stopped woking and gives me this error:

 Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

I have the whole file in the same state now through undos as it was before the commenting thing so it can not be anything I did after the comments but thats what it makes it so weird.

Another issue is that even when it was working it was adding a input field of type hidden, is there a way I can get the url of the image that is uploaded and set the value of my own input field as that url?

Solution 1

I resolved this issue by making a custom cropping tool for PHP/GD and using javascript/Jquery for front end stuff.

Let me know if anyone stumbles upon this issue and needs more help.

Solution 2

These days, I also encountered the same error. The snippet of my code:

<input id="fileDialog" type="file"/> 

var chooser = document.querySelector('#fileDialog');
var choosed_file_path = ""; 
chooser.addEventListener("change", function(evt) {   
    //$("#fileDialog").val(this.value);  // error
    choosed_file_path = this.value;
}, false);

It's not allowed to set the value of the "input".

Comments

[Moin Qidwai]

Hi Itay, Thanks for your input but I had looked into the console, where this error was being given: Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string. I just realised that it was trying to set the value of an input[type=file] field. This is not allowed due to security reasons hence I could not use this.I instead made a custom cropping tool using PHP/GD, its probably not as good at image resampling as cloudinary one but it does the job.

[Itay Taragano]

It looks like you have a field of type file named userPhoto exists in the calling page. If so, please note that this should be a hidden field rather than a file field. After the upload is done Cloudinary attempts to set the response on the supplied field. That way you can use Cloudinary directly with no other tools.

[Moin Qidwai]

As I remember I needed a file input to upload it to the server as well. I just needed to drop and upload to my own server not just to cloudinary.

[streetlight]

Running into the same thing. Ever find a resolution?