File Storage

Introduction

Every Turbo project is automatically assigned a storage "unit" in our distributed static asset delivery environment. Files uploaded to Turbo storage units are immediately cached and plugged into our global CDN for maximum delivery speed and effiency.


Uploading Files

In order to upload a file, projects must be connected to a registered project on your Turbo account. To do so, copy the APP_ID from your project dashboard then connect it to your local project:

$ turbo app <APP_ID>

The upload function from the Turbo SDK is turbo.uploadFile(completion, onUploadStart). This function is typically called from a button or anchor tag from an HTML page. The completion is a conventional callback that takes error and data arguments. 'onUploadStart' is an optional function argument which gets called when the file upload begins and is best used for activating a loading indicator or another UI indication of an upload in progress. A standard call of the upload method looks like this:

turbo.uploadFile(function(err, data){
  if (err){
	alert('Error: ' + err.message)
	return;
  }

  console.log('Upload Complete: ' + JSON.stringify(data))
})

The data callback includes meta data of the uploaded file as well as the live URL for public linking. This function should be binded to the upload-button-id button as a click handler from within the app.js file:

..assets/js/app.js

To start an upload, simply click on the button with the corresponding button id and a file menu dropdown should appear. Once a file is selected, the upload will automatically begin.


Managing Files

Files can be managed on your Turbo dashboard within each project's console. To view the current files, navigate to your project admin console and click on the 'storage' menu option along the left:



Here, you will see all files currently stored on your project along with their associated meta data. In addition, you can remove files from this console.


Viewing Images

Images on Turbo are stored in a separate environment that allows dynamic scaling and cropping based on url configuration. A typical image URL with corresonding img tag is as follows:


https://lh3.googleusercontent.com/7gCBQiPDJh607v1HFt9zmGeZpaJh0gnEhvhJXMuBzLp6ZXNQtRZHYCUBwD7qKjlgef4o0h45d4q0vIbl_PWYXaeW9g

To view this same image as a smaller cropped square (ideal for thumbnails), simply append '=s120-c' to the url, where '120' determines the size of the crop:


https://lh3.googleusercontent.com/7gCBQiPDJh607v1HFt9zmGeZpaJh0gnEhvhJXMuBzLp6ZXNQtRZHYCUBwD7qKjlgef4o0h45d4q0vIbl_PWYXaeW9g=s120-c

To view a scaled version of this image while maintaining aspect ratio, remove the '-c' from the end of the url:


https://lh3.googleusercontent.com/7gCBQiPDJh607v1HFt9zmGeZpaJh0gnEhvhJXMuBzLp6ZXNQtRZHYCUBwD7qKjlgef4o0h45d4q0vIbl_PWYXaeW9g=s120

All images uploaded to Turbo are automatically receive these cropping and scaling options.


Questions/Comments

If you have any questions, comments or feedback, feel free to contact us at matthew@turbo360.co