Update
This is happening because of hot-reloading comes with Creact React App.
Related issues:
https://github.com/expressjs/multer/issues/566
https://github.com/facebook/create-react-app/issues/4095
I am trying to learn file upload with Nodejs, Express, Multer and React for frontend. I achieved to upload files. There is a problem I struggle, not always but most of the time the whole app refreshes after upload. Here is the relevant code.
My simple form
<form onSubmit={this.handleFormSubmit}>
<input
type="file"
id="file"
onChange={this.handleFileChange}
/>
<button type="submit">Submit</button>
</form>
handleFileChange and handleFormSubmit
handleFormSubmit = () => {
const formData = new FormData();
formData.append( "file", this.state.file );
axios.post( "/api/upload", formData );
}
handleFileChange = ( e ) => {
this.setState( { file: e.target.files[ 0 ] } );
}
Related express route code
const express = require( "express" );
const multer = require( "multer" );
const storage = multer.diskStorage( {
destination( req, file, cb ) {
cb( null, "client/public/images" );
},
filename( req, file, cb ) {
cb( null, `${ Date.now() }-${ file.originalname }` );
},
} );
const upload = multer( { storage } );
router.post( "/upload", upload.single( "file" ), ( req, res ) => {
res.send();
} );
I searched a little bit but not luck. I've seen this post. Before seeing this I had already tried event.preventDefault(). Also, I've tried many things like uploading directly with onChange() without setting a state then handling it with onSubmit(). Before simplifying the code (like posting directly in handleFormSubmit) I was trying to do this via Redux actions but for debugging purposes I moved it here.
It is the first example here.
handleFormSubmit = async (e) => {
e.preventDefault() // <-- missing this
const formData = new FormData();
formData.append( "file", this.state.file );
const response = await axios.post( "/api/upload", formData );
}
handleFileChange = ( e ) => {
this.setState( { file: e.target.files[ 0 ] } );
}
This is happening because of hot-reloading comes with Creact React App.
I ran into this issue too, but using plain webpack without CRA. I was uploading the files to a static dir served by webpack-dev-server. I fixed it by setting devServer.static.watch to false (webpack docs).
your are using
<button type="submit">Submit</button>
this is why refreshing
so do it like this
<button onClick={this.handleFormSubmit}>Submit</button>
remove this from multer
destination( req, file, cb ) {
cb( null, "client/public/images" );
},
Related
In my backend I want to send the data in this code express.js
const Joi = require('joi')
const people = [
{id:1,username:"Youw"},
{id:2,username:"thuneer"}
]
app.get('/send',(req,res) => {
res.json({data:people})
})
app.post('/send',(req,res) => {
const {error} = validateCourse(req.body)
if (error) {
return res.status(400).json({data:"Username length should be atleast 5"})
}
res.status(200).json({data:people})
})
function validateCourse(params) {
const schema = Joi.object({
username:Joi.string().min(5).required(),
})
return schema.validate(params)
}
So here I know you guys understand it since this is the basic. The username supposed to be atleast 5 and then if not then error will be the data..but How I will show this in frontend? My friend suggested this code to me but I don't know how I will implemented or arrange this
const temp = await fetch("http://localhost:3939/send", { method: "POST", body: JSON.stringify(data) })
const res = await temp.json();
const data = JSON.parse(data);
if (res.errors) {
// handle errors here
if (res.errors.username) {
const usernameError = document.getElementById('username_error');
usernameError.innerText = res.errors.username;
}
}
<form action="/send" method="POST">
<input type="text" name="username" id="user" class="user-text">
<button type="submit">submit</button>
</form>
<div id="username_error"></div>
I don't wanna write this in ajax cause I will write sooner in my reactjs so I want the code to be more general so that I can write it in ReactJS.
this is my first post. Thank you all for the years, of assistance btw, I hope to pour in, as much as I've gotten from you guys/gals. Let's get started.
I have a Next.js / React-Redux application and here is my problem:
I'm attempting to update the Redux store, with JSON, that is returned from `fs.readFile' (the 'fs/promises' module:
//Product.js
function Product() {
const suggested_products = useSelector((state) => state.user.suggested_products) // json read from /api/products
const updateProducts = () => {
(JSON.parse(JSON.stringify(suggested_products)))?.map((product) => { // Compliler does not like this line
<div>
<input type='checkbox'>
<p> {product.category}</p>
<p>{product.service_name}</p>
</input
</div>
})
}
return (
if (userSelectedProduct) ? updateProducts() : <p>No data found</p>
}
//Form.js
import { useSWR } from 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json());
function Form() {
const [url, setURL] = useState('');
const { data, error } = useSWR(url, fetcher);
<input
value={product}
onChange={
dispatch(updateCustomerCSP((JSON.parse(JSON.stringify(e.target.value)))));
setURL(`api/${product}/`); //Attempt to dynamically fetch data, from client side
dispatch(updateSuggestedProducts(data)); //Update data in store returned from client side fetching
}}
</input>
}
// pages/api/products
import fs from 'fs/promises';
export default function handler(req, res) {
const filePath = path.join(process.cwd(),`/data.js'); // /data.js contains JSON array [{"product-1": "value"}, {"product-2": "value"}], which is why I need to use map function.
try {
const fileData = fs.readFile(filePath);
const data = JSON.parse(JSON.stringify(fileData));
res.status(200).json(data);
} catch (err)
{
res.status(500).json({ error: 'Failed to load data' })
}
}
// This error throws ref.map is not a function from the Products.js component.
Here is the only info that I could find in regards to ref's in React.
Also, the JSON.parse and JSON.stringify wrappers, are to keep Redux happy with object going into the store. Thanks for reading community, looking forward to your input. Should any oneed more info, please let me know. Also, here is info in regards to refs, that I could find:
https://reactjs.org/docs/refs-and-the-dom.html
I figured it out. I actually had the input wrapped in a HOC, and the event handler wasn't properly registered to the input element itself., therefore failing to load in the array object into the store to use.
So be careful of that, when building your own components.
For instance,
function Component() {
function loadArrayInStore() {
loadInStore()
}
const MyButton = (props) => {
<input onChange={props.handler} // I had an inline handler here such as onChange={ (e)= { doNotLoadArrayInStoreAndDontWork()}
}
return (
<MyButton handler={loadArrayInStore} />
)
}
So be watchful, when creating HOC's :)
I need to reload a remote JSON every 30 seconds. I currently do it this way in reactJS but since moving to NextJS it does not work
The issue is that the following work fine in my current ReactJS website but as soon as I Moved it to NextJS it printing our errors everywhere.
Mainly with the following
fetchTimeout
sessionStorage
export default function MediaControlCard(props) {
const fetchTimeout = (url, ms, { signal, ...options } = {}) => {
const controller = new AbortController();
const promise = fetch(url, { signal: controller.signal, ...options });
if (signal) signal.addEventListener("abort", () => controller.abort());
const timeout = setTimeout(() => controller.abort(), ms);
return promise.finally(() => clearTimeout(timeout));
};
const controller = new AbortController();
const podcast = props.podcast;
const classes = useStyles();
var token = uuidv4();
// alert(sessionStorage['uuid']);
if(!sessionStorage['uuid']){
sessionStorage.setItem("uuid",token);
}
if(!sessionStorage['station']){
sessionStorage.setItem("station","DRN1");
}
if(!sessionStorage['live']){
sessionStorage.setItem("live",true);
}
var icyStream = "https://api.drn1.com.au:9000/station/"+sessionStorage.station+"?uuid="+sessionStorage['uuid'];
var streamurl = icyStream;//window.com_adswizz_synchro_decorateUrl(icyStream);
React.useEffect(() => {
nowplaying();
document.getElementById("player").muted = false;
});
if(podcast){
alert('test');
}
/*if(!sessionStorage.getItem("station")){
sessionStorage.setItem("station","DRN1");
}*/
function nowplaying(){
// alert("hello");
if(sessionStorage.live === true){
document.getElementById("podcast-only").style.display='none';
}
fetchTimeout(`https://api.drn1.com.au:9000/nowplaying/`+sessionStorage.station+`?uuid=`+sessionStorage['uuid'], 3000, { signal: controller.signal })
.then(res => res.json())
.then(
(result) => {
//console.log("testing player"+result.data);
if(sessionStorage.getItem("live") === 'true'){
switch(result.data[0].track.songtype)
{
case "A":
AdSystem(result.data[0]);
break;
case "S":
Song(result.data[0]);
document.getElementById("Now_Playing_Artist").innerHTML = result.data[0].track.artist;
document.getElementById("Now_Playing_Title").innerHTML = result.data[0].track.title;
document.getElementById("Now_Playing_Cover").style.backgroundImage = "url('"+result.data[0].track.imageurl+"')";
break;
default:
Song(result.data[0]);
document.getElementById("Now_Playing_Artist").innerHTML = result.data[0].track.artist;
document.getElementById("Now_Playing_Title").innerHTML = result.data[0].track.title;
document.getElementById("Now_Playing_Cover").style.backgroundImage = "url('"+result.data[0].track.imageurl+"')";
break;
}
fetch(`https://itunes.apple.com/search?term=${result.data[0].track[0].artist}+${result.data[0].track[0].title}&limit=1`)
.then(res => res.json())
.then(
(result) => {
if(result.results[0]){
document.getElementById("buylink").href = result.results[0].collectionViewUrl;
document.getElementById("buynow").style.display = "block";
}
else
{
document.getElementById("buynow").style.display = "none";
}
})
}
})
.then(console.log)
.catch(error => {
console.error(error);
if (error.name === "AbortError") {
// fetch aborted either due to timeout or due to user clicking the cancel button
} else {
// network error or json parsing error
}
});
setTimeout(function(){nowplaying()}, 10000);
}
return (<>
<Card id="nowplayinginfo_card" className={classes.card}>
<CardMedia
id="Now_Playing_Cover"
className={classes.cover}
image="//tvos.adstichr.com/client/resources/images/stations/Indie/DRN1-Logo.png"
title="Live from space album cover"
/>
<div className={classes.details} id="adstichrNP">
<CardContent className={classes.content} id="song">
<Typography variant="subtitle1">
Now Playing
</Typography>
<Typography id="Now_Playing_Title" component="h6" variant="h6">
{props.artist}
</Typography>
<Typography id="Now_Playing_Artist" variant="subtitle1" color="textSecondary">
{props.song}
</Typography>
</CardContent>
<div id="buynow" className={classes.buynow}>
<a id="buylink" target="_blank" href="#Blank"><img alt="buynow" src="https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/music-lrg-1c05919c6feae5d4731d4399cd656cd72e1fadc4b86d4bd7dc93cb8f3227cb40.svg"/></a>
</div>
<div id="podcast-only" className={classes.controls}>
<audio id="player" className={classes.player} controls controlsList="nodownload" autoPlay muted>
<source src={streamurl}
type="audio/mpeg"
/>
</audio>
</div>
</div>
</Card>
<Card className={classes.card} id="adbanner">
<CardContent className={classes.content} id="adstichr">
</CardContent>
</Card>
</>
)
}
How do I ac achieve this with NextJS. I thought anything I put into component with nextjs would just work the same as ReactJS - clearly not.
NextJS has server-side rendering features for your concern. I believe that you should use getStaticProps there is a special property in it called revalidate it will allow you to make requests on every timeout you wish to use. I took an example from official documentation of latest nextjs(version 11.0)
Docs: https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation
function Blog({ posts }) {
return (
<ul>
{posts.map((post) => (
<li>{post.title}</li>
))}
</ul>
)
}
// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation is enabled and a new request comes in
export async function getStaticProps() {
const res = await fetch('https://.../posts')
const posts = await res.json()
return {
props: {
posts,
},
// Next.js will attempt to re-generate the page:
// - When a request comes in
// - At most once every 10 seconds
revalidate: 10, // In seconds
}
}
export default Blog
You are not showing the errors but I suspect it is related to the server-side rendering feature of next.js.
document is defined only on the browser and since useEffect gets executed only on the browser you are calling nowPlaying inside the useEffect. That is the right thing. However sessionStorage (whatever is the package is) also has to be called on the browser.
You should be always retrieving the data from the storage inside useEffect, before component renders.
Yes, you can't achieve this with proper NextJS. I am using useSWR library, it has some "update" intervals as an option.
You can check it here. ("options" part)
you can use getServerSideProps. Make sure its a page component. getServerSideProps, getStaticProps only works in page component.
function Page({ data }) {
// Render data...
}
// This gets called on every request
export async function getServerSideProps() {
// Fetch data from external API
const res = await fetch(`https://.../data`)
const data = await res.json()
// Pass data to the page via props
return { props: { data } }
}
export default Page
I recently followed a tutorial by Fireship.io going over making a React App that enables a user to input a video file and convert it into a gif. Here is the source GitHub Repo.
The packages used by the project are #ffmpeg/ffmpeg and #ffmpeg/core, which take care of converting the video into a GIF (although this can be changed to whatever, like the FFmpeg CLI tool).
I wanted to take this a step further and make it possible for me to convert multiple videos at once, each into their own separate gif, however, I am having trouble running the next task when the first is finished.
Here is documentation I found about the ffmpeg wasm package. I also read this example given by the package providers to have multiple outputs from a single file.
Here is my code (App.jsx):
import { createFFmpeg, fetchFile } from '#ffmpeg/ffmpeg';
const ffmpeg = createFFmpeg({ log: true });
function App() {
const [ready, setReady] = useState(false);
const [videos, setVideos] = useState([]);
const [gifs, setGifs] = useState([]);
const load = async () => {
await ffmpeg.load();
setReady(true);
};
useEffect(() => {
load();
}, []);
const onInputChange = (e) => {
for (let i = 0; i < e.target.files.length; i++) {
const newVideo = e.target.files[i];
setVideos((videos) => [...videos, newVideo]);
}
};
const batchConvert = async (video) => {
const name = video.name.split('.mp4').join('');
ffmpeg.FS('writeFile', name + '.mp4', await fetchFile(video));
await ffmpeg.run(
'-i',
name + '.mp4',
'-f',
'gif',
name + '.gif',
);
const data = ffmpeg.FS('readFile', name + '.gif');
const url = URL.createObjectURL(
new Blob([data.buffer], { type: 'image/gif' }),
);
setGifs((gifs) => [...gifs, url]);
};
const convertToGif = async () => {
videos.forEach((video) => {
batchConvert(video);
}
);
return ready ? (
<div className="App">
{videos &&
videos.map((video) => (
<video controls width="250" src={URL.createObjectURL(video)}></video>
))}
<input type="file" multiple onChange={onInputChange} />
{videos && <button onClick={convertToGif}>Convert to Gif</button>}
{gifs && (
<div>
<h3>Result</h3>
{gifs.map((gif) => (
<img src={gif} width="250" />
))}
</div>
)}
</div>
) : (
<p>Loading...</p>
);
}
export default App;
The error I am getting is along the lines of "Cannot run multiple instances of FFmpeg at once", which I understand, however, I have no idea how to make the batchConvert function only run one instance at a time, whether it's outside or inside the function.
Thank you!
I think you need to put await before batchConvert(video);
const convertToGif = async () => {
videos.forEach((video) => {
await batchConvert(video);
}
);
I'm facing a problem with a React project I'm working on: I'm trying to upload multiple images to a Node Express API. I'm using a formData object and I used the append() method to append the form fields from the component State.
In the Express code I'm using multer, all the attributes in the req.body are there but req.files is empty.
I changed the code to upload a single image also using formData() and it works; the problem seems to be only when I try with multiple files using the formData object. I also tested using a regular form (not react) and that also worked!
I'm wondering if there is something I'm missing when I use formData with a file input with multiple files?
import React, { Component } from "react";
import axios from "axios";
class Form extends Component {
constructor() {
super();
this.state = { images: {} };
}
onChangeImages = e => {
this.setState({ images: e.target.files })
};
onSubmit = e => {
e.preventDefault();
const { images } = this.state;
const formData = new FormData();
formData.append("images", images);
axios
.post("/api/post/create", formData)
.then(res => console.log(res.data))
.catch(err => console.error(err));
};
render() {
return (
<form onSubmit={this.onSubmit}>
<input
onChange={this.onChangeImages}
type="file"
name="images"
multiple
accept="image/png, image/jpeg, image/jpg"
/>
<br />
<input type="submit" value="Send" />
</form>
);
}
}
export default Form;
Express code
const express = require('express');
const router = express.Router();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
router.post('/create', upload.array('images', 2), (req, res) => {
console.log(req.files);
console.log(req.body);
res.status(200).json(req.body);
});
module.exports = router;
formData.append("images", images);
You need to append each file in turn. FormData doesn't support a FileList object.
for (let i = 0 ; i < images.length ; i++) {
formData.append("images", images[i]);
}
there are a lot of other alternatives than using the backend. You can use cloudinary or firebase to upload all images and get their urls and let your backend store those URLs in the database.