1

I am working in a proprietary CMS where I only have HTML + Javascript/jQuery access and am using their automatically generated form. I am trying to add the ability to crop images to this form using cropper.js. I have written a script to take the file uploaded and load it into cropper. I am looking for a workaround to attach this file back to the original hidden field generated by the CMS. When I try to set the value of the hidden file, I get the message "Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string."

Here is a snippet of my code which produces the error

$("#crop-image").click(function() {
    var canvas = cropper.getCroppedCanvas();
    document.querySelector('.upload-container').appendChild(canvas);
    var blob = canvas.toDataURL();
    console.log(typeof blob);
    console.log(blob);
    const hiddenInput = document.getElementById("signup_signup_profile_attributes_image");
    hiddenInput.value = blob;
})

Anyone have an idea of how to get this method to work or another workaround to accomplish what I'm trying to do?

Peter Breen
  • 447
  • 1
  • 10
  • 24
  • I googled the error message and found [this](https://stackoverflow.com/questions/49970970/angular-5-file-upload-failed-to-set-the-value-property-on-htmlinputelement). – Rob Moll May 28 '20 at 16:36
  • 1
    you can't set file inputs. you can use ajax to spoof a file upload from a blob or dataURL... – dandavis May 28 '20 at 16:43

0 Answers0