mam to prosty element, który po prostu pozwala wybrać plik lokalny na raz, a następnie przedstawia wybrane pliki jako elementów, które można usunąć, coś takiego: Wiele wystąpień samego polimeru zachowania elementem przyczyny na każdym z nich
Komponent sam w sobie działa dobrze, problem polega na tym, że mam inny komponent tego samego typu na tej samej stronie, ale wewnątrz innego elementu nadrzędnego (i ukrytego). Jeśli wybiorę n plików na tym pierwszym selektorze plików, a następnie przełączam się na widok drugiego elementu nadrzędnego, ten drugi selektor plików pokazuje w nim te same pliki, które zostały wybrane na pierwszym.
Jeśli umieściłem dwa komponenty tego pliku w tym samym elemencie nadrzędnym, wybranie pliku w jednym z nich nie spowoduje wyświetlenia tego samego pliku w drugim, ale usunięcie pliku z dowolnego z nich spowoduje utworzenie tablicy plików składników Właściwość (gdzie przechowuję każdy wybrany plik) jest krótsza w obu, co ostatecznie może uniemożliwić usunięcie elementów z jednego z nich.
Zakładam, że mój problem związany jest z enkapsulacją w jakiś sposób, ale nie mogę zrozumieć dlaczego. Jest to kod mojego komponentu:
<dom-module id="custom-file-input">
<style>
...
</style>
<template>
<div class="horizontal layout flex relative">
<button class="action" on-click="butclick" disabled$="{{disab}}">{{restexts.CHOOSEFILE}}</button>
<div id="fakeinput" class="flex">
<template is="dom-repeat" items="{{files}}" as="file">
<div class="fileitem horizontal layout center">
<span>{{file.0}}</span><iron-icon icon="close" class="clickable" on-click="removeFile"></iron-icon>
</div>
</template>
</div>
<input id="fileinput" type="file" on-change="fileChanged" hidden />
</div>
</template>
<script>
Polymer({
is: "custom-file-input",
properties: {
files: {
type: Array,
value: []
},
currentFile: {
type: Object,
value: {}
},
disab: {
type: Boolean,
value: false,
reflectToAttribute: true,
notify: true
},
restexts: {
type: Object,
value: JSON.parse(localStorage['resourcesList'])
}
},
fileChanged: function (e) {
this.currentFile = e.currentTarget.files[0];
var elem = this;
var fr = new FileReader();
fr.readAsArrayBuffer(this.currentFile);
fr.onload = function() {
[...convert file to string64...]
elem.push('files', [elem.currentFile.name, string64]);
};
},
removeFile: function (e) {
for (var i = 0; i < this.files.length; i++) {
if (this.files[i] == e.model.file) {
this.splice('files', i, 1);
break;
}
}
},
butclick: function() {
this.$.fileinput.click();
}
});
</script>
</dom-module>
Jest to pierwszy raz, kiedy trzeba zrobić coś takiego na czymś takim do pracy. Dziękuję :) – Iskalla