

Show HN: Pasteboard - HTML5 Web App for Quick & Easy Image Sharing (Open Source) - JoelBesada
http://pasteboard.co/

======
raquo
Nice design.

Bug report: I've copy-pasted an image file from my desktop and that's what a
got: <http://pasteboard.co/1345297649815178.png> (that's an OSX default
thumbnail image, not my image file). Chrome 20 @ OSX 10.6.8

~~~
JoelBesada
Copying actual image files in OSX (instead of image data) gives that
thumbnail. You're actually not supposed to be able to copy and paste _files_
at all, since I don't think there is any way for me to access the data in the
file through the clipboard. I believe OSX is alone in putting thumbnails in
the clipboard when copying files.

This might be a bit confusing, I'm going to have to figure out how to make
this more clear to the user.

------
EwanG
Not sure the following is part of your usecase, but you may want to consider
it.

First off, you might want to add something that indicates what kind of images
are "valid". For example, I would love a site like yours where I could post my
RAW CR2 files. While those are rarely good exactly like they are, they can be
useful to show someone as an example of unretouched work, or as a guide to
where I'm starting for someone to indicate "yes, but I really wanted you to
get an angle looking from the south".

Second, I would love to have your service or some other one where I can pay a
semi-ridiculous fee, and know the same image will still be available in 10
years. Right now I have about 1TB of images, and I wonder if anyone would
bother to even look through them before just deleting the directory if I
weren't around. It would be nice to know they are still somewhere. My current
"workaround" is to post images to one of my blogs that I know Archive.Org
backs up.

~~~
btown
Your first use case seems perfect for Dropbox... just share a link to the
specific files in question.

The second use case, I'm unaware of anything that legally provides that
guarantee (i.e. with an SLA), but if you trust that Amazon will be around for
10 years, you could just sign up for an AWS account and put the images on S3
yourself. I'd put more stock (literally and figuratively) in Amazon than
Archive.org for data reliability.

------
koopajah
I like the UI and it seems pretty nice. But under Firefox the image does not
upload at first (stays a 00%). I first have to cancel and reclick Upload for
it to work.

When I'm on a website and right-click -> copy Image, its says nothing is in my
clipboard, I first have to paste it in Paint and copy it again for it to work
on the site, is it a bug or am I misunderstanding how the clipboard works (I'm
under Win7)?

When you generate the URL, it would be great if it was clickable or at least a
button to go to the image. I understand the goal is for the user to have a URL
to share so copying may be more important that clicking.

Do you plan to add the ability to delete a picture? I don't see a button
anywhere to do so, and no info on how long you keep the data. Will you apply a
policy like pastebin for text?

Anyway it's really an easy way to share a picture with someone, hope you'll
add features!

~~~
JoelBesada
Does this upload bug happen every time? There are still some weird bugs that I
haven't figured out how to solve yet since they are hard to recreate. I'll
keep working on that though.

About the copying images from a website: See my answer to arkitaip.

I'm considering adding a clickable link as well under the generated URL, that
might actually be useful.

If I were to implement the ability to delete a picture, I would have to add
some kind of user authentication which I'm not planning on doing at this
moment. It might be possible to put some kind of secret client ID in the users
localStorage to allow them to delete their own images, but I would have to
make sure it can't be exploited so that other people can delete your images.
Feel free to leave suggestions on how you could do this without requiring user
accounts.

I would like to be able to store the images forever, but if the costs of doing
so becomes to much for me to handle, I'm going to have to reconsider that.

I'm definitely planning on adding more features to the app, but one of the
strong points of it is that it's very clean and simple at what it tries to do,
so it's important that I don't try to add too much to it.

~~~
koopajah
Strangely the bug does not seem to appear anymore sorry I cannot give you more
info on this now.

A clickable link or maybe a button with an image representing "Go to" action!

Storing images forever seems really hard and costly wouldn't it? Especially if
you don't limit the original image size or resize it on your server.

For deletion of the image a solution could be to do like doodle.com. You
provide one "administration link" where the uploading user can
resize/crop/change the image, and a "publishing link" that he can provide to
over people to see ?

A quick share through twitter/FB/G+ etc of the image uploaded could be nice
too and help spread the word!

~~~
JoelBesada
I currently limit the image size to 10MB, but even with that I guess storage
space could quickly become a problem. A 30 day expiration time might be needed
to keep the costs down.

Giving an additional administration link is a possibility, but I'll have to
put some more thought into what the best way to handle image deletion /
editing would be.

Adding sharing options is on my to-do list!

------
arkitaip
Gorgeous UI!

This is an interesting case because I've always wondered how users interact
with drag and drop ui in the browsers. Are users accustomed to the concept or
does it confuse them because traditionally browsers haven't supported drag and
drop? I bet there a risk for a conflict in the user's mental models!

I wonder how drag and drop would compare to the traditional approach to upload
images:

1\. click the Browse Image button

2\. Locate images

3\. Select Images

4\. OK image selection

Like I said, would love to see some stats on browser drag and drop.

EDIT: Using Chrome, I tried to drag and drop an image on a web site to
Pasteboard and it didn't work. Kinda obvious since it's a clipboard object but
it would be really cool if it worked (not sure why you would like to host an
image that's already on the web but it's the idea that counts, I reckon).

