Upload Video

hi , i got a little problem with my project . i try to create youtube clone just for trying . i ran into a problem when i upload video and the back create thumbnail its actuly not showen on the client side . i belive or thing that its related to Provider in react . would realy like to get some help becouse i searched everywere and could not find answer to my problem. https://giphy.com/gifs/fJA5VRltmMKl0OuIDZ this is the error i get on dev tool ` :5000/uploads/thumbnails/thumbnail-1656867800686_1575467783672_Space%20-%2021542.png:1 GET http://localhost:5000/uploads/thumbnails/thumbnail-1656867800686_1575467783672_Space%20-%2021542.png net::ERR_CONNECTION_REFUSED ` client side: ``` import React, { useState } from 'react'; import { Typography, Button, Form, message, Input } from 'antd'; import Dropzone from 'react-dropzone'; import Axios from 'axios'; import {getCurrentUser} from "../../services/userService" const apiUrl = process.env.REACT_APP_API_URL; const { TextArea } = Input; const { Title } = Typography; const PrivateOptions = [ { value: 0, label: "Private" }, { value: 1, label: "Public" } ] const CategoryOptions = [ { value: 0, label: "Film & Animation" }, { value: 1, label: "Autos & Vehicles" }, { value: 2, label: "Music" }, { value: 3, label: "Pets & Animals" }, { value: 4, label: "Sports" } ] function VideoUploadPage(props) { const user = getCurrentUser(); const [VideoTitle, setVideoTitle] = useState("") const [Description, setDescription] = useState("") const [Private, setPrivate] = useState(0) const [Category, setCategory] = useState("Film & Animation") const [FilePath, setFilePath] = useState("") const [Duration, setDuration] = useState("") const [ThumbnailPath, setThumbnailPath] = useState("") const onTitleChange = (e) => { setVideoTitle(e.currentTarget.value) } const onDescriptionChange = (e) => { setDescription(e.currentTarget.value) } const onPrivateChange = (e) => { setPrivate(e.currentTarget.value) } const onCategoryChange = (e) => { setCategory(e.currentTarget.value) } const onDropFuc = (files) => { let formData = new FormData(); const config = { header: {'content-type': 'multipart/form-data'} } formData.append("file", files[0]) Axios.post(`${apiUrl}/videos/uploadfiles`, formData, config) .then(response => { if(response.data.success){ let variable = { url: response.data.url, fileName: response.data.fileName } setFilePath(response.data.url) Axios.post(`${apiUrl}/videos/thumbnail`, variable) .then(response => { if(response.data.success){ setDuration(response.data.fileDuration) setThumbnailPath(response.data.url) } else { alert("ERROR: Failed to display a thumbnail.") } }) } else { alert('ERROR: Failed to upload a video'); } }) } const onSubmit = (e) => { e.preventDefault(); const variables = { writer: user._id, title: VideoTitle, description: Description, privacy: Private, filePath: FilePath, category: Category, duration: Duration, thumbnail: ThumbnailPath } Axios.post(`${apiUrl}/videos/uploadvideo`, variables) .then(response => { if(response.data.success){ message.success('Successfully uploaded the video!'); // setTimeout(() => { // props.history.push('/') // After 2 seconds of video upload, move to the Landingpage. // }, 2000); } else { alert("ERROR: Failed to upload the video.") } }) } return (

Upload Video

{({getRootProps, getInputProps}) => (

)} {ThumbnailPath &&

}

Title

Description

<select onChange={onPrivateChange}> 
                    {PrivateOptions.map((item, index) => (
                        <option key={index} value={item.value}>{item.label}</option>
                    ))}
                </select>

<select onChange={onCategoryChange}> 
                    {CategoryOptions.map((item, index) => (
                        <option key={index} value={item.value}>{item.label}</option>
                    ))}
                </select>

<Button type='primary' size='large' onClick={onSubmit}>
                    Upload
                </Button>
            </Form>
        </div>
    );
}

export default VideoUploadPage
```

server side:

```
const express = require('express');
const router = express.Router();
const multer = require("multer");
var ffmpeg = require("fluent-ffmpeg");

const { Video } = require("../vi/videoModel");

const upload = multer({storage: storage}).single("file");

//=================================
//             Video
//=================================

router.post('/uploadfiles', (req, res) => {
    upload(req, res, err => {
        if(err) {
            return res.json({ success: false, err })
        }
        return res.json({ success: true, url: res.req.file.path, fileName: res.req.file.filename })

})
});

router.post('/getVideoDetail', (req, res) => {

Video.findOne({ "id" : req.body.videoId })
    .populate('writer')
    .exec((err, videoDetail) => {
        if(err) return res.status(400).send(err);
        res.status(200).json({ success: true, videoDetail })
    })
});

router.post('/uploadvideo', (req, res) => {
    const video = new Video(req.body)
    
    video.save((err, doc) => {
        if(err) return res.json({ success: false, err })
        res.status(200).json({ success: true })
    })
})

router.get('/getVideos', (req, res) => {
    Video.find()
        .populate('writer')
        .exec((err, videos) => {
            if(err) return res.status(400).send(err);
            res.status(200).json({ success: true, videos })
        })
})

router.post("/thumbnail", (req, res) => {

let filePath ="";
    let fileDuration ="";

ffmpeg.ffprobe(req.body.url, function(err, metadata){
        console.dir(metadata);
        console.log(metadata.format.duration);

fileDuration = metadata.format.duration;
    });

ffmpeg(req.body.url)
        .on('filenames', function (filenames) {
            console.log('Will generate ' + filenames.join(', '))
            console.log(filenames)

filePath = "uploads/thumbnails/" + filenames[0];
        })
        .on('end', function () {
            console.log('Screenshots taken');
            return res.json({ success: true, url: filePath, fileDuration: fileDuration })
        })
        .on('error', function(err) {
            console.error(err);
            return res.json({ success: false, err });
        })
        .screenshots({
            count: 1,
            folder: 'uploads/thumbnails',
            size:'320x240',
            filename:'thumbnail-%b.png'
        });
      
});

module.exports = router;

```

i would happily send the full project if needed just let me know thnx for helpers.
</article></body></html>

boxser778

Seeking Help with react

Join Our Newsletter. No Spam, Only the good stuff.