Seeking Help with react

boxser778 — Sun, 03 Jul 2022 16:55:51 +0000

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 (
        <div style={{ maxWidth: '700px', margin: '2rem auto'}}>
            <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
                <Title level={2}> Upload Video </Title>
            </div>

            <Form onSubmit={onSubmit}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <Dropzone
                        onDrop = {onDropFuc}
                        multiple = {false}
                        maxsize = {100000000}
                    >
                        {({getRootProps, getInputProps}) => (
                            <div style={{ width: '300px', height: '240px', border: '1px solid lightgray', 
                            display: 'flex', alignItems: 'center', justifyContent: 'center' }} {...getRootProps()}>
                                <input {...getInputProps()} />
                            </div>
                        )}
                    </Dropzone>

                    {ThumbnailPath &&
                        <div>
                            <img src={`http://localhost:5000/${ThumbnailPath}`} alt="thumbnail" />      
                        </div>
                    }  
                </div>

                <br/><br/>

                <label>Title</label>
                <Input
                    onChange = {onTitleChange}
                    value = {VideoTitle}
                />

                <br/><br/>

                <label>Description</label>
                <TextArea
                    onChange = {onDescriptionChange}
                    value = {Description}
                />

                <br/><br/>

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

                <br/><br/>

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

                <br/><br/>

                <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");

let storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'uploads/');  
    },
    filename: (req, file, cb) => {
        cb(null, `${Date.now()}_${file.originalname}`);
    },
    fileFilter: (req, file, cb) => {
        const ext = path.extname(file.originalname);
        if(ext !== '.mp4') {
            return cb(res.status(400).end('ERROR: Only mp4 file is allowed.'), false);
        }
        cb(null, true)
    }
});

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.

Forem: boxser778

Seeking Help with react