[Blob] `handleUpload(event)` and `useUpload(path)` #87

Atinux · 2024-04-25T14:11:56Z

On the servers-side:

// api/upload.post.ts
export default eventHandler(event => {
  // Do auth checks...
  return hubBlob().handleUpload(event, {
    formKey: 'file', // default
    multiple: true | false, // throw error if multiple files & false, default true
    // ... put() options
    // ensureBlob() options
  })
})

We should add a prefix option to put() to we can also have it in handleUpload(event)

On the app side:

<script setup>
async function upload(e: Event) {
  const { pathname } = await useUpload('/api/upload')(e.target.image)
}
</script>

<template>
  <div>
    <h3>Images</h3>
    <form @submit.prevent="upload">
      <label>Upload an image: <input type="file" name="image"></label>
      <button type="submit">
        Upload
      </button>
    </form>
</template>

The text was updated successfully, but these errors were encountered:

Gerbuuun · 2024-04-25T16:13:37Z

I was just working on a way to preview the image before you upload it. Maybe you can add this to the useUpload composable?
Or is the pathname the location of the local image which can then be used in a <img> element?

Atinux · 2024-04-26T11:04:31Z

You can use URL.createObjectURL(file) in the Vue part to display the blob:

<script setup lang="ts">
const avatar = ref()

function onFileChange (files: FileList | null) {
  if (!files?.length) return
  avatar.value = URL.createObjectURL(files[0])
}
</script>

<template>
  <form class="p-2">
    <UFormGroup name="avatar" label="Avatar" help="JPG or PNG, 1MB max.">
      <UAvatar :src="avatar" alt="avatar" size="lg" />
      <UInput ref="fileRef" type="file" accept=".jpg, .jpeg, .png" @change="onFileChange" />
    </UFormGroup>
  </form>
</template>

See a demo on https://stackblitz.com/~/edit/github-x6x77g

Atinux added the enhancement New feature or request label Apr 25, 2024 — with Volta.net

Atinux assigned farnabaz Apr 25, 2024

farnabaz mentioned this issue May 10, 2024

feat: handleUpload() util and useUpload() composable #99

Merged

Atinux closed this as completed in #99 May 31, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Blob] `handleUpload(event)` and `useUpload(path)` #87

[Blob] `handleUpload(event)` and `useUpload(path)` #87

Atinux commented Apr 25, 2024 •

edited

Gerbuuun commented Apr 25, 2024

Atinux commented Apr 26, 2024 •

edited

[Blob] handleUpload(event) and useUpload(path) #87

[Blob] handleUpload(event) and useUpload(path) #87

Comments

Atinux commented Apr 25, 2024 • edited

Gerbuuun commented Apr 25, 2024

Atinux commented Apr 26, 2024 • edited

[Blob] `handleUpload(event)` and `useUpload(path)` #87

[Blob] `handleUpload(event)` and `useUpload(path)` #87

Atinux commented Apr 25, 2024 •

edited

Atinux commented Apr 26, 2024 •

edited