What would need to happen to implement Blob/File in Elm.http?

[Daniel Bachler]

Hi,

Simon and I extended his Filereader library ( https://github.com/simonh1000/file-reader ) over the last few days to read binary files as well as text files. There are now 3 methods: readAsText, readAsArrayBuffer and readAsDataURL. One of the examples makes use of a Dropzone where you can drop images, then readAsDataURL is used to read an image as a dataURL (=base64 encoded) and assign that to an img src tag. The roundtripping of values from the event is done with a decoder that decodes the files as a Json.Values and uses that to pass it into one of the readAs* functions.

But as Simon wrote in this ticket https://github.com/simonh1000/file-reader/issues/12 , the most interesting use case for readAsArrayBuffer would be to upload straight binary file - and this doesn't work right now because Elm.http lacks support for Blob/File (https://github.com/evancz/elm-http/blob/3.0.0/src/Blob.elm is just a stub).

I don't know that much about Elm yet, so I want to ask more knowledgeable people here: what would it take to implement a Blob/File Api for Elm.http? Is it mostly about providing type definitions and handling the corresponding cases in Json.Decode/Json.Encode? If that is all I would see if I can come up with a solution and send a PR, but I'd like to know how deep the water might be before I get started with something like this :)

Also, Elm.http does not have a Contributing file, is there a general one for big important Elm libraries?

Daniel

[Simon]

Daniel 

did you ever make progress on this?

Simon

[Daniel Bachler]

Yes, I have a private fork of the http module with some minor modifications to allow uploading a Json.Value (that has to be a blob). It's not pretty but it gets the job done. I haven't gotten around to upgrading to 0.17 yet, but I plan to do that in July. Are you interested in my modifications to elm-http for 0.16?

--
Daniel Bachler
http://www.danielbachler.de

--
You received this message because you are subscribed to a topic in the Google Groups "Elm Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/elm-discuss/g65pRzgqkvo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to elm-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Simon]

I'd love to look at what you did. I have run into this issue, or at least think I have in that i need to create a multipart element and https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript suggests I need a different sort of content boundary than `Http` foresees (`blob` rather than `------WebKitFormBoundaryjRcsGGwEvozx7JSA`).

[Daniel Bachler]

Hi Simon,

here you go: https://github.com/danyx23/elm-http/commits/encode-as-json

As I said, it's hacky and I haven't gotten around to updating to 0.17, but for 0.16 for my purposes it worked :)

Daniel

--
Daniel Bachler
http://www.danielbachler.de

[Gusztáv Szikszai]

Funnily enough the Http package doesn't need to change in order to allow file uploads. 

I already made this work for Elm-UI, as I described here https://gdotdesign.gitbooks.io/elm-ui-guide/content/guides/handling_files.html the Http package uses FormData to send multipart forms and FormData allows appending files, so the only thing needed is to tricking it to accept the File object as a String because that's the only supported Http.Data type.

The main problem is how to get the File and for that I created the FileManager (with a native module) module, basically it allows selecting single / multiple files and returns a record that contains information about the file and the raw File object itself and then there is the toFormData method which converts it to Http.Data, masquerading the File as a String.

And that is all, you can see a working example here: https://github.com/gdotdesign/elm-ui-guide/blob/master/examples/file-upload.elm (it needs Elm-UI)

If that wasn't clear I'm happy to explain it in more detail. 

Unfortunately this still using native modules and although it can be separated into a standalone module I see no way that it will be white listed soon, let's just hope installing packages directly from Github will come soon.

[Simon]

Hi
I’m not sure I want to adopt native code as such, but I already need to use ports, so I’d like to learn from what you have. I’m struggling to follow
https://github.com/gdotdesign/elm-ui-guide/blob/master/examples/file-upload.elm#L55
FileManager.toFormData "file" file
as toFormData appears to take only argument?

What am I missing?

Simon

[Gusztáv Szikszai]

It takes two (https://github.com/gdotdesign/elm-ui/blob/master/source/Ui/Native/FileManager.elm#L74): first is the key (String) which is "file" and the second is the file object which goes through here https://github.com/gdotdesign/elm-ui/blob/master/source/Native/FileManager.js#L48 which actually returns a File but with a type of String so Http.stringData can accept it.

Sadly ports have very strict border protection as described here http://guide.elm-lang.org/interop/javascript.html so there is no way that a File can be passed through them, that is the main reason a native module is needed. 

[Simon]

Hi, I see you do not implement readAsArrayBuffer. Isn't that the most flexible for binary data?

Simon

[Simon]

I've now found a much simpler way to do this with 0.18

http://simonh1000.github.io/2016/12/elm-s3-uploads/