file-selector.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. import { __awaiter } from "tslib";
  2. import { toFileWithPath } from './file';
  3. const FILES_TO_IGNORE = [
  4. // Thumbnail cache files for macOS and Windows
  5. '.DS_Store',
  6. 'Thumbs.db' // Windows
  7. ];
  8. /**
  9. * Convert a DragEvent's DataTrasfer object to a list of File objects
  10. * NOTE: If some of the items are folders,
  11. * everything will be flattened and placed in the same list but the paths will be kept as a {path} property.
  12. *
  13. * EXPERIMENTAL: A list of https://developer.mozilla.org/en-US/docs/Web/API/FileSystemHandle objects can also be passed as an arg
  14. * and a list of File objects will be returned.
  15. *
  16. * @param evt
  17. */
  18. export function fromEvent(evt) {
  19. return __awaiter(this, void 0, void 0, function* () {
  20. if (isObject(evt) && isDataTransfer(evt.dataTransfer)) {
  21. return getDataTransferFiles(evt.dataTransfer, evt.type);
  22. }
  23. else if (isChangeEvt(evt)) {
  24. return getInputFiles(evt);
  25. }
  26. else if (Array.isArray(evt) && evt.every(item => 'getFile' in item && typeof item.getFile === 'function')) {
  27. return getFsHandleFiles(evt);
  28. }
  29. return [];
  30. });
  31. }
  32. function isDataTransfer(value) {
  33. return isObject(value);
  34. }
  35. function isChangeEvt(value) {
  36. return isObject(value) && isObject(value.target);
  37. }
  38. function isObject(v) {
  39. return typeof v === 'object' && v !== null;
  40. }
  41. function getInputFiles(evt) {
  42. return fromList(evt.target.files).map(file => toFileWithPath(file));
  43. }
  44. // Ee expect each handle to be https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileHandle
  45. function getFsHandleFiles(handles) {
  46. return __awaiter(this, void 0, void 0, function* () {
  47. const files = yield Promise.all(handles.map(h => h.getFile()));
  48. return files.map(file => toFileWithPath(file));
  49. });
  50. }
  51. function getDataTransferFiles(dt, type) {
  52. return __awaiter(this, void 0, void 0, function* () {
  53. // IE11 does not support dataTransfer.items
  54. // See https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items#Browser_compatibility
  55. if (dt.items) {
  56. const items = fromList(dt.items)
  57. .filter(item => item.kind === 'file');
  58. // According to https://html.spec.whatwg.org/multipage/dnd.html#dndevents,
  59. // only 'dragstart' and 'drop' has access to the data (source node)
  60. if (type !== 'drop') {
  61. return items;
  62. }
  63. const files = yield Promise.all(items.map(toFilePromises));
  64. return noIgnoredFiles(flatten(files));
  65. }
  66. return noIgnoredFiles(fromList(dt.files)
  67. .map(file => toFileWithPath(file)));
  68. });
  69. }
  70. function noIgnoredFiles(files) {
  71. return files.filter(file => FILES_TO_IGNORE.indexOf(file.name) === -1);
  72. }
  73. // IE11 does not support Array.from()
  74. // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Browser_compatibility
  75. // https://developer.mozilla.org/en-US/docs/Web/API/FileList
  76. // https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItemList
  77. function fromList(items) {
  78. if (items === null) {
  79. return [];
  80. }
  81. const files = [];
  82. // tslint:disable: prefer-for-of
  83. for (let i = 0; i < items.length; i++) {
  84. const file = items[i];
  85. files.push(file);
  86. }
  87. return files;
  88. }
  89. // https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem
  90. function toFilePromises(item) {
  91. if (typeof item.webkitGetAsEntry !== 'function') {
  92. return fromDataTransferItem(item);
  93. }
  94. const entry = item.webkitGetAsEntry();
  95. // Safari supports dropping an image node from a different window and can be retrieved using
  96. // the DataTransferItem.getAsFile() API
  97. // NOTE: FileSystemEntry.file() throws if trying to get the file
  98. if (entry && entry.isDirectory) {
  99. return fromDirEntry(entry);
  100. }
  101. return fromDataTransferItem(item);
  102. }
  103. function flatten(items) {
  104. return items.reduce((acc, files) => [
  105. ...acc,
  106. ...(Array.isArray(files) ? flatten(files) : [files])
  107. ], []);
  108. }
  109. function fromDataTransferItem(item) {
  110. const file = item.getAsFile();
  111. if (!file) {
  112. return Promise.reject(`${item} is not a File`);
  113. }
  114. const fwp = toFileWithPath(file);
  115. return Promise.resolve(fwp);
  116. }
  117. // https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry
  118. function fromEntry(entry) {
  119. return __awaiter(this, void 0, void 0, function* () {
  120. return entry.isDirectory ? fromDirEntry(entry) : fromFileEntry(entry);
  121. });
  122. }
  123. // https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry
  124. function fromDirEntry(entry) {
  125. const reader = entry.createReader();
  126. return new Promise((resolve, reject) => {
  127. const entries = [];
  128. function readEntries() {
  129. // https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry/createReader
  130. // https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries
  131. reader.readEntries((batch) => __awaiter(this, void 0, void 0, function* () {
  132. if (!batch.length) {
  133. // Done reading directory
  134. try {
  135. const files = yield Promise.all(entries);
  136. resolve(files);
  137. }
  138. catch (err) {
  139. reject(err);
  140. }
  141. }
  142. else {
  143. const items = Promise.all(batch.map(fromEntry));
  144. entries.push(items);
  145. // Continue reading
  146. readEntries();
  147. }
  148. }), (err) => {
  149. reject(err);
  150. });
  151. }
  152. readEntries();
  153. });
  154. }
  155. // https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileEntry
  156. function fromFileEntry(entry) {
  157. return __awaiter(this, void 0, void 0, function* () {
  158. return new Promise((resolve, reject) => {
  159. entry.file((file) => {
  160. const fwp = toFileWithPath(file, entry.fullPath);
  161. resolve(fwp);
  162. }, (err) => {
  163. reject(err);
  164. });
  165. });
  166. });
  167. }
  168. //# sourceMappingURL=file-selector.js.map