Mittchel
Mittchel
PostsComments
NNuxt
Created by bobleeswagger8468 on 1/19/2025 in #❓・help
How to disable @nuxtjs/color-mode
open source code and delete ll what you not need, you are programmer or lamer.
5 replies
NNuxt
Created by CARDAMON! on 1/19/2025 in #❓・help
useUpload not defined
grep -r useUpload in node_modules and/or nuxt project will show where it is 🙂
6 replies
NNuxt
Created by HardWare on 1/20/2025 in #❓・help
Handling multipart/form-data images on backend api
With multer work well, but I not have at the moment that project and not remember well how i setup it
21 replies
NNuxt
Created by HardWare on 1/20/2025 in #❓・help
Handling multipart/form-data images on backend api
And https://github.com/wobsoriano/h3-formidable
21 replies
NNuxt
Created by HardWare on 1/20/2025 in #❓・help
Handling multipart/form-data images on backend api
also exists 
export default eventHandler(async event => {
const form = await readMultipartFormData(event)
// do stuff
})
export default eventHandler(async event => {
const form = await readMultipartFormData(event)
// do stuff
})
https://github.com/nitrojs/nitro/issues/698
21 replies
NNuxt
Created by HardWare on 1/20/2025 in #❓・help
Handling multipart/form-data images on backend api
multer is based on https://github.com/mscdex/busboy
21 replies
NNuxt
Created by HardWare on 1/20/2025 in #❓・help
Handling multipart/form-data images on backend api
best example express+multer 🙂 https://github.com/nestjs/nest/tree/master/packages/platform-express/multer
21 replies
NNuxt
Created by Lean on 1/18/2025 in #❓・help
Proper way of handling image uploads
On server, h3 may be const files = await readMultipartFormData(event);
7 replies
NNuxt
Created by Lean on 1/18/2025 in #❓・help
Proper way of handling image uploads
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(…);
7 replies
NNuxt
Created by Lean on 1/18/2025 in #❓・help
Proper way of handling image uploads
FromData
7 replies
NNuxt
Created by developers_easternts on 1/6/2025 in #❓・help
Challenges in Implementing Server-Side Rendering (SSR) with Authentication and Refresh Token Logic
Custom fetch cmposable 
return useFetch(
    request, {
      baseURL: options?.baseURL ? options.baseURL : config.public.baseURL,
      onRequest() { // request, options
        // Set the request headers
      },
      onRequestError() { // request, options, error
        // Handle the request errors
      },
      onResponse({ response }) { // request, response, options
        // Process the response data
        return response._data;
      },
      onResponseError() { // request, response, options
        // Handle the response errors
      },
      ...options
    }
  );
}
return useFetch(
    request, {
      baseURL: options?.baseURL ? options.baseURL : config.public.baseURL,
      onRequest() { // request, options
        // Set the request headers
      },
      onRequestError() { // request, options, error
        // Handle the request errors
      },
      onResponse({ response }) { // request, response, options
        // Process the response data
        return response._data;
      },
      onResponseError() { // request, response, options
        // Handle the response errors
      },
      ...options
    }
  );
}
7 replies