StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
20338792
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-12-02T21:59:05.660
FavoriteCount
0
LastActivityDate
2013-12-02T22:04:57.603
LastEditDate
2013-12-02T22:04:57.603
LastEditorUserId
2828763
OwnerUserId
2828763
ParentId
13909415
PostTypeId
2
Score
1
ViewCount
0
LastEditorDisplayName
text
Body
There are several separate things here: <ul> <li>Validating image/file type. This can be done at the client side, but you will need to do it at the server again for security. For a file input that only accepts images, you can use: <pre><code><input type="file" accept='image/*'> </code></pre></li> <li>Letting the user crop the image. There are several libraries here, the most prominent one being Jcrop. But there are alternatives, like imgareaselect, jqCrop and jquery-cropbox (I created and mantain the jquery-cropbox). See here for a very minimal example on how you can get started with one or two lines of jquery.</li> </ul> <a href="http://acornejo.github.io/jquery-cropbox/" rel="nofollow">http://acornejo.github.io/jquery-cropbox/</a> <ul> <li>Doing the actual cropping at the client. This requires HTML5, and therefore won't work with older version of internet explorer. In particular you will need the canvas api, and possibly the file api (to serve the files). jquery-cropbox can also do this for you through the <code>getBlob</code> and <code>getDataURL</code> methods. If you want to do it by hand, take a look here:</li> </ul> <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D</a> <ul> <li>Uploading the image. There are plenty of scripts for uploading images out there, take your pick. If you are using jquery-cropbox, then you can use jquery to handle the upload to your server like this (uploading client generated form data like this will also require an HTML5 compliant browser). <pre><code>var blob = $('#yourimage').data('cropbox').getBlob(); var fd = new FormData(); fd.append('file', blob); $.ajax({ type: 'POST', url: 'http://yourwebsite.com/handle_uploads', data: fd, cache: false, contentType: false, processData: false, success: function(data){ alert('upload succeeded'); }, error: function () { alert('upload failed'); } }); </code></pre> },</li> </ul>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POValidate image filetype/filesize, crop, resize & then upload
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USRick Deckard
UserOwnerUserId
1. USRick Deckard
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.