add `importFiles` api

[Simon-Laux]

This api is designed to make it easy to make our own ui (separate mimeTypes and extensions filters), but at the same time be familiar to using the <input type="file"> api.

We can also fully implement a version in the glue code that does not require native code using the file input. Then it also does not matter how long it takes for single platforms to implement the custom ui.

For those that don't know the custom ui is the a selection of matching recent files that were posted inside of delta chat and a fallback button that opens the normal file picker like <input type="file>.

importFiles: (filters) => {
    var element = document.createElement("input");
    element.type = "file";
    element.accept = [...(filters.extensions||[]), ...(filters.mimeTypes||[])].join(
      ","
    );
    element.multiple = filters.multiple || false;
    const promise = new Promise((resolve, _reject) => {
      element.onchange = (_ev) => {
        console.log("element.files", element.files);
        const files = [...element.files];
        document.body.removeChild(element);
        resolve(files);
      };
    });
    element.style.display = "none"
    document.body.appendChild(element);
    element.click();
    console.log(element);
    return promise;
}

[r10s]

cave: the typo extentions was also in the initial post (i just fixed it) - just in case it was already copy+pasted somewhere :)

[adbenitez]

 element.accept = [...filters.extensions, ...filters.mimeTypes].join(

sadly this implementation is not right, because if any of the arrays is not given it will throw an error that undefined is not iterable

[adbenitez]

I solved the error like this:

        importFiles: (filters) => {
            var element = document.createElement("input");
            element.type = "file";
            element.accept = [...filters.extensions||[], ...filters.mimeTypes||[]].join(
                ","
            );
            element.multiple = filters.multiple || false;
            const promise = new Promise((resolve, _reject) => {
                element.onchange = (_ev) => {
                    console.log("element.files", element.files);
                    const files = [...element.files];
                    document.body.removeChild(element);
                    resolve(files);
                };
            });
            element.style.display = "none"
            document.body.appendChild(element);
            element.click();
            console.log(element);
            return promise;
        },

[r10s]

a better name doesn't comes to my mind tho

there is sth like accept=filters in the code - so maybe better stay with that naming. "multiple" also fits better then.

for the type there are questions above