File Storage

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.

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 'File Storage' menu option along the left:



Here, you will see all files currently stored on your project along with their associated metadata. In addition, you can remove files from this console. To upload a file from the management console, click the "Upload File" button on the upper right corner.

Uploading Files From Your Site

In order to upload a file from your site, 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 connect

Then enter the SITE ID and API KEY when prompted by the Turbo CLI.

Turbo 360 provides two ways to upload files from your site using the Turbo SDK

  • Turbo Front-End SDK
  • Turbo NPM

Turbo Front-End SDK

The upload function from the Turbo Front-End SDK is turbo.uploadFile(parameters). 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:

// IMPORT:
<script type="text/javascript" src="https://cdn.turbo360-dev.com/dist/turbo.min.js"></script>

var turbo = Turbo({site_id: 'YOUR-SITE-ID'})

// bind this to a click handler to upload files:
turbo.uploadFile({
		apiKey: 'YOUR-API-KEY',
		completion: function(err, file){
			if (err){
				// handle error
				return
			}

			console.log('File Uploaded: ' + JSON.stringify(file))
		}
	})

This function should be binded to the upload-button-id button as a click handler from within a JavaScript file such as shown below:

..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.

Turbo NPM

The Turbo SDK can also be bundled via Webpack or another bundler for use in client-side libraries such as React, Vue JS and Angular. Below is a simple example of an upload function that can be binded to a button in a React component:

Images

Images are given special consideration on the Turbo file platform. They 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 PNG and JPEG images uploaded to Turbo are automatically receive these cropping and scaling options. GIF and aniated images are not included and are stored as conventional files.

Contact

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