Uploading Images and Files

Turbo 360
turbo360
June 20th, 2020
1 points
View Demo

In this tip, we upload images and general files to our Turbo 360 hosting environment using two different approaches:

  1. Traditional file input
  2. 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.

views/index.mustache

We use the following JavaScript libraries to implement the upload functionality:

  • 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:

https://lh3.googleusercontent.com/MFm-F6MNAgt6LbiTXwTgRuTKZIF9HcWRHDuWIue44VinGWFS9vwkEWtx0w_jciocLAbLA6AblTdif_l-B6XHM30n=s120

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:

https://lh3.googleusercontent.com/g4Ktyd458D_zLeabslbMfnJapwmAA-I8_aEojkBhWBDUNV23jjkfexvF0uh-HUwMLVXrbNjpHFor39_grZ1P17s_Iw

 

Here is a 72-pixel cropped version with resulting image:

https://lh3.googleusercontent.com/g4Ktyd458D_zLeabslbMfnJapwmAA-I8_aEojkBhWBDUNV23jjkfexvF0uh-HUwMLVXrbNjpHFor39_grZ1P17s_Iw=s72-c


Join Free

Join for free today and deploy your site in seconds


Already have an account? Sign in HERE