0

A user can browse multiple img files with an <input type="file"> element. The selected file objects are than stored temporarily in an array and the attributes are shown to the user in a table build from div's and other elements.

This way the user can browse and select files multiple times and add them to the table or even delete some of them again before he finally upload the collection to the server.

While it is not a problem to append objects to an array and appending rows to a table so they match 1:1. It's getting tricky to delete rows from a table and elements of the array and keeping them matched.

So my question is if there is a nicer way to add/bind file objects to html elements, so when elements are deleted binded file objects are deleted as well ?

BTW I'm using pure JS.

Improve this question

1 Answer 1

Reset to default
-1

I answer my question myself:

The easiest way to bind objects to a html element is described here by Osacr Paz. I tested it and it solves my problem.

Here is the answer copied from the link :

The easiest way is to do this:

<div id="myDiv">...</div>

In javascript

var myDiv = document.getElmentById('myDiv');
myDiv._variable = variable;

You can recover this later if you want, simply using the same myDiv variable, or, again, with document.getElementById() or any other DOM method that returns the element.

var variable = myDiv._variable;

The downside of doing it this way is that you can't specify, in the server, or from the markup, which object you want to attach to the element.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Please avoid link only answers. Answers that are "barely more than a link to an external site” may be deleted.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.