|
| 1 | +import {messages} from '../constants/messages'; |
| 2 | +import {generatePromiseObjects} from '../helpers/helpers'; |
1 | 3 | import {asperaSdk} from '../index'; |
2 | 4 | import {FileDialogOptions, DataTransferResponse} from '../models/models'; |
3 | 5 | import {HttpGatewayDownload, HttpGatewayDownloadLegacy, HttpGatewayInfo, HttpGatewayPresign, HttpGatewayUpload} from './models'; |
@@ -48,33 +50,123 @@ export const getApiCall = (type: 'INFO'|'DOWNLOAD'|'UPLOAD'|'PRESIGN', body?: Bo |
48 | 50 | }; |
49 | 51 |
|
50 | 52 | /** |
51 | | - * Handle drop events and store files for HTTP Gateway |
52 | | - * This works on top of desktop. |
| 53 | + * Create HTML input element for file picking |
53 | 54 | */ |
54 | | -export const handleHttpGatewayDrop = (files: File[]): void => { |
55 | | - files.forEach(file => { |
56 | | - asperaSdk.httpGatewaySelectedFiles.set(file.name, file); |
57 | | - }); |
| 55 | +export const createHtmlInputElement = (): HTMLInputElement => { |
| 56 | + const element = window.document.createElement('input'); |
| 57 | + element.type = 'file'; |
| 58 | + element.style = 'display: none;'; |
| 59 | + window.document.body.appendChild(element); |
| 60 | + return element; |
58 | 61 | }; |
59 | 62 |
|
60 | 63 | /** |
61 | | - * Open native browser file picker for files |
62 | | - * |
63 | | - * @param options - File picker options |
64 | | - * |
65 | | - * @returns Promise that resolves with info about the files picked |
| 64 | + * Handle drop events and store files for HTTP Gateway |
| 65 | + * This works on top of desktop. |
66 | 66 | */ |
67 | | -export const httpGatewaySelectFileDialog = (options?: FileDialogOptions): Promise<DataTransferResponse> => { |
68 | | - return Promise.reject('TODO: Select file. Need to create form since showOpenFilePicker has limited browser support'); |
| 67 | +export const handleHttpGatewayDrop = (items: DataTransferItemList, callback: (data: {event: DragEvent; files: DataTransferResponse}) => void, event: DragEvent): void => { |
| 68 | + const files: File[] = []; |
| 69 | + let callbackCount = 0; |
| 70 | + let callbackFinishCount = 0; |
| 71 | + |
| 72 | + const finalCallback = (): void => { |
| 73 | + if (callbackFinishCount >= callbackCount) { |
| 74 | + const finalFiles = files.map(file => { |
| 75 | + asperaSdk.httpGatewaySelectedFiles.set(file.name, file); |
| 76 | + |
| 77 | + return { |
| 78 | + lastModified: file.lastModified, |
| 79 | + name: file.name, |
| 80 | + size: file.size, |
| 81 | + type: file.type |
| 82 | + }; |
| 83 | + }); |
| 84 | + callback({event, files: {dataTransfer: {files: finalFiles}}}); |
| 85 | + } |
| 86 | + }; |
| 87 | + |
| 88 | + const traverse = (item: FileSystemEntry) => { |
| 89 | + if (item.isFile) { |
| 90 | + (item as FileSystemFileEntry).file(file => { |
| 91 | + files.push(file); |
| 92 | + callbackFinishCount++; |
| 93 | + finalCallback(); |
| 94 | + }); |
| 95 | + |
| 96 | + } else if (item.isDirectory) { |
| 97 | + const dirReader = (item as FileSystemDirectoryEntry).createReader(); |
| 98 | + |
| 99 | + dirReader.readEntries(entries => { |
| 100 | + for (let k = 0; k < entries.length; k++) { |
| 101 | + callbackCount++; |
| 102 | + traverse(entries[k]); |
| 103 | + } |
| 104 | + }); |
| 105 | + |
| 106 | + callbackFinishCount++; |
| 107 | + } else { |
| 108 | + callbackFinishCount++; |
| 109 | + finalCallback(); |
| 110 | + } |
| 111 | + |
| 112 | + }; |
| 113 | + |
| 114 | + for (let i = 0; i < items.length; i++) { |
| 115 | + const item = items[i].webkitGetAsEntry(); |
| 116 | + |
| 117 | + if (item) { |
| 118 | + callbackCount++; |
| 119 | + traverse(item); |
| 120 | + } |
| 121 | + } |
69 | 122 | }; |
70 | 123 |
|
71 | 124 | /** |
72 | | - * Open native browser file picker for folders |
| 125 | + * Open native browser file or folder picker for files |
73 | 126 | * |
74 | 127 | * @param options - File picker options |
| 128 | + * @param folder - Indicate if choosing folders |
75 | 129 | * |
76 | | - * @returns Promise that resolves with info about the folders picked |
| 130 | + * @returns Promise that resolves with info about the files picked |
77 | 131 | */ |
78 | | -export const httpGatewaySelectFolderDialog = (options?: FileDialogOptions): Promise<DataTransferResponse> => { |
79 | | - return Promise.reject('TODO: Select folder. Need to create form since showOpenFilePicker has limited browser support'); |
| 132 | +export const httpGatewaySelectFileFolderDialog = (options?: FileDialogOptions, folder?: boolean): Promise<DataTransferResponse> => { |
| 133 | + const {promise, rejecter, resolver} = generatePromiseObjects(); |
| 134 | + const element = createHtmlInputElement(); |
| 135 | + |
| 136 | + element.multiple = !!options?.multiple; |
| 137 | + |
| 138 | + if (folder) { |
| 139 | + element.webkitdirectory = true; |
| 140 | + } |
| 141 | + |
| 142 | + element.oncancel = () => { |
| 143 | + rejecter({debugData: {code: -32002, message: messages.filePickerCancel}}); |
| 144 | + }; |
| 145 | + |
| 146 | + element.onchange = () => { |
| 147 | + const returnFiles: File[] = []; |
| 148 | + |
| 149 | + for (let i = 0; i < element.files.length; i++) { |
| 150 | + const file = element.files[i]; |
| 151 | + returnFiles.push(file); |
| 152 | + asperaSdk.httpGatewaySelectedFiles.set(file.name, file); |
| 153 | + } |
| 154 | + |
| 155 | + resolver({ |
| 156 | + dataTransfer: { |
| 157 | + files: returnFiles.map(file => { |
| 158 | + return { |
| 159 | + size: file.size, |
| 160 | + lastModified: file.lastModified, |
| 161 | + name: file.webkitRelativePath || file.name, |
| 162 | + type: file.type, |
| 163 | + }; |
| 164 | + }) |
| 165 | + } |
| 166 | + }); |
| 167 | + }; |
| 168 | + |
| 169 | + element.click(); |
| 170 | + |
| 171 | + return promise; |
80 | 172 | }; |
0 commit comments