How can be write again into the input file the data after rotate?

[yourchoice]

How can be write again into the input file element the data after rotate?

Is there a way ?

[blueimp]

Hi @yourchoice,

you probably wanna check out the following documentation links:

• https://github.com/blueimp/JavaScript-Load-Image/blob/master/README.md#metadata-parsing
• https://github.com/blueimp/JavaScript-Load-Image/blob/master/README.md#image-head
• https://github.com/blueimp/JavaScript-Load-Image/blob/master/README.md#exif-writer

[yourchoice]

Before submit the form with file input to server, I would like to have in this field (type file) the image rotated. I don't know if is possible to send to server the image already rotated ... The single way that I know is to set in a field the orientation value , then, on server (in php) I rotate the image depending by this filed "orientation".

I have a btn that on click call that (rotate the image):

loadImage($('input[type=file]').prop('files')[0], { meta: true, orientation: 8 })
    .then(function (data) {
         //this is the preview image
         $('img').attr('src', data.image.toDataURL());
         //here I woul like to put value in <input type="file" ...>
         $('input[type=file').val(' ... ');
    })
   .catch(function (err) {
      console.error(err)
   });

But i think that is not possible due the security .... maybe need to put in another field hidden the data as blob ...

[blueimp]

Hi @yourchoice, if you want to do orientation correction on the server you don’t need this library - many server-side image manipulation libraries have support to read the Exif orientation from the image file itself.

[yourchoice]

Of cource, I know that, with server no problem...

But, I would like to send image already rotated from client side.

<form action="...">
  <input type=file>

  <button typ="button" class="rotate">rotate image</button
  <img src="..." class="preview">  

  <button typ="submit">submit</button
</form>

With this your lib I would like when upload a photo to preview it in img.preview. That is easy with your lib or with FileReader... Next, click on button.rotate I would like to rotate the img.preview (that working) and I thought that input[type=file] can have image rotated.

When click on sbumit , I would like to have sent to server image already rotated. I found a way adding in form a input[type=hidden] and filled with the image rotated as blob...

I know can be done with ajax using form_data = new FormData(); and adding field photo.... but just I want to submit the main form ....

Is there another way ?

[blueimp]

You can pass your original form element as an argument to new Formdata(), see e.g. the documentation here: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects#Sending_files_using_a_FormData_object

You can update the orientation value in the rotated file using the Exif writer of this library (see the documentation links in my first comment above).

To use the updated file, you can override the file input field on the FormData object using the set method: https://developer.mozilla.org/en-US/docs/Web/API/FormData/set