|
| 1 | +################################################### |
| 2 | +# Part of Bosca Ceoil Blue # |
| 3 | +# Copyright (c) 2024 Yuri Sizov and contributors # |
| 4 | +# Provided under MIT # |
| 5 | +################################################### |
| 6 | + |
| 7 | +# Godot doesn't support native file dialogs on web, but we can fake them with |
| 8 | +# input elements. |
| 9 | +# |
| 10 | +# This class exposes a set of properties, signals, and methods to cover the |
| 11 | +# basic uses for loading files into the app. Internally, it creates an input |
| 12 | +# element via JavaScriptBridge and manipulates it to create a file dialog |
| 13 | +# when the user interacts with the page. |
| 14 | +# |
| 15 | +# It is possible to move parts of this logic to the front-end with some custom |
| 16 | +# HTML shell, but everything is simple enough for us to implement via JS proxy. |
| 17 | +# Though that means that the code here is poorly typed. |
| 18 | + |
| 19 | +class_name FileDialogNativeWeb extends Object |
| 20 | + |
| 21 | +signal file_selected(path: String) |
| 22 | +signal canceled() |
| 23 | + |
| 24 | +var _document: JavaScriptObject = null |
| 25 | +var _element: JavaScriptObject = null |
| 26 | +# We must keep references around, otherwise they get silently destroyed. |
| 27 | +# JavaScriptBridge doesn't tick the reference counter, it seems. |
| 28 | +var _event_handlers: Array[JavaScriptObject] = [] |
| 29 | + |
| 30 | + |
| 31 | +func _init() -> void: |
| 32 | + if not OS.has_feature("web"): |
| 33 | + printerr("FileDialogNativeWeb: Called in a non-web context!") |
| 34 | + return |
| 35 | + |
| 36 | + _document = JavaScriptBridge.get_interface("document") |
| 37 | + _element = _document.createElement("input") |
| 38 | + _element.type = "file" |
| 39 | + |
| 40 | + _add_event_handler(_element, "change", _file_selected) |
| 41 | + _add_event_handler(_element, "cancel", _dialog_cancelled) |
| 42 | + _document.body.appendChild(_element) |
| 43 | + |
| 44 | + |
| 45 | +func _notification(what: int) -> void: |
| 46 | + if what == NOTIFICATION_PREDELETE: |
| 47 | + if is_instance_valid(_element): |
| 48 | + _element.remove() |
| 49 | + |
| 50 | + |
| 51 | +func add_filter(filter: String) -> void: |
| 52 | + if not is_instance_valid(_element): |
| 53 | + return |
| 54 | + |
| 55 | + if _element.accept.is_empty(): |
| 56 | + _element.accept = filter |
| 57 | + else: |
| 58 | + _element.accept += ", " + filter |
| 59 | + |
| 60 | + |
| 61 | +func clear_filters() -> void: |
| 62 | + _element.accept = "" |
| 63 | + |
| 64 | + |
| 65 | +func popup() -> void: |
| 66 | + _element.click() |
| 67 | + |
| 68 | + |
| 69 | +# Event handlers. |
| 70 | + |
| 71 | +# Wrapper that simplifies attaching event handlers to JavaScript objects. |
| 72 | +func _add_event_handler(object: JavaScriptObject, event: String, callback: Callable) -> void: |
| 73 | + var callback_ref := JavaScriptBridge.create_callback(func(args: Array) -> void: |
| 74 | + callback.call(args[0]) # The event object. |
| 75 | + ) |
| 76 | + _event_handlers.push_back(callback_ref) |
| 77 | + |
| 78 | + object.addEventListener(event, callback_ref) |
| 79 | + |
| 80 | + |
| 81 | +func _file_selected(_event: JavaScriptObject) -> void: |
| 82 | + if _element.files.length > 0: |
| 83 | + # When a file is selected, we aren't done. The file must be loaded into memory |
| 84 | + # as a buffer. Technically, a Blob can be converted directly, but it's an |
| 85 | + # async method, and that's a can of worms I don't want to touch. |
| 86 | + # If this was JavaScript, FileReader would be more verbose, but here it's the |
| 87 | + # simpler option. |
| 88 | + |
| 89 | + var file_name: String = _element.files[0].name.get_file() |
| 90 | + var file_reader: JavaScriptObject = JavaScriptBridge.create_object("FileReader") |
| 91 | + _add_event_handler(file_reader, "load", _file_loaded.bind(file_name)) |
| 92 | + file_reader.readAsArrayBuffer(_element.files[0]) |
| 93 | + |
| 94 | + |
| 95 | +func _file_loaded(event: JavaScriptObject, filename: String) -> void: |
| 96 | + # When the reader loads the file, we stash it into the virtual file system, so |
| 97 | + # we can then use our standard flow to read and load it into the app. |
| 98 | + |
| 99 | + # We don't care about conflicts, it's all temporary anyway. |
| 100 | + var path := "/tmp/" + filename |
| 101 | + |
| 102 | + # The result is a JS ArrayBuffer, which cannot be used directly. We construct a |
| 103 | + # Uint8Array, which is effectively a byte array. Then we create a proper byte array |
| 104 | + # out of it. |
| 105 | + var buffer := PackedByteArray() |
| 106 | + var byte_array: Variant = JavaScriptBridge.create_object("Uint8Array", event.target.result) |
| 107 | + for i: int in byte_array.byteLength: |
| 108 | + buffer.push_back(byte_array[i]) # This only works if the byte_array is untyped. Some indexing operators missing? |
| 109 | + |
| 110 | + # Create the temporary file. |
| 111 | + |
| 112 | + var file := FileWrapper.new() |
| 113 | + var error := file.open(path, FileAccess.WRITE) |
| 114 | + if error != OK: |
| 115 | + printerr("FileDialogNativeWeb: Failed to open the file at '%s' for writing (code %d)." % [ path, error ]) |
| 116 | + return |
| 117 | + |
| 118 | + error = file.write_buffer_contents(buffer) |
| 119 | + if error != OK: |
| 120 | + printerr("FileDialogNativeWeb: Failed to write to the file at '%s' (code %d)." % [ path, error ]) |
| 121 | + return |
| 122 | + |
| 123 | + file._handler.close() # Clean up to avoid issues during the next step. |
| 124 | + |
| 125 | + # Success! |
| 126 | + file_selected.emit(path) |
| 127 | + |
| 128 | + |
| 129 | +func _dialog_cancelled(_event: JavaScriptObject) -> void: |
| 130 | + canceled.emit() |
0 commit comments