In this tip, we upload images and general files to our Turbo 360 hosting environment using two different approaches:
- Traditional file input
- Drag & drop using Dropzone JS
We differentiate standard files from images because the image hosting service on Turbo 360 utilizes a different environment which allows us to scale/crop images very easily by passing a query parameter. To see the uploading in action, view the demo animation below or click HERE:
All of the code can be found in the "views/index.mustache" file within the demo project.
- jQuery (line 32)
- Dropzone JS (line 33)
- Turbo 360 SDK (line 34)
The Dropzone JS library is for the drag & drop functionality which is only needed for the second portion of the demo (the right side under "Dropzone JS" header).
IMPORTANT: in order to run the code, make sure to create your own site on Turbo 360 and swap out the <YOUR_APP_ID> and <YOUR_APP_API_KEY> placeholders on lines 41 or 42 otherwise the file uploads will go to the live demo app.
This demo also supports file uploads that are not images such as PDF or zip files. In that case, there is no UI update on upload success but you can still see the upload on the Turbo admin dashboard for your site. Simply log in to Turbo 360 and navigate to "My Sites" and select the "sites" tab. There you will see your project - click the "manage" link and then the "File Storage" link on the left-hand menu. You should see a dashboard that looks like the image below. Here you will see all files uploaded to your project:
Image Cropping & Scaling
Images are handled separately on Turbo 360 because they are hosted in on a platform which allows for scaling and cropping very easily by passing in a parameter to the image URL. The following image is shown in its natural size and dimensions:
This image can be scaled down to a smaller version (for thumbnails perhaps) by appending a simple parameter to the URL string. For a 120-pixel size version of the image, add "=s120" to the url like so:
And the resulting image will appear as shown below:
Images can also be cropped to a perfect square by adding "-c" to the same parameter. For example, "=s120-c" will render an image with exact 120px by 120px dimensions. The image below is a landscape image with url:
Here is a 72-pixel cropped version with resulting image: