Adding Metadata to Html5 file upload

Question

Is it possible to add metadata information along with html 5 images before they are uploaded?

clarification: html 5 images upload (like the drag and drop thumbnail method or single input file) sample HTML 5 Upload/drag_drop

So say user is uploading 10 images, he will fill some text info for each image describing it, then this information will be saved on the server. So for each thumbnail user can add "title","location","description" in text boxes.

the example below allows an upload of a single image and preview of a thumbnail, what I am trying to achieve is to interact with this thumbnail and submit some text to the server along with it.

clarification 2: this question is not related to the picture EXIF,
I am asking about general metadata information user can add to the picture, like "I took the picture right before my wedding", or "this picture of my old home" or like tags "Red"

document.getElementById("files").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

<input type="file" id="files" />
<img  width="100" height="140" id="image" />

Answer 1

Maybe this is what you need. As charlietfl already said in the comments you can use FormData Here is an example:

First try with multiple inputs

Here you can see how it is saved than:

   {
  "args": {}, 
  "data": "", 
  "files": {
    "input1": "yourimg1", 
    "input2": "yourimg2"
  }, 
  "form": {
    "input1": [
      "house", 
      "london"
    ], 
    "input2": [
      "bridge", 
      "berlin"
    ]
  }, 
  "headers": {
    ....
}

Now you have your files and descriptions connected with the name of the input field. It is important that all the beloning inputfields have the same name.

So the file from input1 belongs to the description in the array named input1 and the file from input2 to the array input2 and so on.

A few good explanations you can find here and if you want you can use this site to test the code and output.

You can take the code from here. Add at the end of the js function

console.log(request.response);

and change the url to http://httpbin.org/post.

Or just play a little bit around with it.

EDIT:

If you want it with multiple files you can do it like this:

var testForm = document.getElementById('test-form');
var div = document.getElementById('output');
var data;
  testForm.onsubmit = function(event) {
    event.preventDefault();
    var request = new XMLHttpRequest();
    request.open('POST', 'http://your.url/post', /* async = */ false);

    var formData = new FormData(document.getElementById('test-form'));

    request.send(formData);
  }
  
  function handleFileSelect(evt) {
    var files = evt.target.files;

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = 
          [
            '<img src="', 
            e.target.result,
            '" title="',
            escape(theFile.name), 
            '"/><div class="desc"><div>Location:<input name="',
            escape(theFile.name),
            '"> </div><br><div>Title:<input name="',
            escape(theFile.name),
            '"></div><br><div>Description:<input name="',
            escape(theFile.name),
            '"></div><br></div>'
          ].join('');
          
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }
  
//makes description visible  	 	
$(document).on("click","img",function(){
        $(this).next().css("display", "block");
    });


  document.getElementById('files').addEventListener('change', handleFileSelect, false);

.desc{
  display:none;
}
img{
  height: 75px;
  border: 1px solid #000;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='test-form'>
  <input type="file" id="files" name='input1' multiple/><br>
  <output id="list"></output><br>
  <input type='submit'>
</form>

Then this is you output:

{
  "args": {}, 
  "data": "", 
  "files": {
    "input1": "all_your_images"
  }, 
  "form": {
    "favicon.png": [
      "1a", 
      "1b", 
      "1c"
    ], 
    "loginBackground.jpg": [
      "2a", 
      "2b", 
      "2c"
    ]
  }, 
  "headers": {
   ....}

The disadvantage is that all images are uploaded together. As you can see now each description is safed in an array with the name of its beloning image.

<div>Location:<input name="', escape(theFile.name),'"> </div>

This gives the inputname the name of the belonging image.

So if you want to safe the images and descriptions on your server in an array or something like that you have to get the names of the uploaded images with PHP.

$filename = pathinfo($_FILES['picture']['name'], PATHINFO_FILENAME);

(see HERE)

I know you want it with drag and drop, but the code would be to long with that. If you still want to do this I can recomment you this site. You only have to add the functionality to my posted code and it should work.

If you want to safe the informations directly in the image then I only can point to the answer of tnt-rox. Then you should visit his links and read more about exif.

Answer 2

I am not sure why you are getting down votes for this question. It may have something to do with your wording. I assume you mean Exif data rather then metadata. See https://en.wikipedia.org/wiki/Exif

For modifying Exif data of an image in JavaScript you can use piexifjs by hMatoba, it will allow you to modify the images Exif metadata before uploading to the server.

Hope this helps )