How to generate a File object?

Learn
1

Hi,

I keep reading and searching, but can’t manage to grasp how you’re supposed to get File objets to work with elm/File?

Obviously, you can get it from drive with Select, but the README introduction clearly says “Maybe you generate [files]”.
So how can I get a File object to work with from a generated file ?

The use case i’m stuck with is that I have a system to manage sound files between disk and a server all set up in elm, and I’m adding a new functionnality to modify a sound file, which I do in js.
So I would like to get the sound file back in Elm after that.

2

It doesn’t seem like you can actually create a File instance from Elm code - only the browser itself can create them. You could just store the sound file as Bytes and use File.Download.bytes to download the file (provided that’s what you’re trying to do).

3

It’s possible to pass JS’ File objects through ports and decode them with File.decoder in Elm, but I haven’t seen this documented anywhere so there might be a better solution.

4

I also would love to learn it! I pass a File as D.Value to port, do some js stuff and want it back from port. Can’t find a way to decode it into a File!
There is a package called elm-canvas, it decodes Image values passed through port to elm, converts them into Textures and draws to a canvas. That could be a clue, but I’m not that good with elm yet =)

5

Here is an example from a @jediknight post on Reddit:

https://ellie-app.com/8fKFTG2r94Fa1

6

Thanks nikersify. It did not occur to me as the only example was decoding a file from File.Select, but it also work by passing a JS File object through a port.

Tested it yesterday, works wonderfully.
See https://developer.mozilla.org/en-US/docs/Web/API/File

7

Oh man, I wish I knew that a year ago. I spent an afternoon writing a sloppy copy of elm-file via ports for work because the rest of the team didn’t want to upgrade to the new elm-html yet.

8

I’ll put it here for beginners like me =D
to get File from a port:

port getFile : (Json.Decode.Value -> msg) -> Sub msg

subscriptions : Model -> Sub Msg
subscriptions _ =
    getFile fileDecoder

fileDecoder : Json.Decode.Value -> Msg
fileDecoder fileValue =
    case Json.Decode.decodeValue File.decoder fileValue of
        Ok file -> GotFileMsg file -- handle file in update
        _ -> FailedToGetFileMsg -- handle error in update

and on the js side you just app.ports.getFile.send(file) =)