Currently, we are receiving and decoding file-data using input elements and storing blob ref as a Json.Value. We then pass this value around the app, for anybody to use, by encoding and attaching it to a custom element as a property.

This way any other component outside of elm-env may take a file ref and do whatever they want with it.

It would've been nice to migrate away from using input elements to a more explicit and concise API like elm/file, but unfortunately File does not expose its blob-ref and there's no conversion function like File -> Json.Value.

Should there be a way to share a file-ref with the outside-js-code?

Hi,

I don't seem to find a way to create a file (with a specific filename), which I need for http bytesPart. It only seems to be possible to work with files created outside of elm. Http bytesPart always adds the filename "blob" btw.

There is also some discussion on this here: https://discourse.elm-lang.org/t/how-to-generate-a-file-object/5521

Many thanks!!
Best
L

Would you like me to update your elm.json accordingly? [Y/n]: y
-- PROBLEM BUILDING DEPENDENCIES -----------------------------------------------

I ran into a compilation error when trying to build the following package:

elm/file 1.0.5

This probably means it has package constraints that are too wide. It may be
possible to tweak your elm.json to avoid the root problem as a stopgap. Head
over to https://elm-lang.org/community to get help figuring out how to take this
path!

Note: To help with the root problem, please report this to the package author
along with the following information:

elm/bytes 1.0.0
elm/core 1.0.1
elm/json 1.1.0
elm/time 1.0.0

If you want to help out even more, try building the package locally. That should
give you much more specific information about why this package is failing to
build, which will in turn make it easier for the package author to fix it!

{
    "type": "application",
    "source-directories": [
        "src"
    ],
    "elm-version": "0.19.1",
    "dependencies": {
        "direct": {
            "elm/browser": "1.0.2",
            "elm/core": "1.0.5",
            "elm/html": "1.0.0"
        },
        "indirect": {
            "elm/json": "1.1.3",
            "elm/time": "1.0.0",
            "elm/url": "1.0.0",
            "elm/virtual-dom": "1.0.2"
        }
    },
    "test-dependencies": {
        "direct": {},
        "indirect": {}
    }
}

Problem

I use File.toString on text files that are not encoded in UTF-8 (in my case it is ISO-8859-1). This turns all my swedish letters into � (U+FFFD) which is the unicode replacement character.

This happens when the file is converted to string. Since all non-ascii characters (åäöÅÄÖ in my case) all gets turned into the same unicode character there is no easy way to fix it after file has been read. I guess one could read it as Bytes and convert to UTF-8 manually.

Possible solution

The FileReader.readAsText() supports a second parameter to specify encoding.

I tested changing the code in the Elm.Kernel.File module, adding my encoding and it worked. Maybe the encoding could be added as an argument to File.toString?

reader.readAsText(blob, 'ISO-8859-1');

Hello!

We're using elm/file in our project to upload files from the user's computer.
In some cases, we've had a runtime error:

It's hard to explain how to reproduce the case, because for us it concerns files synchronized with One Drive. When the One Drive application is not launched, we can't open some files (for example with the Excel desktop app).

SSCCE

https://ellie-app.com/8Nkyf2KYWPSa1 (but I don't know how to reproduce the proper "state" for the file to upload)

Cause

The problem is in this file:

function _File_toString(blob)
{
	return __Scheduler_binding(function(callback)
	{
		var reader = new FileReader();
		reader.addEventListener('loadend', function() {
			callback(__Scheduler_succeed(reader.result));
		});
		reader.readAsText(blob);
		return function() { reader.abort(); };
	});
}

We're assuming that the loadend event means that everything was successful, but the documentation says that it is also called if the read operation fails. So we need to check before wrapping it in a succeed (here, the reader.result value is null) or maybe listen to load instead.

The problem should be the same with File.toUrl and File.toBytes.

I have a Cmd Msg of Select.file ["text/plain"] TextSelected (e.g)., which in Firefox opens a browser window with all files that are not ending .csv grayed out and unselectable.

Whereas in Safari, the .csv files are grayed out in favour of .txt files. In Chrome, both .csv and .txt files can be selected.

See Ellie example, or "irl" example

Tried the provided example here: https://ellie-app.com/4KR3vWzcpwFa1

Every time you run File.toBytes, all of those bytes stays in memory forever. Even if never used.
Running this function on a 350MB file a couple of times will make the browser use gigabytes of RAM.

File.toString and File.toUrl does not have the same problem, those are garbage collected immidiatly
( I have tested Chrome and Firefox on Linux and get exactly the same results )

Possible solution:

Adding reader = null after it is used removes the problem on both Chrome and Firefox, with this line added I see no memory leak anymore.

In the docs for elm/file, there is an example usage of saving SVG content as a file. Initially, I understood this to mean that I could generate SVG markup with elm/svg and use elm/file to save it locally, which is my exact use case. However, it doesn’t seem possible to get the SVG nodes to render to a String, which is required by File.download. Am I thinking about the problem incorrectly?

Using the latest version of elm/file with the lastest version of elm/json causes file selection to stop working. The root cause is a bad piece of code that appears to have been added for node.js environments.

Input nodes on mobile browsers support a capture attribute that allows easy access to the camera and or microphone to take an image or make a short recording instead of a plain, old file-selector. Supporting this attribute would enable all sorts of cool mobile apps.

Here's a site with examples of each version: http://anssiko.github.io/html-media-capture/

On desktop browsers, it just defaults back to the regular file-picker. The inconsistency between mobile and desktop may absolutely be a reason not to do this.

Bringing this up because someone on Elm-slack specifically asked about how to capture images this way from a mobile browser, and the other way of doing it is a huge, painful workaround with a lot of port-side code.

The examples using File.Select.files fail to call its callback on iOS 12 browsers. With my iPhone Xs/5s, both 'Take Photo' and choosing from 'Photo Library' did not work at all. While with my iPad Pro, 'Take Photo' did not work but choosing from 'Photo Library' worked.

I think this issue is related to the problem reported on this Discourse topic. Applying the fix suggested at the last post (moving the node variable declaration to the outer scope) to the generated JavaScript file seems to solve the problem.

This API is really useful when combining with elm-ui, hope this will be resolved soon !

The problem was originally reported in #5, elm/http#56, and elm/http#58.

I got it down to a smaller SSCCE though:

import Bytes.Encode as E
import File.Download as Download

main =
  Platform.worker
    { init = \() -> ( (), Download.bytes "word.txt" "text/plain" bytes )
    , update = \_ _ -> ( (), Cmd.none )
    , subscriptions = \_ -> Sub.none
    }

bytes =
  E.encode <| E.sequence <|
    List.map E.unsignedInt8 [ 101, 115, 115, 101, 110, 116, 105, 97, 108 ]

@boianr mentioned bpampuch/pdfmake#294 which appears to be the same problem. They solved it like this https://github.com/bpampuch/pdfmake/pull/297/files, but my testing suggests that you do not need to go through Uint8Array like they did. We just need to get content.buffer, but I'm not certain how to account for content.byteOffset yet.

This is kinda tangential from #10.

Download.url fails in IE b/c MouseEvent does not have a constructor in IE. Here is the SSCCE (it was cool I learned there was a thing called Platform.worker!)

module Main exposing (main)

import File.Download as Download


main =
    Platform.worker
        { init = \() -> ( (), download )
        , update = \_ _ -> ( (), Cmd.none )
        , subscriptions = \_ -> Sub.none
        }


download =
    Download.url "https://media.giphy.com/media/dUQakUPAZw1EY/200w_d.gif"

The Error

Selenium tests needs access to the html input but elm/file never places its input element in the dom.

What approach do you use/suggest?

Thanks in advance.

Trying to download bytes produces InvalidStateError in IE10.

Here is related issue bpampuch/pdfmake#294

Seems that ie10 support for Blob is limited.

I just copied good SSCCE example from #10

import Bytes.Encode as E
import File.Download as Download

main =
  Platform.worker
    { init = \() -> ( (), Download.bytes "word.txt" "text/plain" bytes )
    , update = \_ _ -> ( (), Cmd.none )
    , subscriptions = \_ -> Sub.none
    }

bytes =
  E.encode <| E.sequence <|
    List.map E.unsignedInt8 [ 101, 115, 115, 101, 110, 116, 105, 97, 108 ]

I started server with code above, went to it using mobile browsers (safari and crhome on iphone 7) and get weird errors, like trying to download files from server

here screenshots, Im sorry they are on russian, at least I can write translation of this :)
Safari is unabled to open page
Error: could not complete operation (WebkitBlobResource, error 1)

unable to access site page temporarily unavailable or permanently moved to new address

(tested on iphone 7)

And I cant figure out a way to save pdf file in my app for mobile users. The pdf file saves from server response after uploading form, (then it's generating and send back), so I dont have permanent link to file for easy way.
I will very appreciate for fixing this. Thank you!

The idea is to be able to deal with big files (that would not fit in memory).

A possible API could be:

sliceString : Int -> Maybe Int -> File -> Task x String
sliceString start end file =

Seems the Blob.slice function allows to implement this efficiently.

Basically, the accept attribute doesn't really work that well (setting it to just image/png will still let iOS users pick any image/* from their gallery, and will let android users pick videos).

I think the docs for these functions should do either or both of:

• Explain that it uses accept under the hood (I had to read the source to find that out)
• Explain that this is not a reliable way to filter file types

As far as I understood and tested, the file filter when using Select.file(s) is set according to the mime types specified, so there is no way of setting it to a custom file extension.
Or there is a mime type that can do that that I’m don’t aware of.

The selected file is returning correct metadata, however, File.mime is returning an empty string in Microsoft Edge.