feat(input-file-upload): add droppable and indicator support

[kiaking]

Add droppable file selection and individual item state support to <SinputFileUpload>.

In order to keep the backward compatibility, the model value accepts both File[] and the new FileObject[], and must define :model-type="object" when using FileObject[] as model value.

<script setup lang="ts>
const { data } = useData({
  files: [
    { file: File, indicatorType: 'running', canRemove: false }
  ]
})

const rules = {
  maxFileSize: maxFileSize('1mb')
}
</script>

<template>
  <SInputFIleUpload
    model-type="object"
    :v-model="data.files"
    :rules="rules"
  />
</template>

---

[netlify]

✅ Deploy Preview for sefirot-docs ready!

Name	Link
🔨 Latest commit	f093d19
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-docs/deploys/679831b1bebcf30008dcb10a
😎 Deploy Preview	https://deploy-preview-574--sefirot-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[kiaking]

@brc-dd
Could you take a look on types especially. It is working but I'm using generics here and maybe there are room for improvements. I don't know 🤔

[netlify]

✅ Deploy Preview for sefirot-story ready!

Name	Link
🔨 Latest commit	f093d19
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-story/deploys/679831b037a5760008f49094
😎 Deploy Preview	https://deploy-preview-574--sefirot-story.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[brc-dd]

appears weird in some cases (repro: update a prop after a file is selected, might be histoire only):

[kiaking]

@brc-dd
Yeah it happens on HMR, but can't reproduce on normal data modification. How did you do it? Does it happen outside HMR? Like adding a button to push/remove items or update indicator states works 👀

// These works.
function addItem() {
  data.value.files.push({
    file: new File([''], `000iii111jjjjjjj.txt`, { type: 'text/plain' }),
    indicatorState: 'completed',
    canRemove: true
  })
}

function update(){
  data.value.files[1].indicatorState = null
}

[brc-dd]

Screen.Recording.2025-01-27.at.2.01.59.PM.mov

[kiaking]

Ahhhh

[kiaking]

Yeah this must be Histoire issue... When ever updating props, the file object becomes empty object for some reason 🤔 No idea why it happens.

// before
[File [object, object]]

// when any props gets updated
[{}]

[brc-dd]

yeah