Back to Questions
7.5k
views8
comments
File Upload with WebSharper, how to?
websharperf#web.netupload

How can do a simple file upload with WebSharper?
A click on a button allows to select the file that will be uploaded to the server.

To start, I don't need some multi-file upload with progress visualization (would also be very nice with F# Async and WebSharper).

Is the FileUpload control the way to go, and how to do it with WebSharper?
I think it would be a good sample for the WebSharper demo sample page.

Thanks in advance

.

What about UI.Next? Was not able to find anything file upload related in the recent samples.

By on 8/8/2016 2:52 AM ()

Hi,

WebSharper does not currently provide a simple file uploading control; though there will probably be such a functionality in an upcoming release.

In the source of FPish we use a custom built formlet like this:

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

[<JavaScript>]
let FileControl name =
  Formlet.BuildFormlet <| fun () ->
    let stateChanged = new Event<Result<string>>()
    let input =
      Input [Attr.Type "file"; Attr.Name name]
      |>! OnChange (fun e -> stateChanged.Trigger(Result.Success e.Value))
    let reset() =
      input.Value <- ""
      stateChanged.Trigger(Result.Success "")
    input, reset, stateChanged.Publish
  |> Formlet.InitWith ""

// Example usage of this control
[<JavaScript>]
let fileForm =
  let form = Form [Attr.Action submitUrl
                   EncType "multipart/form-data"
                   Method "POST"]
  let formlet =
    FileControl "myFileInput"
    |> Validator.IsNotEmpty "Please select a file"
    |> Enhance.WithSubmitButton
    |> Formlet.Run (fun _ -> form.Dom?submit())
  form -< [formlet]

The server-side code for the page that receives the data looks like this:

1
2
3
4

let context = HttpContext.Current
let files = context.Request.Files
if Seq.exists ((=) "myFileInput") files.AllKeys then
  files.["myFileInput"].SaveAs "filenameOnServer"

I hope this is helpful.

By on 2/10/2012 8:33 AM ()

You are very fast, thank you so much.

The fileForm shows the file-text-field, a browse button and a submit button, perfect.
Choosing a file, pressing submit and nothing happens, no POST is sent (checked with Fiddler).

I suppose to bind a message handler to the submit button to call the [<Rpc>] ReceiveFile with:

1

|> Formlet.Run (fun _ -> form.Dom?submit( ReceiveFile() ) )

Because of duck-typing style there is no static parameter check in submit. Maybe you have shortened your example code here.
That way on submit a POST is sent but it's empty, Fiddler shows:

1

{"$TYPES":[],"$DATA":null}

What do I miss?

P.S. I'm new to ASP.Net and will do that with WebSharper and F# only ;-)

By on 2/10/2012 1:25 PM ()

Hi,

This doesn't seem to work in chrome with 2.4. I get a javascript error in the console at

var clo2;
clo2=form.Body.submit;
return clo2(null); //Uncaught TypeError: Illegal invocation

which is generated for "form.Dom?submit()"

Any ideas?

By on 4/21/2012 5:07 AM ()

I'm getting the same issue -
var clo2;
clo2=form.Body.submit;
return clo2(null); //Uncaught TypeError: Illegal invocation

I'm running the example as-is with Chrome 18

By on 4/23/2012 5:54 PM ()

Hi,

It turns out we just had the exact same problem with the photo upload on FPish. Here is how to fix it:

1
2
3
4
5
6

// Define the following top-level function:
[<Inline "$form.submit()">]
let submit (form: Dom.Element) = ()

// Then replace `form.Dom?submit()` with:
    submit form.Dom

As a general advice, the ? operator should be used to access JavaScript object fields, but not methods. As you have noticed, the WebSharper translator can slightly alter such method calls.

By on 5/9/2012 2:17 AM ()

Sorry, my message wasn't really clear about the server-side part.

Actually, what I did there is build a regular HTML <form> element, and submit the "standard" way, ie. by calling the page at submitUrl and passing the form data as POST parameters.

So, the server-side code shouldn't be in an [<Rpc>], but rather in the sitelet that handles the submitUrl.

Hopefully, thanks to the HTML5 File API, we should be able to provide a more convenient and consistent FileUpload formlet control in an upcoming release of WebSharper.

By on 2/11/2012 2:13 AM ()

Thank you for the clarification.

It works pretty well with Internet Explorer (8.0) but doesn't work with Firefox 10.0.1 (or 4.0).
With Firefox the submit click jumps not to the submitUrl.

Any idea (cross-browsers problem)?

By on 2/15/2012 1:31 PM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper