0.7.3 • Published 6 months ago

@toolsntuts/svelte-components v0.7.3

Weekly downloads
-
License
-
Repository
github
Last release
6 months ago

Svelte Components

It makes use of the following technologies

Vite Configuration

Update your vite.config.ts file in your sveltekit application with the following

import { defineConfig } from 'vitest/config';
import { sveltekit } from '@sveltejs/kit/vite';

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    fs: {
      allow: [
        'dist',          // Allow access to the dist folder
        '.',             // Allow access to the project root
        'src'            // Allow access to src if needed
      ]
    }
  }
});

SpinLoader

If you're seeing this, you've probably already done this step. Congrats!

<script lang="ts">
  import SpinLoader from "@toolsntuts/SpinLoader.svelte"
</script>

<SpinLoader />

SpinLoader Configuration

  • class: Tailwindcss classes to be added as class props
  • borderColor: primary or white. Default is primary
<script lang="ts">
  import SpinLoader from "@toolsntuts/SpinLoader.svelte"
</script>

<SpinLoader class="size-4" borderColor="white" />

CloudinaryApiFileUpload

<script lang="ts">
  import CloudinaryApiFileUpload from "$lib/components/widgets/CloudinaryApiFileUpload.svelte";
	import type { iMedia } from "$lib/interface/index.js";

  const onUpload = (media: iMedia) => {
    console.log({ media, action: "uploaded" })
  }

  const onDelete = (media: iMedia) => {
    console.log({ media, action: "deleted" })
  }
</script>

<CloudinaryApiFileUpload { onUpload } { onDelete } folder="test" />

CloudinaryApiFileUpload Configuration

In your .env file add your cloudinary environment variables

PUBLIC_CLOUDINARY_UPLOAD_PRESET=
PUBLIC_CLOUDINARY_CLOUD_NAME=
PUBLIC_CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
CLOUDINARY_URL=

Then create your post and delete api routes

import type { iCloudinaryInfo, TUpload, iStatus, iUploadResource, iMedia } from '$lib/interface/index.js';
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types.js';
import { deleteFileFromCloudinary, uploadToCloudinary, uploadUrlToCloudinary } from '$lib/server/index.js';
import { UploadType } from '$lib/constants/index.js';


export const POST: RequestHandler = async ({ request }) => {
  
  // Your authentication logic

  try {
    const formData = await request.formData()

    const type = formData.get('type') as TUpload

    let res: iCloudinaryInfo | null = null

    if (type === UploadType.UPLOAD) {
      const resource: iUploadResource = {
        file: formData.get('file') as File,
        folder: formData.get('folder') as string
      }
      res = await uploadToCloudinary(resource) as unknown as iCloudinaryInfo
    } else { 
      const resource: iUploadResource = {
        url: formData.get('url') as string,
        folder: formData.get('folder') as string
      }
      res = await uploadUrlToCloudinary(resource) as unknown as iCloudinaryInfo
    }
    
    const result: iStatus = { message: "Successfully uploaded file", status: "success", data: res }
    return new Response(JSON.stringify(result))
  } catch (error: any) {
    const result: iStatus = { message: error.message, status: "error" }
    return new Response(JSON.stringify(result))
  }
};

export const DELETE: RequestHandler = async ({ request }) => {
  
  // Your authentication logic

  const body = await request.json()
  const { public_id, type, resource_type, secure_url } = body
  const media: iMedia = { public_id, type, resource_type, secure_url }
  
  try {
    const response = await deleteFileFromCloudinary(media)
    const result: iStatus = { message: "successfully deleted file", status: "success", data: response }
    return json(result)
  } catch (error: any) {
    const result: iStatus = { message: error.message, status: "error" }
    return json(result)
  }
};
0.6.9

6 months ago

0.7.2

6 months ago

0.7.1

6 months ago

0.7.3

6 months ago

0.7.0

6 months ago

0.6.8

7 months ago

0.6.7

7 months ago

0.6.6

7 months ago

0.5.8

7 months ago

0.5.9

7 months ago

0.6.2

7 months ago

0.6.5

7 months ago

0.6.4

7 months ago

0.6.1

7 months ago

0.6.0

7 months ago

0.5.7

8 months ago

0.5.4

8 months ago

0.5.3

8 months ago

0.5.5

8 months ago

0.5.2

8 months ago

0.4.9

8 months ago

0.4.8

8 months ago

0.4.4

8 months ago

0.4.7

8 months ago

0.4.6

8 months ago

0.5.0

8 months ago

0.5.1

8 months ago

0.3.9

9 months ago

0.4.1

9 months ago

0.4.0

9 months ago

0.4.3

9 months ago

0.4.2

9 months ago

0.3.8

9 months ago

0.3.7

9 months ago

0.3.6

9 months ago

0.3.5

9 months ago

0.3.4

9 months ago

0.3.0

10 months ago

0.2.7

10 months ago

0.2.6

10 months ago

0.2.8

10 months ago

0.3.2

10 months ago

0.3.1

10 months ago

0.2.2

10 months ago

0.3.3

9 months ago

0.2.4

10 months ago

0.2.1

10 months ago

0.2.0

10 months ago

0.1.9

10 months ago

0.1.8

10 months ago

0.1.7

10 months ago

0.1.5

10 months ago

0.1.4

10 months ago

0.1.3

10 months ago

0.1.2

10 months ago

0.1.0

10 months ago

0.0.5

10 months ago

0.0.4

10 months ago

0.0.3

10 months ago