Discovering the method to retrieve files from the public folder via URL in next.js

I am working on a Next.js project where users have the ability to upload images. These images are stored in the public directory. Is there a way for me to access these files using a URL structure like mydomain.com/public/coverimg/image.jpg?

Below is my API code:

 import { rejects } from 'assert';
import { resolve } from 'path';
import { promises } from 'stream';

const fs = require('fs');
const moment = require('moment');
const formidable = require('formidable-serverless');
var slugify = require('slugify');
const path = require('path');
const crypto = require('crypto');

export const config = {
  api: {
    bodyParser: false,
  },
};

const handler = async (req, res) => {
  const timeStamp = moment().format('DD_MM_YYYY');

  const imageId = crypto.randomBytes(16).toString('hex');

  fs.mkdir(
    `./public/coverimg/${timeStamp}`,
    { recursive: true },
    function (err) {
      res.send(err);
    }
  );

  const data = await new Promise((resolve, rejects) => {
    const form = formidable({
      multple: false,
      uploadDir: `./public/coverimg/${timeStamp}`,
    });

    
    form.keepExtensions = true;
    form.keepFileName = true;
    form.maxFields = 1000;

    form.on('fileBegin', function (name, file) {
      file.path = path.join(
        `./public/coverimg/${timeStamp}`,
        imageId + '_' + slugify(file.name)
      );
    });

    // console.log(data);
    form.parse(req, (error, fields, files) => {
      if (error) return rejects(error);
      resolve(files);
    });
  });
};

export default handler;

Answer №1

To properly share a URL, use the following format:

{YOUR_WEBSITE}/{IMAGE_NAME}.{FILE_FORMAT}

For instance:

https://example.com/1676292852306cle2thet7000iv73y7xk39o2d.png

Please remember not to include /public/ in the shared URL.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular-ui typeahead feature allows users to search through a predefined

I recently developed a typeahead feature using the angular-ui library. Here is the current HTML for my typeahead: <input name="customers" id="customers" type="text" placeholder="enter a customer" ng-model="selectedCustomer" uib-typeahead="customer.fir ...

Identifying the conclusion of a folder being dropped in vanilla JavaScript

I am working on determining when a directory tree has been completely traversed after being dropped onto a page. My goal is to identify the point at which the next process can begin once the entire folder and its sub-directories have been processed by the ...

What is the best method to reset numerous select boxes within a form using jQuery?

What is the best way to reset multiple select boxes within a dynamically generated form using jQuery? There are several select boxes that may have selected options The select boxes are not known in advance as they are generated dynamically Some option ta ...

Click event doesn't trigger the 'else if' statement in jQuery

Having trouble with a button click issue. In the following code, when the button is clicked, it checks if the text on the button is "day". If so, it changes the background-color of the body to red and updates the button text to "night". I am struggling wit ...

Dropdown menu not populating with options in AngularJS ngOptions

It's puzzling to me why the dropdown menu is not being populated by ng-options. Despite JSON data being returned from the service and successfully logged in the controller, ng-options seems to be failing at its task. <tr class="info"> <td ...

Toggle the play/pause function by clicking - Trigger Ajax

I have a campaign that can be either played or paused. Currently, I have implemented the pause feature using AJAX and now I need to add the play feature as well. When I click on the pause button, I want it to be replaced with the play button. This is the ...

Exploring portfinder in Javascript: A guide to its usage

As a newcomer to Javascript, I am eager to figure out how to utilize the portfinder.getPort() function within one of my functions in order to generate a random port each time. The code snippet below showcases my current implementation: var portfinder = re ...

The icon is not being displayed when the onHover event on the Material UI component is triggered

I am currently working on adding a delete icon to a Material UI MenuItem component. I've created a state field within the component's state called isHovering, which is initially set to false. The goal is to display the delete icon when hovering o ...

The Integration of Google Books API with Ajax Technology

When a user enters an ISBN number in the search box, it triggers a display of information from the Google Books API within a div. This information is fetched from a JSON file in the standard format and includes details like title, subtitle, author, and des ...

Disable the default controls on the Open Layers Bing Map

I am currently working on an App that utilizes Geolocation with Open Layers to load a Bing Map Layer. My goal is to enable touch-based zooming and remove the default zoom buttons. Additionally, I would like to relocate the 'i' button to prevent a ...

Ways to leverage the power of Reactivity APIs in Vue.js

In my Vue application, I am trying to create a Drop Down Menu by using a variable called "showDropDown". The idea is to use a v-if directive to check if the value of showDropDown is true, and then display the menu accordingly. Additionally, I want to imp ...

Verifying that the code runs only once the changes to a monitored property have been successfully implemented in the user interface

When working with AngularJS, how can one ensure that code is executed only after a change to a watched property has fully taken effect in the UI? For instance, imagine that the visibility of a loading indicator is tied to the value of an isLoading propert ...

Adding data to a subdocument array with Mongoose's $push method

Here is the model that I am working with: var Customer = mongoose.model('Customer', { firstname : String, lastname : String, phone : String, street : String, city : String, state : String, zip : String, fixed : Bo ...

Inability to load a MySQL table using Ajax on the same webpage

I'm facing an issue where I want to load a table from mySql on the same page without getting redirected to another page. The user selects a date range, and upon pressing submit, it should appear in the designated div id tag. However, the functionality ...

Connection to mongo is currently unavailable for Middleware next

This code snippet shows a middleware for Next, which is designed to read the subdomain and check if it exists in the database. import { getValidSubdomain } from '@/lib/getValidSubdomain'; import { NextResponse } from 'next/server' impor ...

I have a query regarding the load function and JSON

Is it feasible to achieve something similar to this? $.ajax({ url: "test.php", success: function(json, json1){ //I wonder if I can have more than one parameter here? $m0 = []; $m0.push(parseFloat(json)); alert($m0); //display 750 $m1 ...

Tips for fixing the error "TypeError: useOptimistic is only functional in Client Components" when using the use client directive in Next.js

After following the error message's suggestion and adding the "use client" directive at the top of my file, I'm still running into an issue while trying to utilize the useOptimistic hook in my Next.js page. The error message reads as follows: Typ ...

Tips for transmitting a batch of resources with Restangular?

Suppose I need to make a DELETE request to delete multiple products from the resource /products. The complete request should be sent to this URI: /products/ids=1&ids=2&ids=3 What is the method to send a request like this using Restangular? The c ...

Enhance your Rails application by dynamically updating table cells with Ajax, eliminating the need for

In my index.html.erb file, I have set up one form and one table. Using Ajax allows me to submit the form without any redirects. <%= form_for approval, remote: true do |f| %> <%= f.check_box :pass %> <%= f.submit%> <% end %> My ...

Array vs Single Object - Comparing AngularJS / Javascript Data Structures (Basic)

My array is very basic [ { ticketId: 1, name: "John", }, { ticketId: 124, name: "Ads" } ] I have displayed the data in a dropdown menu <ul class="dropdown-menu"> <li ng-repeat="ticket in tickets"> <a h ...