Archive
Archive for July 28, 2017
Drag and drop with smart pascal
July 28, 2017
Leave a comment
Drag and drop under HTML5 is incredibly simple; even more simple than Delphi’s mechanisms. Having said that it can be a PITA to work with due to the async nature of the JavaScript API.
This functionality is just begging to be isolated in a non-visual controller (read: component), and it’s on my list of RTL features. But it will have to wait until we have wiped the list clean.

Drag and drop is useful for many web applications
Anyways, people asked me about a simple way to capture a drag & drop event and kidnap the file-data without any type for form tags involved. So here is a very simple ad-hoc example.
The FView variable is a reference to a visible control. In this case the form itself, so that you can drop files anywhere.
FView.handle.ondragover := procedure (event: variant) begin // In order to hijack drag & drop, this event must prevent // the default behavior. So we hotwire it event.preventDefault(); end; FView.Handle.ondrop := procedure (event: variant) begin event.preventDefault(); var ev := event.dataTransfer; if (ev) then begin if (ev.items) then begin for var x:=0 to ev.items.length-1 do begin var LItem := ev.items[x]; if (LItem) then begin if string(LItem.kind).ToLower() = "file" then begin var file := LItem.getAsFile(); var reader: variant; asm @reader = new FileReader(); end; reader.onload := procedure (data: variant) begin if reader.readyState = 2 then begin writeln("File data ready:"); var binbuffer := reader.result; var raw: TDefaultBufferType; asm @raw = new Uint8Array(@binbuffer); end; var Buffer := TBinaryData.Create(); Buffer.AppendBuffer(raw); writeln(buffer.ToBase64()); end; end; reader.readAsArrayBuffer(file); end; end; end; end; end; end;
You must be logged in to post a comment.