I am building a Classifieds site (see list of reasons here).

In this post, I will be showcasing how I used DropZone (an awesome open-source library for drag-n-drop functionality) and ServiceStack (as our back-end service for uploading, resizing & storing the files) in providing users with a drag and drop facility for uploading their images. Once images are dropped, the service handles the resizing of images & saving of images onto the server.

uploadingImages_3

Installing & configuring DropZone
Installing dropzone
– You can install it using Nuget. Install-Package dropzone.
– Alternatively, you can download the latest release packages here.

The most important file is the dropzone.js. You will need to reference this in your code if you want to make use of it as per below. I suggest also referencing dropzone.css to make use of Dropzone’s awesome styling.

Dropzone configuration options
There are multiple configuration options available & DropZone makes it really easy.
For the Classifieds site, I wanted
– a maximum file size of 3Mb
– 10 files maximum per post,
– limiting parallel uploads to 1. This  prevents memory stream being accessed by another image before the image is finished [if there is another way of handling this, please provide feedback in the comments]

Finally,
– on successfully uploading, I want to pass the saved file location’s url to a hidden input field (“Files”).  Thus when a user posts the form, I can link the image URLs to the classified ad.

Again, Dropzone makes this very easy by listening to events. In this case the ‘success’ event.


Using ServiceStack for uploading, resizing & storing images
Dropzone requires a server-side implementation to upload, resize & restore images. I will be using ServiceStack for this.

Firstly, you notice that the dropzone element includes an action parameter.  “/images/upload/” This is the Servicestack api route which will handle the upload.

Now, the server-side code for ServiceStack. We first need to create the Request and Response DTOs . For those familiar with WFC or WebAPI, note how much simpler this is (a full description on differences is given in this stackoverflow post [new window]). The response DTO includes a simple URL which is the image’s saved location. (you can access response properties from DropZone – see DropZone on success script above)

The upload, resizing and storing is all housed in the ImageService (this code has been adopted and marginally changed from http://imgur.servicestack.net/. Thanks Demis). Specifically,
– I wanted uploaded files to receive a unique name. Thus brought in the RandomString(int length) method when creating a unique file name. Thanks dtb @stackoverflow.
– my ResponseDTO includes a URL (giving the image’s filename), which can be used by DropZone

 

Coming up in future posts:

  • I will make a decision between deploying to Azure or AWS
  • I will launch the actual Classifieds Site and use Facebook Ads & share the results
  • More cool ServiceStack features

Get notified

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s