Not allowed to load local resource from blob - Display and save uploaded files in Deno Oak

Question

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

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 :

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

Answer 1

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