Mqx•13mo ago

How to uploading images from frontend to Deno.serve()

Hey, can someone please give me a vanilla code example on how to upload files from my frontend application to the server that uses Deno.serve(). I know how to upload the image in the frontend and send it to the Deno backend using a POST request, but how can I work with this image on the server side? Currently my backend is set up without any framework. Thanks!

6 Replies

MqxOP•13mo ago

This is currently my code:

import { readAll } from "https://deno.land/std@0.104.0/io/util.ts";

const pictures_folder = Deno.env.get("DENO_PICTURES_FOLDER") || "src/public/src/img";

export async function uploadGinPicture(req: Request) {

    if (!req.body) {
        return new Response(null, { status: 400 });
    }
    const fileName = "0";

    const body = await readAll(req.body);

    await Deno.writeFile(`${pictures_folder}/${fileName}.png`, body);

    return new Response(JSON.stringify({ worked: true }), { status: 200 });
}

import { readAll } from "https://deno.land/std@0.104.0/io/util.ts";

const pictures_folder = Deno.env.get("DENO_PICTURES_FOLDER") || "src/public/src/img";

export async function uploadGinPicture(req: Request) {

    if (!req.body) {
        return new Response(null, { status: 400 });
    }
    const fileName = "0";

    const body = await readAll(req.body);

    await Deno.writeFile(`${pictures_folder}/${fileName}.png`, body);

    return new Response(JSON.stringify({ worked: true }), { status: 200 });
}

@Deno AI Helper

Deno AI Helper•13mo ago

Sure, I'd be happy to help. Could you please provide me with the question you'd like me to answer?

Helpful Links: Showcase | Fresh How to Build a CRUD API with Oak and Deno KV Build an Edge Function for the Supabase Hackathon Deno 1.17 Release Notes

MqxOP•13mo ago

Hey, can you please give me a vanilla code example on how to upload files from my frontend application to the server that uses Deno.serve(). I know how to upload the image in the frontend and send it to the Deno backend using a POST request, but how can I work with this image on the server side? Currently my backend is set up without any framework. Thanks!

Deno AI Helper•13mo ago

Sure, I can help with that. On the server side, you can use the fetch API to receive the uploaded file. The fetch API is part of the global scope in Deno, and it's compatible with the fetch API in the browser. When you receive a fetch event, you can call event.request.formData() to parse the incoming form data. This will return a FormData object, which you can use to access the uploaded files. Here's a basic example of how you can do this:

addEventListener("fetch", async (event) => {
  if (event.request.method === "POST") {
    const formData = await event.request.formData();
    const imageFile = formData.get("image");
    if (imageFile instanceof File) {
      console.log(`Received image with name ${imageFile.name}`);
      // You can read the file content as follows:
      const content = await imageFile.arrayBuffer();
      // Now you can work with the content, for example save it to a file:
      await Deno.writeFile(`./${imageFile.name}`, new Uint8Array(content));
    }
  }
  event.respondWith(new Response("ok"));
});

addEventListener("fetch", async (event) => {
  if (event.request.method === "POST") {
    const formData = await event.request.formData();
    const imageFile = formData.get("image");
    if (imageFile instanceof File) {
      console.log(`Received image with name ${imageFile.name}`);
      // You can read the file content as follows:
      const content = await imageFile.arrayBuffer();
      // Now you can work with the content, for example save it to a file:
      await Deno.writeFile(`./${imageFile.name}`, new Uint8Array(content));
    }
  }
  event.respondWith(new Response("ok"));
});

In this example, we're listening for fetch events. When we receive a POST request, we parse the form data and get the uploaded file. We then log the file name and read the file content. Finally, we write the file content to a new file in the current directory. Please note that you'll need to run your script with the --unstable and --allow-read flags because the FormData API and the Deno.writeFile API are currently unstable and require read access respectively. Also, please replace "image" with the actual field name you're using to upload the file in your frontend application. I hope this helps! Let me know if you have any other questions. 🦕

Helpful Links: Deno Deploy Beta 2 Express | Manual | Deno File Server | Manual | Deno HTTP Server: Serving Files - Deno by Example

Leokuma•13mo ago

I'm not sure what exactly you mean by "work with this image", but you can manipulate it as a blob:

const imgBlob = await request.blob();

const imgBlob = await request.blob();

You could also manipulate it as a Uint8Array

MqxOP•13mo ago

Okay thanks 👍🏻 I don’t want to manipulate it. I just want to save the image on the server side as a for example png file