DEV Community: sina safari

Upload file in Sveltekit

sina safari — Sat, 14 Jan 2023 13:08:09 +0000

sveltekit is trending nowadays and I believe it totally deserves it. I tried it for one of my side projects and enjoyed it.

sveltekit is a fullstack meta-framework for sveltejs that can handle almost everything we need for developing a web application. one of these features is file uploading and storing it to file system.
for uploading images (or other types of files) in sveltekit, we have 2 options. form actions, and API routes.

template

in +page.svelte we can create a form with multipart/form-data as its enctype. this form submits to an action handler (that we are to implement in a moment):

<form action="?/avatar" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar" placeholder="avatar" />
  <button type="submit">upload</button>
</form>

Action Handler

as the sveltekit documentation says:

actions allow you to POST data to the server using the <form> element.

basically, they are functions that run on the server and are specifically designed for accepting form actions. you can read more about them in sveltekit documentation

we have to create an action handler in +page.server.ts. this file can be used for providing page initial data (by exporting a function named load) and defining form action handlers.
note that as specified in <form /> tag, the action name should be avatar.

import fs from 'fs/promises'
import path from 'path'
import { redirect } from '@sveltejs/kit'
import type { PageLoad, Actions } from './$types'

export const actions: Actions = {
  avatar: async ({ request, route, url }) => {
    try {
      const data = Object.fromEntries(await request.formData())
      const filePath = path.join(
        process.cwd(),
        'static',
        'avatars',
        `${crypto.randomUUID()}.${(data.avatar as Blob).type.split('/')[1]}`
      )
      await fs.writeFile(filePath, Buffer.from(await (data.avatar as Blob).arrayBuffer()))

      // TODO: store the file path in database for further references.
      throw redirect(303, url.pathname)
    } catch (err) {
      throw fail(500, { err: err })
    }
  },
}

that's it! now the uploaded file will be stored in the static folder and it's accessible like other static assets.

also, I used crypto module for naming files in the file system instead of the original file name, for having the same naming format for all files and removing long file names.

note that this code is not completed logic. the path of the uploaded file should be stored in a persisted storage or database for further usage. also, errors should be handled properly.

API routes

the same functionality can be applied as an API route as well. forms should be submitted using javascript in this way. also if you have multiple clients besides your client-side sveltekit app (like a react-native mobile app) this approach is the one should choose.

we can define API route endpoints in +server.ts. for specifying handlers for different HTTP methods (GET, POST, etc.) we can declare a function with the name of the HTTP verb. here we want a handler for

import path from 'path'
import fs from 'fs/promises'
import { fail, redirect } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const POST = (async ({ request, url }) => {
    try {
        const data = Object.fromEntries(await request.formData())
        const filePath = path.join(
            process.cwd(),
            "static",
            "avatars",
            `${crypto.randomUUID()}.${((data.avatar as Blob).type.split("/")[1])}`
        );
        await fs.writeFile(filePath, Buffer.from(await (data.avatar as Blob).arrayBuffer()))
            // TODO: store the file path in database for further references.
        return new Response(String({path: filePath}))
    } catch (err) {
        throw fail(500, { err: err })
    }
}) satisfies RequestHandler;

Note that in API routes the response body should be generated with Response object (which is global to typescript) so it's a little different from form actions.

you can read more about the API routes in sveltekit routing documentation.

after all, if you need to have static file serving, you should change vite.config.js in the root of the project a little:

import { sveltekit } from '@sveltejs/kit/vite';
import { searchForWorkspaceRoot } from 'vite'

/** @type {import('vite').UserConfig} */
const config = {
    plugins: [sveltekit()],
    server: {
        fs: {
            allow: [searchForWorkspaceRoot(process.cwd()), "/static/avatars/"]
        }
    },
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}']
    }
};

export default config;

