Drag and Drop Files to a Webviewer

MIT App Inventor Help
1

I have a question related to my current proof of concepts. Is it possible to drag and drop a file (from assets) from a list in the right vertical arrangement to the left arrangement which is a webViewer component. the web viewer component can handle the drop of a file. This works and i can drop a file there when i use split screen on tablet. It means I drag a file from file browser and drop it in the webviewer. The split screen workaround is not comfortable so i would have a file list enabled for drag and drop within the app. Do you know if this is possible?

what I wish to do

Screenshot_20260516-171416
Screenshot_20260516-1714161340×800 13.8 KB

what works with split screen and device file explorer

Screenshot_20260516-172411
Screenshot_20260516-1724111340×800 75.8 KB

Question regarding URL Parameters
2

I am surprised that the webviewer will accept a file dragged and dropped from the file system without any enhancing extension (e.g. webviewextra or customwebview).

Where does the file "go" once it has been dropped ?

I have not seen anything like this on AppInventor previously, either because no-one else has done it, or it is just not possible (or quite possibly because I just don't remember! :upside_down_face: ).

Maybe someone else here can advise differently.

3

i hvae an web viewer extension in use. I can build an example in the evening or tomorrow for which i can upload the aia. it is not possible for the one which i tested the drag and drop via the native android file browser but i it should be possible to build an anoymous example

image
image1216×487 41.1 KB

4

Where do the dropped files "go" ?

5

in my case the doped files are some kind of bin data and are catched from a running javascript in the webviewer.

6

here the expamle…

DragDrop_X0.aia (52.0 KB)

and here the way with drag and drop and file explorer on android device…

from initial screen… html page

Screenshot_20260516-195507
Screenshot_20260516-1955071340×800 11.7 KB

toggle splitscreen and open file browser

Screenshot_20260516-195616
Screenshot_20260516-1956161340×800 88.5 KB

select and drag file

Screenshot_20260516-195632
Screenshot_20260516-1956321340×800 95 KB

drop file

Screenshot_20260516-195645
Screenshot_20260516-1956451340×800 153 KB

7

Personally, I wouldn't bother.

Just use an input file tag to open a file picker, then display/capture the file that way. (you would need webviewextra to do this.)

or do more work in AppInventor, and less work on the web page:

8

after some research and experiments I meanwile have found a workaround. the logic i use in javascript is a final tool with a lot of logic (also includes web assembler / wasm). i think that it would be a hard job to implement it with native AI2 if it is possible at all :wink: