Skip to content

Prevent file opening after drop it #2291

Closed Answered by rtritto
rtritto asked this question in Q&A
Discussion options

You must be logged in to vote

I solved with:

const Page = () => {
  return (
    <div>
      <label
        style={{ display: 'flex', background: 'red', width: '100%', height: '16rem' }}
        onDragOver={(event) => {
          event.preventDefault()
          event.stopPropagation()
        }}
        onDrop={(event) => {
          event.preventDefault()
          event.stopPropagation()
          const files = event.dataTransfer!.files
          // Save files
        }}
      >
        // Drag'n'drop content
      </label>
      <input
        type="file"
        style={{ display: 'none' }}
        onChange={(event) => {
          const files = event.target.files
          // Save files
        }}
      />
    </div>

Replies: 3 comments 3 replies

Comment options

You must be logged in to vote
1 reply
@rtritto
Comment options

Comment options

You must be logged in to vote
2 replies
@rtritto
Comment options

@rtritto
Comment options

Comment options

You must be logged in to vote
0 replies
Answer selected by rtritto
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
3 participants