Is this react statement is correct?

JavaScript
#1

Hello,

Is this react statement is correct? mainly URL part. Does it give us the file URL?


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


        const SaveFile = (e) => {

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

    };

Thanks,
Saeed

#2

I think that would depend on the wider code.

But looking at your code, if the name and fileURL are stored in the file, why have separate variables for them?

And it’s bad practice in JS to label simple functions with PascalCase - they should be camelCase - unless they are classes, object constructors, or React classes.

Is this from some app? Does it work there? From where is this handler being invoked?

#3

Yes, it works, unless URL.

#4

Can you log out e.target.files[0] so you can see the available properties?

#5 
import React, { useState } from "react";
import axios from "axios";


export  const FileUpload = () => {

    

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


        const SaveFile = (e) => {

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

    };

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

        try {
            const res = await axios.post("WeatherForecast/WeatherForecast/post", formData);
              
            
            console.log(res);

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

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

        );

    
};

The whole front end works well with the back end unless I added to its URL.
I supposed react will give the event handled file URL.
But it doesn’t show any log file.

#6

What is showing in the console?

#7

nothing! but

formData.append("formFile", file);
        formData.append("fileName", fileName);

works well!

#8

Where did you get the idea that you could get the file url? From what I can see in the docs, that is not one of the available options. When I log out the file in the app (as I asked you to do) I see the following properties:

File
  lastModified: 1572228651402
  lastModifiedDate: Sun Oct 27 2019 19:10:51 GMT-0700 (Pacific 
  Daylight Time) {}
  name: "prs.txt"
  size: 3043
  type: "text/plain"
  webkitRelativePath: ""
  __proto__: File

It makes sense from a security perspective that you won’t get a map to the inner workings of the users hard drive.

Why do you need the url? You shouldn’t need it for anything - I assume the response itself is a reference to that file, if opaque. The MDN page given shows how to use that.

#9

I thought by this way I could save the images in the database with react.

#10

Right, I haven’t done this, but I assume that that File object can get that and there is a way to upload it. It just won’t tell you exactly where it is in the folder structure of the user’s computer. But I assume that that reference can be used to upload that file to your server.