Why I cant export this function

JavaScript
#1

Hello,
Why I can not export this component:

import React, { useState } from "react";
import axios from "axios";
//import React, { Component } from 'react
//import React, { Component } from 'react';

export  const FileUpload = () => {

    

        const [file, setFile] = useState();
        const [fileName, setFileName] = useState();

        const SaveFile = (e) => {

            console.log(e.target.files[0]);
            setFile(e.target.files[0]);
            setFileName(e.target.files[0].name);

    };

    const UploadFile = async (e) => {
        cons.log(file);
        formData = new FormData();
        formData.append("formFile", file);
        formData.append("fileName", fileName);

        try {
            const res = await axios.post("https://localhost:44323/api/file", FormData);
            cons.log(res);

        } catch (ex) {
            console.log(ex);
        }
    };

    return (
        <>
            <input type="file" onChange={SaveFile} />
            <input type="button" value="upload" onClick={UploadFile} />
        </>

        );

    
};

When run the code, get this error:

./src/components/FileUpload.js  Line 22:9:   'cons' is not defined      no-undef  Line 23:9:   'formData' is not defined  no-undef  Line 24:9:   'formData' is not defined  no-undef  Line 25:9:   'formData' is not defined  no-undef  Line 29:13:  'cons' is not defined      no-undef

Where is wrong?
thanks,
Saeed

#2

cons.log(file) <-- do you have an object called cons here?

#3

I used this article.
Is this wrong:

#4

Hello there,

As @snowmonkey mentioned, the issue is in these two lines of code. They do not match what you are copying from the above article.

If you are unfamiliar with the syntax of JavaScript, you are free to complete a few of the lessons offered here: Basic JavaScript | freeCodeCamp.org

Hope this helps

1 Like
#5

yes, i understood and changed cons to console.
but still i get error? is seems the problem is related to formdata.

#6

Are we allowed to know what the new error is?

1 Like
#7

As I said, both of the lines of code have an issue, and the error points out that you have not defined formData. Specifically, you have not initialised formData.

Again, this has to do with the basic syntax of JavaScript, so I highly recommend going through the first few lessons of the above linked course.

Hope this clarifies

2 Likes
#8

This is one of a few posts that you’ve made asking for help with something that you don’t understand, seeming to reveal a lack of familiarity with some of the fundamentals. It’s like you’ve skipped over the Basic Auto Mechanics class and are trying to build your custom car from scratch.

While it’s perfectly OK to post here about things other than the curriculum, this forum is part of Free Code Camp which has a curriculum that would make you very ready for things like this. I agree with the others that this would be a lot better for you to learn the fundamentals. It may not be as much fun as working on a big project, but it would be the best thing for your development as a coder.

1 Like
#9

Thanks for your advice I don’t have any error now.
But when I upload an image, it doesn’t being uploaded in wwwroot folder!
Did I use Axios in the above code correctly?

#10

That just posts it to the server. What happens after that will depend on your server.

#11

model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;

namespace imageEditor3
{
    public class FileModel
    {
        public string FileName { get; set; }
        public IFormFile FormFile { get; set; }
    }
}

controller:

namespace imageEditor3.Controllers
{
    using Microsoft.AspNetCore.Http;
    using Microsoft.AspNetCore.Mvc;
    using System;
    using System.IO;

    /// <summary>
    /// Defines the <see cref="FileController" />.
    /// </summary>
    [Route("api/file")]
    [ApiController]
    public class FileController : Controller
    {
        /// <summary>
        /// The Post.
        /// </summary>
        /// <param name="file">The file<see cref="FileModel"/>.</param>
        /// <returns>The <see cref="IActionResult"/>.</returns>
        public IActionResult Post([FromForm] FileModel file)
        {
            try
            {
                string path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", file.FileName);

                using (Stream stream = new FileStream(path, FileMode.Create))
                {

                    file.FormFile.CopyTo(stream);

                }

                return StatusCode(StatusCodes.Status201Created);

            }

            catch(Exception)
            {
                return StatusCode(StatusCodes.Status500InternalServerError);
            }
        }
    }
}
#12

I think you should do some logging in the server code and at least figure out where the problem is.

#13

What is your programming experience with React and .NET?

#14

I have used ASP.net core and Blazor. But this is a first-time use of javascript in view. I think in this example react can’t call the back end!
Something is wrong with Axios!

#15

Then you should be able to diagnose this. This is trouble shooting. Can you dispatch that call in PostMan? What code does it get back? Does the server see the POST? Is it getting the data? Is the path being created correctly? Is the stream being created? Is it writing?

You need to help us out here.

#16

Yes, I’m trying to answer these questions.
Also, I asked about my problem in the ASP forum.

#17

Right… but if you can’t answer those basic diagnosis problems, then you are lacking some fundamental knowledge. Again, I think your project is too ambitious for your level of knowledge. I really think you need to take a step back and build some fundamentals.

But stepping you through every problem you have AND having to tell you how to find the problem AND having to explain it to you is not the best use of my time and energy, especially since I don’t do ASP.net.

Best of luck to you, I hope you figure it out.

1 Like