N
Nuxt•6d ago
Lean

Proper way of handling image uploads

What would be a good way of uploading images directly to the /public/images folder ? I currently have set up a cropper component that allows me to crop an image before saving it, and after saving it, it returns a base64 encoded image. Im kind of lost on how to save it to the public folder part though
3 Replies
kapa.ai
kapa.ai•6d ago
Hi @Lean. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I apologize, but I don't have enough information in the provided knowledge sources to give a complete answer about uploading images directly to the /public/images folder in Nuxt. The knowledge sources don't contain specific details about image upload processes or handling base64 encoded images. However, I can provide some general information about how Nuxt handles assets and the public directory: According to the Nuxt documentation on assets, the public/ directory is used for static assets that are served at the server root. Files in this directory are accessible directly via the root URL of your application. For example, if you have an image in public/img/nuxt.png, you can reference it in your application like this: 
<template>
  <img src="/img/nuxt.png" alt="Discover Nuxt 3" />
</template>
<template>
  <img src="/img/nuxt.png" alt="Discover Nuxt 3" />
</template>
However, the documentation doesn't provide information on programmatically saving files to the public directory during runtime. This is likely because Nuxt is primarily focused on static file serving and build-time asset processing, rather than runtime file uploads. For handling file uploads, especially with features like image cropping and base64 encoding, you might need to look into server-side solutions or external services that can handle file uploads and then serve the files statically through Nuxt. If you need more specific guidance on implementing image uploads in Nuxt, I recommend consulting the official Nuxt documentation or community resources for up-to-date and detailed information on best practices for file uploads and management. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•6d ago
<@401116245857927199> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Mittchel
Mittchel•6d ago
FromData See stackowerflow examples 
 var imgBase64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCA..." //your bse64 image

onSubmit(){
const file = DataURIToBlob(imgBase64)
const formData = new FormData();
formData.append('upload', file, 'image.jpg') 
formData.append('profile_id', this.profile_id) //other param
formData.append('path', 'temp/') //other param
}

    function DataURIToBlob(dataURI: string) {
        const splitDataURI = dataURI.split(',')
        const byteString = splitDataURI[0].indexOf('base64') >= 0 ? atob(splitDataURI[1]) : decodeURI(splitDataURI[1])
        const mimeString = splitDataURI[0].split(':')[1].split(';')[0]

        const ia = new Uint8Array(byteString.length)
        for (let i = 0; i < byteString.length; i++)
            ia[i] = byteString.charCodeAt(i)

        return new Blob([ia], { type: mimeString })
      }
 var imgBase64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCA..." //your bse64 image

onSubmit(){
const file = DataURIToBlob(imgBase64)
const formData = new FormData();
formData.append('upload', file, 'image.jpg') 
formData.append('profile_id', this.profile_id) //other param
formData.append('path', 'temp/') //other param
}

    function DataURIToBlob(dataURI: string) {
        const splitDataURI = dataURI.split(',')
        const byteString = splitDataURI[0].indexOf('base64') >= 0 ? atob(splitDataURI[1]) : decodeURI(splitDataURI[1])
        const mimeString = splitDataURI[0].split(':')[1].split(';')[0]

        const ia = new Uint8Array(byteString.length)
        for (let i = 0; i < byteString.length; i++)
            ia[i] = byteString.charCodeAt(i)

        return new Blob([ia], { type: mimeString })
      }
or may be 
data.append("image_data", image);
data.append("image_data", image);
after sed it wth fetch/$fetch 
const formData = new FormData();
Object.keys(fields).forEach((field) => {
        formData.append(field, fields[field]);
});

formData.append('file', new Blob([JSON.stringify(content)], { type: 'application/json' }));

//Investigate in the future why $fetch doesn't work!!!
const response = await $fetch(url, {
            method: 'POST',
            body: formData
 });
const formData = new FormData();
Object.keys(fields).forEach((field) => {
        formData.append(field, fields[field]);
});

formData.append('file', new Blob([JSON.stringify(content)], { type: 'application/json' }));

//Investigate in the future why $fetch doesn't work!!!
const response = await $fetch(url, {
            method: 'POST',
            body: formData
 });
const data = new URLSearchParams();
for (const pair of new FormData(formElement)) {
    data.append(pair[0], pair[1]);
}

fetch(url, {
    method: 'post',
    body: data,
})
.then(…);
const data = new URLSearchParams();
for (const pair of new FormData(formElement)) {
    data.append(pair[0], pair[1]);
}

fetch(url, {
    method: 'post',
    body: data,
})
.then(…);
On server, h3 may be const files = await readMultipartFormData(event);

Did you find this page helpful?