Load/Save User Files in HTML Target?
Monkey Targets Forums/HTML5/Load/Save User Files in HTML Target?
| ||
hello, is a easy file upload/download possible in a html target? i need a file dialog for some files to upload in a running html app tool and later save it at hd. a drag and drop in a browser/tab/window is also welcome as upload. |
| ||
I'm also looking to add this to a little Monkey web app. Has anyone done something similar already? (I'm talking client side, not a server upload.) |
| ||
Explain your idea more, then we can say its possible to make and can you give some tips. |
| ||
I can do it in javascript / html using the File / FileReader APIs, but I'm wondering if someone has set up a library for this in Monkey. The Monkey dom module does not have FileReader / File API capabilities (naturally), so I'm thinking I'll need to write a new wrapper... What I want to do is display a file chooser and, from that, receive data from the user in an HTML5 app (primarily image data for a web tool I have in mind). This could also be through the drag and drop APIs, though I find the FileReader + Input element a more straightforward approach. Ideally, I would provide the user with a data file download as well, though this is of secondary concern. |
| ||
.. |
| ||
here i have written a little piece of code what may helps you:Strict Import mojo #If TARGET = "html5" Then Import dom.dom Extern Function log:Void(e:Event) = "window.console.log" Function log:Void(f:FileList) = "window.console.log" Function log:Void(f:File) = "window.console.log" Class File Field lastModified:int Field lastModifiedDate:String Field name:String Field size:int Field fileName:String Field fileSize:Int Field type:string End class Class FileList Extends DOMObject Field length:int Method item:File( index:int) End class Class customHTMLInputElement Extends HTMLInputElement = "HTMLInputElement" Field files:FileList End Class Public Class Listener Extends EventListener Method handleEvent:Int(e:Event) Local target:customHTMLInputElement = customHTMLInputElement(e.target) Select e.type Case "change" Local f:File = target.files.item(0) Print "new file: "+f.name+" - "+f.size+" bytes" End Select Return 1 End Method End Class Function Init:Void() Local input:HTMLInputElement = HTMLInputElement(document.createElement("input")) input.type = "file" Local div:HTMLDivElement = HTMLDivElement(Element(document.getElementsByTagName("body").item(0)).getElementsByTagName("div").item(0)) div.appendChild(input) Local listener:EventListener = New Listener() input.addEventListener("change",listener) End Function #End If Class FileApp Extends App Method OnCreate:Int() SetUpdateRate(30) Init() Return 0 End Method Method OnUpdate:Int() Return 0 End Method Method OnRender:Int() Cls(0,0,0) Return 0 End method End Class Function Main:Int() New FileApp() Return 0 End function now you must handle the import from blob data to mojo image! |
| ||
Thanks kog! That's a great start for me. :) And I now have the blob data as a binary string... to convert it to an image, I'm thinking of just going ahead and simply temporarily saving the image to the server using a .php script. |
| ||
You can print the base64 encrypted data in a popup an then use "saveas" and the user can save the data. |
| ||
I mean, to convert the image into a usable form... I need to do some manipulations on the image before I return any data. I cannot figure out how to hack mojo to load a .png from a string rather than a file. It's a binary string of the exact image file... seems like it should be possible without using a serverside script to save it to a file, and the load it back in... |
| ||
How were you able to get the data as a string? I'm trying load a text file but I can't figure out how to read the content of the file. |