How to get the file path of a file dropped in the webpage

p5.js Coding Questions
1

I was trying to make a drag and drop just like this video by Daniel Shiffman https://www.youtube.com/watch?v=o4UmGrPst_c&t=317s

But I was wandering if I could get the file path of the dropped file and thus download the file in my current directory (the directory of my sketch)

Thanks in advance

2

Hi! This is a really good question! Its not uncommon to have this misconception (In fact I had to brush up on my knowledge of local/server storage)

Before I start, know this: You can’t. At least, not the way (I’m assuming?) you think it should

So, let’s start on the server side. Typically, you, the user, ask the server for a resource, say an HTML page. The server says “Gimme a second”, and sends the page. This server could be next door, or 3000 miles. Either way, it’s technically going through The Pipes, and the pixels you’re staring at, on the screen, consist of just the package of HTML and JS that got zipped, 3000 miles to you.

Key point: The server, 3000 miles away, has no idea whats going on at this point. You, the user, are just staring at some interpreted markup (oh, and of course, some P5.js for that pizzaz).

I want to stress that, whatever happens on your local machine, stays on your local machine. If you “upload” an image or display a Canvas object at any point, it’s all happening locally. (In the old days, you might actually upload an image, make changes, and talk to the server every time you make changes. but why do that when JS can now do errything inside Chrome! What a time to be alive.)

TL;DR

  • In Schiffman’s video, that image, despite the “Upload” semantics, is local. (Even if that page was served by a server). The server is not even in the picture when ur interacting with the page.Thats all CSS and JS magic.
  • In order download the file into the directory of your sketch, you’re gonna have to learn how to talk back to a server via Javascript.

That JS doesn’t know (or care) whether the server is 3000 miles or on your localhost. Either way, you have to learn the old magic. :sparkles:

Disclaimer: Im not an expert and I’m working off of 10 minutes of googling. I might be hopelessly outdated in my knowledge. But hopefully this points you in the right direction

1 Like
3

Thanks for your reply! Actually I was trying to make a very simple chat platform with p5 js, node js and socket.io

There I wanted to implement upload and download system. What I want to implement is that a user will upload a file by dragging. Then I will send a message to the server with the file. Then this will be forwarded to all the other users. They will download it.

I know that my question was a bit irrelevant and I apologize for that. Any way to implement the download system?

4

It sounds like socket.io can send files. Depends on what you meant by “implement”. You’ll have to elaborate.