ResolvedSelf HostedWebStorageCloud

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

Dec 27, 2023, 20:15

View on Discord

Votes

Replies

Participants

Unknown

Messages

#fef9efOriginal post

Rank 2: Process

Aug 10, 2023, 18:03

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

Summary

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

XaFigg

Rank 3: Container

Aug 10, 2023, 18:10

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

#fef9ef

Rank 2: Process

Aug 10, 2023, 18:13

here

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)
}

XaFigg

Rank 3: Container

Aug 10, 2023, 18:15

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

XaFigg

Rank 3: Container

Aug 10, 2023, 18:19

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])

#fef9ef

Rank 2: Process

Aug 10, 2023, 18:22

i'll try it later.

XaFigg

Rank 3: Container

Aug 10, 2023, 18:24

👌

#fef9ef

Rank 2: Process

Aug 10, 2023, 20:11

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

XaFigg

Rank 3: Container

Aug 10, 2023, 20:11

Hum

XaFigg

Rank 3: Container

Aug 10, 2023, 20:11

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

XaFigg

Rank 3: Container

Aug 10, 2023, 20:12

Have you tried another browser?

#fef9ef

Rank 2: Process

Aug 10, 2023, 20:12

not yet

#fef9ef

Rank 2: Process

Aug 10, 2023, 20:12

let me try

#fef9ef

Rank 2: Process

Aug 10, 2023, 20:16

got the same error i try on brave and chrome

XaFigg

Rank 3: Container

Aug 10, 2023, 20:16

I couldn't help you more, sorry :/

#fef9ef

Rank 2: Process

Aug 10, 2023, 20:17

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

Drake

Aug 10, 2023, 20:18

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

XaFigg

Rank 3: Container

Aug 10, 2023, 20:18

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.

#fef9ef

Rank 2: Process

Aug 10, 2023, 20:23

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

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

Drake

Aug 10, 2023, 20:23

You should not use it client side

#fef9ef

Rank 2: Process

Aug 10, 2023, 20:29

noted

#fef9ef

Rank 2: Process

Aug 10, 2023, 20:44

@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

XaFigg

Rank 3: Container

Aug 10, 2023, 20:45

Oh, you're using the NodeJS SDK and not the Web SDK ^^

#fef9ef

Rank 2: Process