0

I want to display a blob image, but i get this error :

enter image description here

here is my js part of the code :

const etat = $('#etat').html();
const photoDiv = $('.photoDiv');

if(etat === 'true'){
  const url = $('#url').text();
  console.log(url);

  const img = document.createElement("img");
  img.src = url;
  img.height = 200;
  img.width = 200;
  img.onload = () => {
    URL.revokeObjectURL(img.src);
  }
photoDiv.append(img);

}

url is the blob url that i get after processing some tasks in the backend with createObjectURL, this is why i used revokeObjectURL after

does anynone know where this error comes from ? also i'm using a blob url i didn't use an absolute local path for img.src like it can be said on other posts ...

Here is my backend code (deno) :

const uploadFiles = async(ctx:any)=>{

    const body = await ctx.request.body({type: 'form-data'});
    const product = await body.value.read({maxSize: 500000000 });
    if(!ctx.request.hasBody){
        ctx.response.status = 400;
        ctx.response.body ={
            success: false,
            msg: 'No data'
        }
    }else{
        try {
              
            const file =product.files[0].content;
            const blob = new Blob([file],{type: 'image/jpeg'});
            console.log('blob : ' + blob)
            const url = URL.createObjectURL(blob);
            console.log('url : ' + url);


            ctx.render('./fu.ejs',{upload:true, urlData: url}); 
            
        } catch (err) {
            ctx.response.status = 200;
            ctx.response.body = {
                success: false,
                msg: err.toString()
           }
        }finally{

        }
    }
}

export {uploadFiles};

console :

enter image description here

simply, in one hand i want to store an image in my database in a certain format and on the other hand i want to display this image on my webpage from this database, this is why i tried to bring the input file to my backend code

Kogami997
  • 33
  • 5
  • 1
    It's hard to know exactly what you're trying to accomplish without a [mre], but blob URLs created on the server are not valid for the client. Each JS context is separate, and the image data in memory which backs the blob URL on the server is not available to the client. You'll have to transmit the actual image data to the client in the response (not the blob URL). – jsejcksn May 30 '23 at 13:19
  • @jsejcksn , thanks for the response, this is what i saw during my research. And there is no way for the moment to retrieve a local path on a computer client from an input file. I'm gonna try to find an other method to do what i want, and post the result here, maybe you'll understand. simply, in one hand i want to store an image in my database in a certain format and on the other hand i want to display this image on my webpage from this database, this is why i tried to bring the input file to my backend code – Kogami997 May 30 '23 at 16:58

1 Answers1

0

For those who want to display/save files from input file on deno oak framework, you can simply use the upload middleware provided on github here :

https://github.com/hviana/Upload-middleware-for-Oak-Deno-framework

Caution : You'll have to read issues related on github for this middleware. mainly this issue :

https://github.com/hviana/Upload-middleware-for-Oak-Deno-framework/pull/17/commits/4015a64c9a9d0553f906c039d0d0758342e1b7de

where you have to modify a line in the middleware source code, and so, import all the source code in a ts file in your project folder and export the needed functions in your workflow.

it works well for me, and it's server side ! meaning you can have the real path of the file on your computer and i think on computer client.

But my original issue isn't resloved, because displaying the image on my page after transforming the returned Uint8Array to a blob in js result to a broken image icon ... 06/06/23 solved see below

JS - displaying blob image result to a broken image icon

Kogami997
  • 33
  • 5