Problem in serving files after uploading them

[ghost]

Hi, i am saving uploaded files using adonis drive and they are uploaded to the destination folder successfully but i cannot serve them again although the visibility in drive.ts is set to public.

I have 2 folders, one called public/ fore serving assets and one called uploads/ for storing and serving uploaded files. also i save the payload.image.filePath in the database after uploading.

when i try to read the a file via the url in the browser:

http://127.0.0.1:3000/uploads/products/images/ckus1ookl0002e7lb5jub3ybt.jpg

i get an error File not found

.adonisrc.json

{
  "typescript": true,
  "commands": [
    "./commands",
    "@adonisjs/core/build/commands/index.js",
    "@adonisjs/repl/build/commands",
    "@adonisjs/lucid/build/commands"
  ],
  "exceptionHandlerNamespace": "App/Exceptions/Handler",
  "aliases": {
    "App": "app",
    "Config": "config",
    "Database": "database",
    "Contracts": "contracts"
  },
  "preloads": ["./start/routes", "./start/kernel"],
  "providers": ["./providers/AppProvider", "@adonisjs/core", "@adonisjs/lucid"],
  "aceProviders": ["@adonisjs/repl"],

  "directories": {
    "public": "public"
  },

  "metaFiles": [
    {
      "pattern": "public/**",
      "reloadServer": false
    }
  ]
}

drive.ts

import Env from "@ioc:Adonis/Core/Env";
import { DriveConfig } from "@ioc:Adonis/Core/Drive";

const driveConfig: DriveConfig = {
  disk: Env.get("DRIVE_DISK"),

  disks: {
    local: {
      driver: "local",
      visibility: "public",
      root: "uploads",
      serveFiles: true,
      basePath: "/uploads",
    },
  },
};

export default driveConfig;

ProductsController.ts

import { HttpContextContract } from "@ioc:Adonis/Core/HttpContext";
import Database from "@ioc:Adonis/Lucid/Database";
import Drive from "@ioc:Adonis/Core/Drive";
import ProductValidator from "App/Validators/ProductValidator";

import moment from "moment";
import fs from "fs";

const placeholderImagePath = "images/image-not-available-min.jpg";
const uploadedDirPath = "./products/images/";
const placeholderImageName = "image-not-available-min.jpg";

export default class ProductsController {
  
  public async store(ctx: HttpContextContract) {
    const payload = await ctx.request.validate(ProductValidator);
    payload.image ? await payload.image.moveToDisk(uploadedDirPath) : null;

    const isExist = await Drive.exists(
      "products/images/ckus1ookl0002e7lb5jub3ybt.jpg"
    );
    const url = await Drive.getSignedUrl(
      "products/images/ckus1ookl0002e7lb5jub3ybt.jpg"
    );

    console.log(isExist, url);

    const productId = await Database.table("products")
      .insert({
        imagePath: payload.image
          ? payload.image.filePath
          : placeholderImagePath,

        imageSize: payload.image
          ? payload.image.size
          : fs.statSync("./public/" + placeholderImagePath).size,

        imageOriginalName: payload.image
          ? payload.image.clientName
          : placeholderImageName,

        imageName: payload.image
          ? payload.image.fileName
          : placeholderImageName,

        imageExtention: payload.image
          ? payload.image.extname
          : placeholderImageName.substr(placeholderImageName.indexOf(".") + 1),

        name: payload.name,
        price: payload.price,
        productDetails: payload.productDetails,
        suggestedUse: payload.suggestedUse,
        priceDetails: payload.priceDetails,
        creationTime: moment().format("LTS"),
        creationDate: moment().format("D/M/Y"),
      })
      .returning("id");

    ctx.response.json({ message: "Product stored", productId: productId });
  }

  public async update(ctx: HttpContextContract) {
    const id = ctx.request.param("id");
    const product = await Database.from("products").where("id", id);
    const payload = await ctx.request.validate(ProductValidator);

    if (product.length === 1) {
      payload.image
        ? await payload.image.moveToDisk("./products/images")
        : null;

      const updatedRowsCount = await Database.from("products")
        .where("id", id)
        .update({
          imagePath: payload.image
            ? payload.image.filePath
            : placeholderImagePath,

          imageSize: payload.image
            ? payload.image.size
            : fs.statSync("./public/" + placeholderImagePath).size,

          imageOriginalName: payload.image
            ? payload.image.clientName
            : placeholderImageName,

          imageName: payload.image
            ? payload.image.fileName
            : placeholderImageName,

          imageExtention: payload.image
            ? payload.image.extname
            : placeholderImageName.substr(
                placeholderImageName.indexOf(".") + 1
              ),

          name: payload.name,
          price: payload.price,
          productDetails: payload.productDetails,
          suggestedUse: payload.suggestedUse,
          priceDetails: payload.priceDetails,
          updateTime: moment().format("LTS"),
          updateDate: moment().format("D/M/Y"),
        });

      fs.unlink(product[0].imagePath, (error) => {
        if (error) console.log(error);
        else {
          console.log("File " + product[0].imagePath + " deleted");
        }
      });

      ctx.response.json({
        message: "Product updated",
        updatedRowsCount: updatedRowsCount,
      });
    } else {
      ctx.response.json({
        message: "Failed to update product",
      });
    }

  }
}

[RomainLanz]

Hey @FuridamuFaita! 👋🏻

You need to use the getUrl method.
Also, have a look at attachment-lite.

[ghost]

Hey @FuridamuFaita! 👋🏻

You need to use the getUrl method. Also, have a look at attachment-lite.

i tried to use getUrl but in vain.

public async show(ctx: HttpContextContract) {
    const id = ctx.request.param("id");
    const product = await Database.from("products").where("id", id);

    if (product.length === 0) {
      ctx.response.json({ message: "Product Not found" });
    } else {
      console.log("Path from database:", product[0].imagePath);
      console.log(
        "Path created by geturl() from the path stored in the databse:",
        await Drive.getUrl(product[0].imagePath)
      );
      console.log(
        "Path created by geturl() from the file path inside the uploads folder:",
        await Drive.getUrl("products/images/ckus9bxol0002q7lbd3jng93m.jpg")
      );
      console.log(
        "Check if the file exists:",
        await Drive.exists("products/images/ckus9bxol0002q7lbd3jng93m.jpg")
      );

      ctx.response.json({ message: "Product found", product: product[0] });
    }
  }

Output:

Path from database: uploads/products/images/ckus9bxol0002q7lbd3jng93m.jpg
Path created by geturl() from the path stored in the databse: /uploads/uploads/products/images/ckus9bxol0002q7lbd3jng93m.jpg
Path created by geturl() from the file path inside the uploads folder: /uploads/products/images/ckus9bxol0002q7lbd3jng93m.jpg
Check if the file exists: true

None of them worked:
http://127.0.0.1:3000/uploads/products/images/ckus9bxol0002q7lbd3jng93m.jpg

[shelzTimesignature]

yes it didnt work because you used the wrong path. from what i can see nothing was wrong with your configuration file either. if your root path is upload inside the public path then your correct path will be http://localhost:3333/uploads/ckus9bxol0002q7lbd3jng93m.jpg

[ghost]

The problem was in the config/drive.ts file in root: "uploads"

It is supposed to be root: Application.makePath("uploads"), or root: Application.tmpPath("uploads"),

[HelioV]

you saved my project, expecificly my TCC.
thanks bro!!

[HelioV]

Now to work you can configure in root .root: Application.makePath("public/uploads"),

[Uttam-EWW]

Is there way to display 404 instead of File not found ?