west - elm wood

Carga de archivos en Elm

Question

¿Cómo se carga un archivo (imagen o excel) en Elm?

Parece que no puedo encontrar ningún ejemplo.

La respuesta está bien, incluso si se utiliza el código nativo. He visto Data en Elm-Html pero parece que los archivos y las manchas no son compatibles. ¿Cuál es la forma de evitar esto?

Answer 1

La forma oficial de hacerlo es ahora https://package.elm-lang.org/packages/elm/file/latest/

Esta es una adición que vino en Elm 0.19.

Ahora el paquete oficial de HTTP también lo soporta. Aquí hay un ejemplo de https://package.elm-lang.org/packages/elm/http/latest/Http#request

import File
import Http

type Msg = Uploaded (Result Http.Error ())

upload : File.File -> Cmd Msg
upload file =
  Http.request
    { method = "PUT"
    , headers = []
    , url = "https://example.com/publish"
    , body = Http.fileBody file
    , expect = Http.expectWhatever Uploaded
    , timeout = Nothing
    , tracker = Nothing
    }

Answer 2

La otra opción para manejar las cargas de archivos en Elm es

• obtenga un valor codificado en base64 del FileReader en su aplicación Elm a través de un puerto.
• Luego, envíe ese valor codificado en base64 a su servidor (por ejemplo, en un cuerpo JSON).

Puede encontrar un tutorial aquí https://www.paramander.com/blog/using-ports-to-deal-with-files-in-elm-0-17 (dice que es para Elm 0.17, pero funciona sin cambios en Olmo 0.18).

Las desventajas de este enfoque son

• su servidor necesita para decodificar en base 64 los archivos que recibe, lo que aumenta un poco la carga del servidor, y
• La codificación base64 aumenta la cantidad de bytes que pasarán por el cable (en comparación con un archivo / blob).

Lo positivo:

• No es necesario utilizar un paquete con código nativo.

De los documentos de Elm Http : "En este momento solo admite cadenas, pero admitiremos blobs y archivos cuando obtengamos una API para ellos en Elm".

Answer 3

Soy el autor de la biblioteca a la que se refiere MisterMetaphor. Aunque es más fácil de usar de lo que él explica. Eche un vistazo a cómo configuré elm-package.json en el ejemplo: https://github.com/simonh1000/file-reader/blob/master/example/elm-package.json - simplemente agregue "native-modules": true,

He escrito un blog para respaldar el lanzamiento del código para 0.18 y mostrar cómo las cargas a, por ejemplo, S3 se pueden hacer en Elm.

Answer 4

Utilice una biblioteca como file-reader .

Hay un conjunto de ejemplos bastante completos, puede comenzar con este .

Sin embargo, hay una advertencia. Dado que esta biblioteca utiliza algún código nativo, no puede obtenerlo del paquete oficial repo. Así que tendrás que recurrir a instalarlo manualmente.

Para este propósito, escribí este reemplazo de instalación hacky elm-package . Espera un archivo exact-dependencies.json en el directorio raíz de su proyecto. Puede obtener este archivo inicialmente desde el directorio elm-stuff que elm-package crea al construir su proyecto. Luego agrega una referencia al paquete del file-reader al file-reader exact-dependencies.json como este:

{
    "evancz/elm-effects": "2.0.1",
    "evancz/virtual-dom": "2.1.0",
    "evancz/elm-http": "3.0.0",
    "evancz/start-app": "2.0.2",
    "evancz/elm-html": "4.0.2",
    "elm-lang/core": "3.0.0",
    "simonh1000/file-reader": "1.0.0"
}

También deberá agregar una referencia al file-reader a su archivo elm-package.json :

{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "3.0.0 <= v < 4.0.0",
        "evancz/elm-effects": "2.0.1 <= v < 3.0.0",
        "evancz/elm-html": "4.0.2 <= v < 5.0.0",
        "evancz/elm-http": "3.0.0 <= v < 4.0.0",
        "evancz/start-app": "2.0.2 <= v < 3.0.0",
        "simonh1000/file-reader": "1.0.0 <= v < 2.0.0",
    },
    "elm-version": "0.16.0 <= v < 0.17.0"
}

Después de esto, ejecutas el reemplazo de instalación de elm-package y esperamos que funcione.