[SOLVED] how to upload image or file to storage ?

normally file or image resource we get from input (type = ''file") right ? i got it from there and i try to upload it

TL;DR

The user was trying to upload an image or file to storage using Appwrite. They initially had trouble because they were using the wrong SDK (NodeJS instead of Web SDK). They were informed that Appwrite server is designed for server-side use and not suitable for client-side applications. They were also warned about possible security concerns. The user asked if they could use both Appwrite client and server in the same project but did not receive a clear answer. They encountered a specific error ("Buffer is not defined") and tried different browsers but were unsuccessful. A proposed solution was shared involving uploading files using VueJS. The user shared their code for handling

Yes, that's right, but what's the exact line of code you use to retrieve from this input?

here

TypeScript

const onFileSelect = (event) => {
  const fileList = event.target.files
  checkFileList(fileList)
}

const checkFileList = (fileList) => {
  // check user hasn't select file & file input type multiple
  if (fileList.length === 0 || (!props.multiple && files.length > 0)) return

  for (let index = 0; index < fileList.length; index++) {
    let file = fileList[index]

    // check file type
    if (file.type.split('/')[0] != 'image') continue
    //check dupicate files
    if (!files.some((f) => f.name === file.name)) {
      const result = checkMaximumFileSize(file.size)
      // check maximum file size
      if (result.status) {
        // push original file
        file.url = URL.createObjectURL(file)
        files.push(file)
        // files.push({ name: file.name, size: file.size, url: URL.createObjectURL(file) })
      } else {
        const convertSize = parseInt(`${props.maximumFileSize}000000`)
        // compress file
        new Compressor(file, {
          quality: 0.8,
          convertSize: convertSize,
          // The compression process is asynchronous,
          // which means you have to access the `result` in the `success` hook function.
          success(result) {
            //convert from Blob to File
            let newFile = new File([result], result.name, { type: result.type })
            console.log('🚀 ~ file: CustomFileInput.vue:95 ~ success ~ newFile:', newFile)
            // push compress file
            newFile.url = URL.createObjectURL(newFile)
            files.push(newFile)
            // files.push({
            //   name: newFile.name,
            //   size: newFile.size,
            //   url: URL.createObjectURL(newFile)
            // })
          },
          error(err) {
            notify.error(err.message)
          }
        })
        // notify.error(result.msg)
      }
    }
  }
  emit('update:modelValue', files)
}

Oh you use VueJS lol Try uploading directly with this line: event.target.files[0]

For my part, I use input like this:

TypeScript

async function upload(f: File) {
    try {
        const file = await storage.createFile("cloud", ID.unique(), f, undefined, (upload) => {
            uploadProgress.value = upload.progress
        })
        uploadProgress.value = 0
    } catch (err) { }
}

await upload(event.target.files[0])

i'll try it later.

👌

no luck , still get the same error "Buffer is not defined"

Hum

I think the problem comes from elsewhere, but from where? lol

Have you tried another browser?

not yet

let me try

got the same error i try on brave and chrome

I couldn't help you more, sorry :/

last question we can use appwrite client and appwrite server in same project ?

Yes, but files are handled differently client side vs server side

Appwrite server is designed for a server-side, so if you put it on the client-side, you will surely have security concerns I imagine.

i got an warning on console when i using appwrite server side , it can be a problem or not ?

TypeScript

import { Client as Appwrite, Account } from 'appwrite'
import { Client as AppwriteServer, Users, Teams, Databases, Storage } from 'node-appwrite'
import { Server } from '../../utils/config/appwrite.config'

let api = {
  sdk: null,
  provider: () => {
    if (api.sdk) {
      return api.sdk
    }
    //client side
    let appwrite = new Appwrite()
    appwrite
      .setEndpoint(Server.endpoint) // Your project ID
      .setProject(Server.project) // Your API Endpoint
    const account = new Account(appwrite)

    //server side
    let appwriteServer = new AppwriteServer()
      .setEndpoint(Server.endpoint) // Your API Endpoint
      .setProject(Server.project) // Your project ID
      .setKey(Server.secret_api) // Your secret API key
    // .setSelfSigned()
    const users = new Users(appwriteServer)
    const teams = new Teams(appwriteServer)
    const databases = new Databases(appwriteServer)
    const storage = new Storage(appwriteServer)

    api.sdk = { account, users, teams, databases, storage }
    return api.sdk
  }
}

export default api

You should not use it client side

noted

@XaFigg @Steven solved , my bad i didn't notice the files are handled differently client side vs server side like @Steven just said , thank you so much