Although this method works fine for small apps, storing assets and serving them through static path is not considered a best practice. it's not about sveltekit limitations, using an object storage service like Amazon S3 or MinIO is preferred for larger applications.

hope you find this post useful!

How I go with react native in late 2022

sina safari — Sun, 27 Nov 2022 12:25:12 +0000

In the javascript world, there are more than a million tools and libraries for developing the smallest feature in your application.
in the RN world, and in late 2022, I usually use these tools:

Base project

although there are many templates in the community, I prefer the minimal and default react-native init with base react-native-template-typescript which is recommended in the official docs.
the default template uses flow as a javascript type system extender. but, typescript is the most reliable and safe programming language with large community support for
developing large-scale apps. so, typescript is always my choice over pure javascript and other tools.

ignite is a fine template too. the template is preconfigured with expo and react-native-cli. but I don't agree with some of their decisions. for example, using mobx and apisause.
but I always use their template to use config files, etc. the sample app is configured so well.

Networking

unless you are developing a calculator app or something like this, you will need some network access and API requests. in my opinion, axios is the best option for networking in any js-based application. axios is fully configurable, and it's easy to use compared to fetch API (which is the react-native default way).

calling an API is not enough in most cases. caching (or keeping server-client data) and state management is important as well. although all of them can be handled completely manually, I prefer to use a 3rd-party package, which is well-tested and provides clean API.

There are only two hard things in Computer Science: cache invalidation and naming things.

-- Phil Karlton

react-query helps us to handle server-client caching (btw, cache revalidation is one of the hardest problems in computer engineering), and also helps us write asynchronous code like it's synchronous. I mean we can get data from an external resource (eg. API call) without writing a single try catch block, and without any manual state changing.

another option is the redux toolkit query which is fully compatible with redux, but like redux itself, it requires boilerplate code. I prefer react-query for all the use cases.

Routing

react-navigation is the best option for 99.9% of cases (that 0.1% is when you need to integrate react native with native code).
it provides different navigation strategies, like stack, drawer, tab, etc.

another option is react-native-navigation which I haven't used yet but as the document says:

This is a popular alternative to React Navigation and may be a better fit for you if you are trying to integrate React Native into an existing large native app.

I'm curious about it and I intend to try it in my upcoming side projects.

State management

redux-toolkit is the famous option for managing the global state in react-native. but most of the time, the project does not need a huge global state. the application is divided into
smaller modules that have their state. also, redux-toolkit still requires more boilerplate code in comparison to its rivals.
I had similar issues and recently I tried zustand on my react-native project and I enjoyed it. I will choose it for my next project as well.
zustand is so small and does not need a provider or wrapper component. so it can be local to a module.

