File Object - Renaming a file name in a state react

Question

i am running into an issue when i try to rename a file that is already in a state. i run into the issue where it will replace all the file information and just add in the name that i changed so, when i send it to the server to be saved it cant because it only has a string name instead of the file information. here is the code:

constructor(props){
    super(props);
    this.state = {
        images: {
            iconImage: null,
        }
    }
}

onIconChange = (event) => {
    console.log(event.target.files[0]);
    this.setState({images: {iconImage: event.target.files[0]}});
}
onSubmit = (isNew) => {

    if(this.state.images.iconImage){
        this.setState({images: {iconImage: {
            name: `${this.state.name}-${this.state.images.iconImage.name}`
        }}},
        this.sendImage);
    }
    else{
        this.reset();   
    }
}

sendImage = () => {
    const data = new FormData();
    console.log(this.state.images.iconImage);
    data.append('image', this.state.images.iconImage);
    axios({
        url: 'http://127.0.0.1:3002/icon',
        method: 'post',
        data: data,
        body: JSON.stringify({
            vID: this.state.id
        })
    })
    .then(res => console.log(res.data))
    .catch(err => console.error(`error posting image: ${err}`));
    this.reset();
}

before name change: File {name: "CoverImage.JPG", lastModified: 1617527811701, lastModifiedDate: Sun Apr 04 2021 19:16:51 GMT+1000 (Australian Eastern Standard Time), webkitRelativePath: "", size: 74957, …}

after name change: {name: "test2-CoverImage.JPG"}

Answer 1

All file properties are read-only properties. So you cannot update those using spread operator or Object.assign too.

However, You can use the below code to rename the file.

Demo on Stackblitz

  const myNewFile = new File(
        [this.state.images.iconImage],
        `${this.state.name}-${this.state.images.iconImage.name}`,
        { type: this.state.images.iconImage.type }
      );

      this.setState(
        {
          images: {
            iconImage: myNewFile
          }
        },
        () => {
          console.log(this.state.images);
          console.log(this.state.images.iconImage.name);
          console.log(this.state.images.iconImage.size);
        }
      );
    }

Answer 2

Ok so for some reason you are not able to edit the file name however there is a work around. All that is needed to be done is to make a new file in a new variable. Here is how i did it:

const mynewFile = new File([this.state.images.iconImage], 
`${this.state.name}-${this.state.images.iconImage.name}`);

here is a link to the website i found the answer in here . it is much simpler then trying to set the state again!