I have a input element with type="file". I am using two different APIs. The first allows me to view a preview of the file in an img tag (only images will be uploaded). The second allows me to rotate the img and retrieve a dataUrl of the new image's contents.
When I submit the form containing my input element, the server receives the file that was originally uploaded by the user, not the file that was rotated by the 2nd API. This makes sense. I need a way to change the file that my input element points to.
My understanding is that an input element points to a FileList object. Since the input element does not allow for multiple uploads, that FileList object has a length of 1. The FileList object can be used to access that single File object, which just contains metadata about the uploaded file. I can actually read the contents of the uploaded file using the FileReader API, but that's the issue... I can only read the contents. How can I replace them? Or is the solution to create a new FileList object that points to a new File object and then somehow point the input element to the new FileList?
Thank you,
Nick