all server-client cache is handled by react-qeury, so only client-side states will be handled by the state manager tool (and in most cases, it's not an async action).
so a small library like zustand looks better in my opinion.

there's another option that is not as practical as redux and zustand, but I like it. BLOC is a state management pattern (not necessarily a global state) that is
so popular in the flutter community. this pattern is based on reactive programming and streams. Felix Angelov made bloc.js that help us to implement this pattern.
as I said, it may not be a suitable option for enterprise-level react-native applications, but definately it's a cool library.

Database

for most applications, AsyncStorage works fine. also, you can use it with redux-persist or persist middleware of zustand.
in this way, you won't even need to touch the AsyncStorage. my first choice as a database (or just a persistor tool) is zustand and AsyncStorage. this combination can solve storage issues most of the time.

There's another option that I like to use in my next project. WatermelonDB is a relational database that is powered by SQLite but is observable.
also, WatermelonDB can be synchronized with a remote database which can be useful in most cases.

UI

you may need nothing but react-native's StyleSheet module to completely style an application, but it is not easy and it may result in a log of repetitive style props.

UI libraries and frameworks try to solve this repetition issue by creating predefined components. unlike web UI libraries (like material UI, or mantine), react-native UI libraries are not full of ready-to-use components. most of them are incomplete in comparison to web UI libraries. but I think native-base is the best option among them. it provides theming options and a lot of reusable and configurable components. native-base overrides all react-native default components (like View, Flatlist, etc) and let us give styles attributes as props to those components and elements. I love this feature. native-base is my number one option for my react-native projects.

There's another option that I haven't used yet, but I think that it's a great option. nativewind brings tailwindcss to react-native. some other libraries try to do the same, but I think nativewind looks better than the others.

Animation

react-native provides an Animated API for developing animated UI components. but it's not the optimal way of animating elements. this is mostly related to the architecture of react-native and communication of the js thread and native thread.

the solution is react-native-reanimated. reanimated helps us to create smooth and performant animations with minimal setup, with a lot of helpers, and is relatively easy to use. another useful library for handling gesture animations is react-native-gesture-handler which is defined as:

native-driven gesture management APIs for building the best possible touch-based experiences in React Native.

react-native-gesture-handler website

these two libraries are dependencies for some other libraries as well. for example, the react-navigation drawer requires this library to function.

a high-level alternative to react-native-reanimated is moti. moti uses reanimated as its dependency and provides a high-level API for animations in react native. it looks like framer-motion on the web and provides similar APIs.

another library that I want to try is react-native-skia which is not completely related to animations but I think this is the best section for mentioning it. it's a 2D graphical rendering engine that is popular for being used as a renderer engine in flutter. as the website says:

React Native Skia brings the Skia Graphics Library to React Native. Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox, Firefox OS, and many other products.

although using this library will increase bundle size up to 6MB in mobile apps, in some special cases might be a good option.

Development and collaboration

my version control tool is git and github is the platform that my source code lives on. there are some other tools like eslint (for linting and setting some rules),
prettier (for having the same code style between different editors and IDEs), husky (for managing git hooks)

having a code review and analysis tool in CI/CD pipeline can help developers to keep their code clean. some examples of these tools are sonarqube and embold.

Testing

There's nothing better than jest and testing-library/react-native in react-native.
these tools are suitable for unit and integration tests and they have great community support, utils, and helper functions.

I haven't used it yet, but it seems detox is a fine e2e testing tool for react native. something like cypress in the web.
I think it's a little hard to configure, but in the end, it's really helpful.

App build and versioning

for versioning builds, react-native-version beside np, is pretty helpful.

since my remote code repository is github, the best way to handle CI/CD pipeline is github actions. using this tool (or any other tool like gitlab-ci, circleci, etc),
you can automate linting, testing, building, and publishing apps. github actions has great community support. its best feature is that it's free.

in my future projects, I want to try ms appcenter and fastlane as well. specifically appcenter looks pretty useful.

Native features

native features like the Camera, Microphone, etc, are not necessary for all applications. but if they are likely to be used in one way or another. I used these libraries and they are pretty well-designed:

Camera

for many years, react-native-camera was a good option for using the camera in react-native but now it's deprecated. a good option is react-native-camera-vision which includes a set of well-designed API. also this library is more optimized than react-native-camera.

Map

react-native-maps is the best option for handling location and maps in react native. you can use openstreet, google maps, apple maps, or any other tile overlay. also, it provides some good examples in its repository which covers most of the use cases.

Biometrics and Keychain

react-native-biometrics helps us to access functionalities like FaceID, TouchID, or any other biometric features that are available in the device. react-native-biometrics uses the device Keystore for biometric authentication. it's helpful when you develop an application that is security intensive.

by the way, if you want to access the native device keychain, react-native-keychain is the right tool.

Conclusion

these are some tools that I used in my previous projects or I intend to use in the future. but there are a lot of useful packages and libraries that I don't know, and
they may provide even better solutions than the above ones. in my opinion, there's not a single best solution for a problem (specifically in javascript), and trying new tools, libraries, and approaches, always helped to think better about coding and finding solutions.

I hope you found this text useful!