Send file via HTML5 to Web server

Send file via HTML5 with a XMLHttpRequest to WebSharper Sitelet

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57:

namespace Samples

open WebSharper
open WebSharper.Core
open WebSharper.JavaScript
open WebSharper.Sitelets
open WebSharper.UI
open WebSharper.UI.Server
open WebSharper.UI.Client
open WebSharper.UI.Html
open WebSharper.JQuery

// client side

let getFiles () : FileList =
    let input = JS.Document.GetElementById("uploadInput") |> As<HTMLInputElement>
    input?files

let sendFiles (el:Dom.Element) (ev:Dom.Event) =
    ev.PreventDefault()
    JS.Document.GetElementById("response").InnerHTML <- ""
    let oReq : XMLHttpRequest = JS.Inline("new XMLHttpRequest()") // WORKAROUND 1
    let url = "/upload"
    oReq.Open("POST",url, true)
    oReq.Onload <- fun ev -> 
        Console.Log("Uploaded", ev)
    oReq.Onerror <- fun ev -> 
        Console.Log("Error", ev)
    oReq.Onreadystatechange <- fun ev ->
        let response = oReq.StatusText + ": " + oReq.ResponseText
                                      + " ReadyState: " + oReq.ReadyState.ToString()
        Console.Log(response)
        if  (oReq.ReadyState = 4) then
             JS.Document.GetElementById("response").InnerHTML <- response
    let files = getFiles ()
    JS.Inline("$0.send($1)", oReq, files.[0]) // WORKAROUND 2

// server side

let StreamingUploadFilePage (ctx:Context<EndPoint>) =
    try
        let stream = ctx.Request.Body
        if (stream.Length > (int64 0) && stream.Length < (int64 2.5E6)) then
                let count = int stream.Length
                let buffer = Array.zeroCreate<byte> count
                let res = stream.Read(buffer, 0, count)
                use fs = File.Open(destinationPath, FileMode.Create)
                fs.Write(buffer, 0, count)
                Content.Text ("Uploaded! (" + res.ToString() + ")")  
        else 
            Content.Text ("File Size is not permitted: " + stream.Length.ToString())
            |> Content.SetStatus (Http.Status.Custom 400 (Some "Bad Request"))  
    with
    |exc ->  
        Content.Text exc.Message
        |> Content.SetStatus Http.Status.InternalServerError

namespace Microsoft.FSharp.Core

Multiple items
module Event

from Microsoft.FSharp.Control

--------------------
type Event<'T> =
  new : unit -> Event<'T>
  member Trigger : arg:'T -> unit
  member Publish : IEvent<'T>

Full name: Microsoft.FSharp.Control.Event<_>

--------------------
type Event<'Delegate,'Args (requires delegate and 'Delegate :> Delegate)> =
  new : unit -> Event<'Delegate,'Args>
  member Trigger : sender:obj * args:'Args -> unit
  member Publish : IEvent<'Delegate,'Args>

Full name: Microsoft.FSharp.Control.Event<_,_>

--------------------
new : unit -> Event<'T>

--------------------
new : unit -> Event<'Delegate,'Args>

Multiple items
val int64 : value:'T -> int64 (requires member op_Explicit)

Full name: Microsoft.FSharp.Core.Operators.int64

--------------------
type int64 = System.Int64

Full name: Microsoft.FSharp.Core.int64

--------------------
type int64<'Measure> = int64

Full name: Microsoft.FSharp.Core.int64<_>

Multiple items
val int : value:'T -> int (requires member op_Explicit)

Full name: Microsoft.FSharp.Core.Operators.int

--------------------
type int = int32

Full name: Microsoft.FSharp.Core.int

--------------------
type int<'Measure> = int

Full name: Microsoft.FSharp.Core.int<_>

module Array

from Microsoft.FSharp.Collections

val zeroCreate : count:int -> 'T []

Full name: Microsoft.FSharp.Collections.Array.zeroCreate

Multiple items
val byte : value:'T -> byte (requires member op_Explicit)

Full name: Microsoft.FSharp.Core.Operators.byte

--------------------
type byte = System.Byte

Full name: Microsoft.FSharp.Core.byte

union case Option.Some: Value: 'T -> Option<'T>

Previous Version Raw view Test code New version

More information

Link:	http://fssnip.net/7Xh
Posted:	5 years ago
Author:	giuliohome
Tags:	file , web