[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
Yes, that's right, but what's the exact line of code you use to retrieve from this input?
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)
}
Oh you use VueJS lol
Try uploading directly with this line: event.target.files[0]
For my part, I use input like this:
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 ?
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
Oh, you're using the NodeJS SDK and not the Web SDK ^^
my bad, maybe i need to read more document about server vs client
[SOLVED] how to upload image or file to storage ?