~~~
ferongr
>Using Chrome, I tried to drag and drop an image on a web site to Pasteboard
and it didn't work.

This action has been working for quite some time on Google Images [1] (drag
and drop an image from a different tab to the search bar) so it's probably a
design oversight.

Regardless, I personally find drag and drop between different windows I
haven't prepared in advance a real bother. I'd rather have the OS filepicker
pop-up on click, navigate to my images, switch to icon previews and select the
image there.

[1]
[https://www.google.com/imghp?hl=en&tab=wi](https://www.google.com/imghp?hl=en&tab=wi)

------
thenomad
Pretty damn cool. On Firefox, though, I can't drag and drop an image straight
from another webpage, or choose "Copy Image" in FF then paste - in both cases
it says either "not an image file" (if I drag an image) or "Your clipboard has
no image" (if I CTRL+V after copying an image), and doesn't work.

~~~
JoelBesada
Please see my other answers about this - images that are already hosted
somewhere else won't work at this moment.

------
m_ke
Looks great. Did you consider having it automatically upload on the drop?
Having the upload button seems like an unnecessary extra step.

Anyways, I bookmarked it and will be using it.

~~~
JoelBesada
It actually starts preuploading the image to the server as soon as you insert
it, clicking the upload button just confirms that you want to upload the
image. When you click the button the server starts uploading the image to the
cloud and generates the link for it.

The extra step is also there to let you crop the image, if you wish.

------
OliverM
Does it work in Safari in the Mac? I tested it there but no joy (Safari 6 on
10.8) I've been struggling with Safari myself - it only allows you to catch
paste events if the user is pasting into a text box - unlike Chrome which lets
you catch paste events no matter what HTML element type catches them. I think
google docs works around this by having an invisible text box capture & re-
direct interaction events.

~~~
JoelBesada
Pasting in Safari doesn't quite work, like you said the paste event requires a
text box to trigger, and while it seems to have the same clipboard API as
Chrome, images don't seem to show up there.

In Firefox a contenteditable div is used to catch pasted content, when images
are pasted an img tag with base64 encoded image data is inserted, which is
easy to just grab and display. Unfortunately, this doesn't work in Safari.

Because Safari seems to support all the needed APIs, it's hard to detect and
inform the user that copy and paste doesn't work. I'd rather not do any
browser sniffing.

------
nikic
I think the app looks very nice :)

One thing that I'm missing here are the Terms Of Service. Uploading stuff on
other people's servers is always a legally problematic business. It should be
made clear that the uploader retains all rights on the images.

~~~
JoelBesada
You're right, I just have no idea how to write those things. Are there any
"open source" Terms of Services that I would be able to use here?

~~~
beshrkayali
I suggest you take a look at <http://www.docracy.com/>.

Really good work by the way :)

~~~
JoelBesada
Thanks!

------
deepGem
So where do the images go - sorry to ask a dumb question but if I want to
delete the uploaded snap, is it possible ?

If you can enable batch upload that'll be fantastic.

Kudos to keeping the app really simple and beautiful. +1

~~~
JoelBesada
There's no way to delete the images at the moment. I'm considering different
methods of handling this, since that seems to be something that many want.

------
prezjordan
I love it, quick question - under the websocket connection, I see that you're
generating an ID with a pretty interesting algorithm, is there any purpose of
it, or is it simply random characters? The format is very interesting.

~~~
JoelBesada
I searched for a quick way to generate UUIDs in Javascript, which lead me to
this Stackoverflow answer <http://stackoverflow.com/a/2117523>.

I haven't looked into how that works, so don't ask me about that :)

------
leejw00t354
The interface is beautiful, good job.

It would be brilliant if you could now extend the simple interface to some
additional features like cropping, rotating, maybe even some photo filters.
I'd definitely use it.

~~~
JoelBesada
Cropping is already there :)

------
kmfrk
Works like a charm: <http://pbrd.co/MDU1fG>.

And that UI is amazing. I might have to take a peak at your source to learn a
thing or two.

------
ctide
I built this too, but with sweet user accounts: <http://imageshar.es/>

I, however, did not spend much time on the UI. :)

------
js4all
Nice webapp. It is dead simple to use and works very well. Being able to crop
the image before uploading is a great plus.

------
tmchow
Super slick, love the design. Uploading a few test images was painless and the
workflow was straightforward. Great work!

------
alexobenauer
This is nicely done! The interface is dead-simple, and well-built. Good work.

------
elb0w
I would add a check if pasted text is a url to an image and load that in

~~~
JoelBesada
Yes, I'm considering that. However, the main point of the app is to let the
user upload images to the web that aren't already hosted somewhere else.

------
fidz
Simply what we want. And you open source it. Thanks! Really great work!

------
fudged71
This is truly a beautiful web app. Very nice work.

------
kellysutton
Nifty. Reminds of Corkboard.me from awhile back.

------
Chirag
Very neat interface. App just works.

------
recroad
Show the raw URL immediately after upload. Nobody wants a link where you get
to see stuff other than the image just uploaded.

------
haberdasher
Flawless. Well done!

------
vital
Pretty lame for me and the rest of us who don't drag or drop

