-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
reading local files selected by user #370
Comments
great idea, I like this a lot! |
Awesome, it'll take me a bit but I'll work on a pull request soon! |
Ok, I have a first working version of this at https:/shiffman/p5.js/tree/selectfileinput. @lmccart can you take a look? The things to decide on are:
The relevant parts to look at are createFileInput() and this test example I'll wait for some discussion to do a pull request. I also need to work on drag / drop. |
Btw in Processing it's called selectInput() |
If possible or reasonable, sticking to Processing's API names is a good strategy! ^_^ |
A thought occurred to me as I slept . . . it might make sense to have a callback handle a single file (and happen many times) vs. a single call back that receives an array of files. Will consider this as I make updates / revisions. |
|
I like 'multiple' over true. For naming, the "create" methods generally refer to an element that is being appended to the dom, and usually the second word is the tag that gets added (createCanvas, createButton, etc). These methods also return a p5.Element. Since nothing is getting added, maybe it would make more sense to drop the create part? selectInput might work. or selectFiles? |
Ok, I took another pass over this. Here is the current status.
An optional second argument specifies if you want to allow the user to select multiple files.
I kept createX b/c the function is creating a new DOM element. It's an input element with The argument it takes is a callback which receives a
An alternative would be to pass in the native JS File object and a variable that holds the data, i.e.
I haven't submitted a pull request yet. Thoughts / comments? I'm sure this is missing a lot but it's a start. Branch is here: https:/shiffman/p5.js/tree/selectfileinput |
ah, my mistake with the naming. I think embedding the metadata and content in the file object (option 1) makes sense, I think passing both file and data would be confusing for the user. does this cause any issues with performance or seem wrong for any other reason? |
I've now implemented functionality in p5.Element for a div you can drag files onto. A full example would look like: var dropZone = createDiv('Drop files here');
dropZone.dragOver(callback1);
dropZone.dragLeave(callback2);
dropZone.drop(callbackDrop, callbackFileLoaded); But a lot is optional and even just this will work: var dropZone = createDiv('Drop files here');
dropZone.drop(callbackFileLoaded); This probably needs some finesse, comments / thoughts welcome. There's also an example in |
Some open items I need to look still.
|
this is awesome. I made a little tweetable gist/gif. once the documentation is on the website I can add links to the specific functions in the ref and tweet. |
Fixed some things and documentation is now inline. Will submit an example for p5js.org next. Then this should be able to be closed. |
woohoo! |
Picking up on the discussion of #40 I created two examples based off of this html5rocks tutorial.
Do we want to consider adding this functionality to p5.dom? Something along the lines of. . .
The above assumes text data but I imagine there could be some hooks for images or other data formats, etc.
The text was updated successfully, but these errors were encountered: