show file name using jquery before upload

function Todos() {
  const [filter, setFilter] = React.useState('')


  const { data } = useQuery(
    ['todos', filter],
    () => fetchTodos(filter),
    {
      // ⬇️ disabled as long as the filter is empty
      enabled: !!filter
    }
  )


  return (
      <div>
        // 🚀 applying the filter will enable and execute the query
        <FiltersForm onApply={setFilter} />
        {data && <TodosTable data={data}} />
      </div>
  )
}

// This will not work in React 16 and earlier
const CreateTodo = () => {
  const mutation = useMutation({ mutationFn: event => {
    event.preventDefault()
    return fetch('/api', new FormData(event.target))
  }})


  return <form onSubmit={mutation.mutate}>...</form>
}


// This will work
const CreateTodo = () => {
  const mutation = useMutation({ mutationFn: formData => {
    return fetch('/api', formData)
  }})
  const onSubmit = event => {
    event.preventDefault()
    mutation.mutate(new FormData(event.target))
  }


  return <form onSubmit={onSubmit}>...</form>
}

function MyComponents() {
	const { canvas } = useContext(CanvasCTX);
    if (canvas) {
    	console.log(canvas.getActiveObject())
    }
    
    return <div>I am a child component</div>
    
}

function MyComponents() {
	const { canvas } = useContext(CanvasCTX);
    if (canvas) {
    	console.log(canvas.getActiveObject())
    }
    
    return <div>I am a child component</div>
    
}

 <script>
    $("#file").change(function() {
      filename = this.files[0].name;
      $('.filename').text(filename);
    });
  </script>

 <script>
    $("#file").change(function() {
      filename = this.files[0].name;
      $('.filename').text(filename);
    });
  </script>