Load/Save User Files in HTML Target?

Monkey Targets Forums/HTML5/Load/Save User Files in HTML Target?

Markus(Posted 2013) [#1]
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.


skape(Posted 2015) [#2]
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.)


k.o.g.(Posted 2015) [#3]
Explain your idea more, then we can say its possible to make and can you give some tips.


skape(Posted 2015) [#4]
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.


MikeHart(Posted 2015) [#5]
..


k.o.g.(Posted 2015) [#6]
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!


skape(Posted 2015) [#7]
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.


k.o.g.(Posted 2015) [#8]
You can print the base64 encrypted data in a popup an then use "saveas" and the user can save the data.


skape(Posted 2015) [#9]
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...


Hezkore(Posted 2015) [#10]
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.