Upload a file using React and Express - reactjs

i want to upload a zip file from a client to my server. On my client side i have adapt the code from this site. In my express server i notice that my request is
req.files: { file:
{ fieldName: 'file',
originalFilename: 'myZIP.zip',
path: '/tmp/myPath',
headers:
{ .....},
size: 11757,
name: 'myZIP.zip',
type: 'application/zip' } }
Is there any way to upload my file without give the path of the file /tmp/... ? Or this is the only way that uploads works in general?

Related

How can i add images from webpage in NextJs?

Im trying to add logo of coloplast in my project URL(https://www.coloplast.com/Global/1_Corporate_website/Press/Pics/CPlogo_Gray_RGB_300.png).
**And i always got this error **
Server Error
Error: Invalid src prop (https://www.coloplast.com/Global/1_Corporate_website/Press/Pics/CPlogo_Gray_RGB_300.png) on next/image, hostname "www.coloplast.com" is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
I tryed diferents website such as google images, and stil doesn't work...
protocol: 'https',
hostname: 'www.coloplast.com',
port: '',
pathname: '/account123/**',
images: {
domains: ["www.coloplast.com"] and ["coloplast.com"]
}
And after each method i restarted my project from console.
Based on NextJS official docs about next/image remote pattern, "To protect your application from malicious users, configuration is required in order to use external images. This ensures that only external images from your account can be served from the Next.js Image Optimization API."
So in your case, you have to add this code between curly braces of your nextConfig variable in next.config.js file:
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'www.coloplast.com',
},
],
},

Changing extension changes the mimetype in multer

I was following a youtube tutorial on file upload using multer. From the video, changing the extension doesn't change the file's mimetype. Only that upon replicating the process, the original file was a json file with the following information,
{
fieldname: 'images',
originalname: 'budg.ods',
encoding: '7bit',
mimetype: 'application/vnd.oasis.opendocument.spreadsheet',
destination: './uploads',
filename: '597077caac33d200e499f1b1fed1b7d7',
path: 'uploads/597077caac33d200e499f1b1fed1b7d7',
size: 12213
}
On changing the extension of the same file, I got the following
{
originalname: 'budg.png',
encoding: '7bit',
mimetype: 'image/png',
filename: 'c05f55e6168dd1a22cfd1fa29e69ed1c',
size: 12213,
...
}
Is the video's implementation the right way of checking a file's mimetype, regardless of the extension, and if not, what's a better alternative?

Is it possible to rewrite the route of a static .txt file in Next.js

I have a Next.js application which has a robots-staging.txt file in the root of the public folder. I'm looking to add this to the rewrites function in next.config. This is what I have
async rewrites() {
const rewriteList = [
{
source: '/robots-staging.txt',
destination: '/robots.txt',
},
];
return rewriteList;
},
My initial expectation was that when I hit localhost:3000/robots.txt this would serve the staging file, however it's not working. Am I missing something?
If I understood correctly that you want to proxy /robots.txt to /robots-staging.txt, you need to make the latter the destination and not the source.
Besides that, I've experienced the same issue, and I'm not sure if this is a bug or a feature, but I found that using absolute paths/URLs works as a workaround as relative paths seem to be interpreted as pages:
async rewrites() {
{
source: "/robots.txt",
destination:
process.env.NODE_ENV === "development"
? "http://localhost:3000/robots-staging.txt"
: "https://YOUR_URL/robots-staging.txt",
},
];
},

Nextjs API works in local environment but not in production environment

[SOLVED]
I have created a dynamic API route in NextJS that, if given a filename, the server will read the file (.md or .txt file) under the content directory, convert it into string and returns it. The API works as intended in local environment, however, the deployed website in Vercel doesn't work properly for this API route.
That API route, for a file that exists in the content directory, returns 500 internal server error.
The console error is:
Failed to load resource: the server responded with a status of 500 ()
Checking the vercel logs for the route, showed this:
ERROR Error: ENOENT: no such file or directory, open 'content/phase1_section1.md'
I think the path.join() is not working for me. It is not adding the actual domain name of the app in front of the content part. How can I resolve this?
And, here's the code
import { readFileSync } from 'fs';
import path from "path";
export default function courseHandler({ query: { slug } }, res) {
const fullPath = path.join('./content/', slug);
const content = readFileSync(fullPath, 'utf8');
if (content) {
res.status(200).json({
content: content
});
} else {
res.status(404).json({ message: `Course with slug: ${slug} not found.` })
}
}
The problem is actually solved.
I just replaced this
path.join('./content/', slug);
with this
path.join(process.cwd(), 'content', slug);
Check logs on Vercel
Configure yours .env variables on Vercel for each environment
Check your local .env files. if you hardcoded your .env variables - this will cause a negative impact.

file upload in react.js using apollo client

i was trying to upload file to my apollo server but i can't upload any file and it does not throw any error but i receive only empty object in resolver and it works find when i use GraphQL Client like Altair
output in server when using Altair Client
{
filename: 'Copy of Massive Orange Summer Sale Animated-300x250px-MediumRectangle.png',
mimetype: 'image/png',
encoding: '7bit',
createReadStream: [Function: createReadStream]
}
output in server when using #apollo/client package
{}
client code
server code
Uploads are not supported in Apollo Client by default. If you want to enable them, you need to use createUploadLink from apollo-upload-client as shown here.
import { createUploadLink } from 'apollo-upload-client';
const client = new ApolloClient({
cache: new InMemoryCache(),
link: createUploadLink(),
});

Resources